HOME  お役立ちブログ  コーディングに関する基礎知識

お役立ちブログ

お役立ちブログ

コーディングに関する基礎知識

コーディングとは何か?

ホームページ(Webサイト)はデザインの制作完了後、そのデザインをもとに、HTMLやCSS(のちほど詳しく解説します)といったマークアップ言語(コーディングをするための記述方法)で見出しをつけたり、リンクを設定したり、文字を太くしたりして、制作したデザインをブラウザ(Google Chrome・FireFox・Edge・IE等)で見える形にすることをコーディングといいます。

コーディングは、HTMLやCSSの仕様に沿って形成していく作業で、Web制作には欠かせない工程のひとつですが、Web制作関係者以外には、あまり知られておりません。

ここではコーディングの基礎知識とルールについてご紹介します。

 

基礎知識

HTMLとは

HTMLとは、マークアップ言語のひとつです。

Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、コンピューターが人間に代わって文書を適切に分析できるようにするための言語です。

私たちがよく観ているWebページのほとんどが、HTMLで作られています。

 

CSSとは

cssとは、スタイルシート言語です。

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ホームページ(Webサイト)がブラウザに表示される際の色・サイズ・レイアウトなどの表示スタイルについて指定します。

特に動きのないサイトを作るならHTMLとCSSだけで作れますが、動きのあるサイト(写真がスライドしたり、クリックしたら大きくなったり)を作りたいときは、JavaScript(jQuery)などの知識も必要になってきます。

また、コーディングは、好き勝手に記述していいものではありません。

一貫性のあるWebサイトを構築するために、会社やプロジェクトによって、あらかじめコーディングルールを決めておくことで、メンテナンスや拡張など容易にできるようになります。

また、途中からプロジェクトに参加した方がスムーズに入っていけることも重要になってきます。

 

Googleが推奨するコーディングルール

今回は検索エンジンのGoogleが推奨しているHTML、CSSのコーディングルールを一部ご説明します。

ちゃんと知りたいという方は、本家サイトをご確認ください(※すべて英文です。)

Google HTML/CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html

HTML

  • ドキュメントタイプ
    HTML5を使用する。
  • タイプ属性
    スタイルシートとスクリプトのtype属性は省略する。CSSとJavaScriptには型属性を使用しない。
    HTML5はデフォルトで text/css と text/javascript を意味するため、type属性を指定する必要はない。
  • 大文字・小文字の使用
    小文字のみを使用する。
    HTML要素名、属性、属性値(text/CDATAを除く)、CSSセレクタ、プロパティ、およびプロパティ値(文字列を除く)は小文字を使用する。

 

CSS

  • idとclass名
    意味のある、または一般的なidとclass名を使用すること。要素の目的を反映し、後に変更の必要がない名前にすることにより、メンテナンス性が保たれる。

 

コーディングのポイント

HTMLは文書構造、CSSはデザインをあてるものという役割をしっかり考えたうえでコーディングをすることがポイントです。

HTML

  • 無駄な改行や余計なスペースをなくす。
  • 見出し(h1、h2など)、段落(p)、リスト(ul、liなど)、定義(dl、dt、dd)などの役割にあったタグで正しく構築する。

 

CSS

  • 外部ファイルに書いてリンクさせる。
  • 汎用性のあるセレクタはclassで指定する、font(size、weight、styleなど)やbackgroud(color、image、position)などの複数あるプロパティは、まとめて記述するなどの簡潔な書き方をする。

 

ブラウザチェック

ブラウザチェックとは、「さまざまなブラウザで適切な表示・動作がされているかをチェックすること」を指します。例えば、「サイトのデザインが適切な状態で表示されているか」や、「サイトのアニメーションが適切に動作しているか」という点などをチェックするわけです。

また、最近ではスマートフォン、タブレットの普及によりさまざまな画面サイズが存在します。スマートフォン実機での確認はもちろん、PCでブラウザ幅を縮めたり、広げたりして、レイアウト崩れがないか確認します。

※確認するブラウザはInternet Explorer(Edge)、Firefox、Google Chromeが一般的です。

 

最後に

おおまかではありますが、コーディングについていかがでしたか?

デザイン制作同様、コーディングの知識も専門的です。

記述が整っているとサイト表示時のパフォーマンスも上がり、検索エンジンで上位に表示してもらえる可能性が増えて集客効果が高まる可能性があります


ページトップへ