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

2018/10/7

コーディングとは何か？

ホームページ（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セレクタ、プロパティ、およびプロパティ値（文字列を除く）は小文字を使用する。