ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、「id」と「class」についてご説明しました。今回はHTMLとCSSの記入上のルールについて簡単にまとめておきたいと思います。
HTMLとCSSで記入する方法はいくつかあり、中には必ずしも以下のルール通り書かかなくても、ブラウザでは問題なく表示されるというものもあります。
しかし、「推奨される方法」に従って最初に作成しておくと、後々やり直しが必要になったりする事態を避けることができたり、その後のページ更新作業の際にわかりやすいというメリットがありますので、さらっと見ておきましょう。
詳しくはGoogleのサイトで説明されていますが。主なものを挙げておきます。
HTML「head」部分の記入ルール
スクリプトの読み込みには「HTTPS」プロトコルを使用する
今後、出てくる部分ですが、HTMLファイルに「head」部分にスクリプトを込みこむ場合があります。多くの場合「jQuery」というスクリプトなのですが、その場合には以下のように推奨された方法「HTTPS」を用いましょう。<!– 非推奨の表記 –>
<!-- 非推奨の表記 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- 非推奨の表記 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- 推奨される表記 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
文字コードには「UTF-8」を使用する
文字コードにはいくつか種類があり、HTMLで使用する文字コードは<meta charset=””>で指定できます。UTF-8のほかにも
- Shift-JIS
- EUC-JP
- ISO-2002-JP
などがありますが、標準的なものとして「UTF-8」を指定します。
<!-- 推奨される表記 -->
<meta charset="utf-8">
「link」や「script」には「type」は不要
以前は使用することになっていたのですが、今は不要になっているものがあります。
「link」や「script」には以下のように「type」は付けずに記入しましょう。
<!- 非推奨 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<!-- 非推奨 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- 推奨 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<!-- 推奨 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML「body」部分の記入ルール
HTMLにはダブルクォーテーションを使用する
シングルクォーテーションではなく、ダブルクォーテーションを使用しましょう。多くのテキストエディタでは、自動的にこのダブルクォーテーションが入力の際の候補として挙がります。
<!-- 非推奨 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推奨 -->
<a class="maia-button maia-button-secondary">Sign in</a>
HTMLは見やすく＋インデントは「スペース2つ分」
インデントすることにより、HTMLファイルは見やすいものにしましょう。
インデントを行なう際は「Tab」などは使用せずに「スペース2つ分」を使用しましょう。
<!-- 非推奨 -->
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</tr>
</table>
<!-- 推奨 -->
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</tr>
</table>
「要素」や「セレクタ」には基本的にすべて小文字を使用する
大文字は使わないようにしましょう。
<!-- 非推奨 -->
<A HREF="/">Home</A>
<!-- 推奨 -->
<img src="google.png" alt="Google">
/* 非推奨 */
color: #E5E5E5;
/* 推奨 */
color: #e5e5e5;
「CSS」表記のルール
「id」 と 「class」 名は分かりやすく意味のあるものにする
「id」と「class」名を付けるときにどうしようか悩むことがあるのですが、変な名前を付けておくと後々なんなのかわからなくなってしまいますので、分かりやすい名前を付けるようにしましょう。
一般的には、数字の羅列などの意味をなさない名前や、「green」などの見た目をそのまま名前にするのではなく、その要素の役割や目的を示す名前を付けるとよいです。
/* 非推奨: 意味のない名前 */
#yee-1901 {}
/* 非推奨: 見た目をそのまま名前にすること */
.button-green {}
.clear {}
/* 推奨: 意味のある名前。要素の役割がわかるような名前 */
#gallery {}
#login {}
.video {}
「id」「class」名にタイプセレクタをつけない
「id」「class」名には「ul」や「div」「p」などのタイプセレクタは付けず、CSSにはセレクタ名のみ書きましょう。
/* 非推奨 */
ul#example {}
div.error {}
/* 推奨 */
#example {}
.error {}
できるだけショートバンドプロパティーを使用する
例えばCSSでスタイルを指定するときに、「上の余白」、「下の余白」、「右の余白」・・・など個別に指定することができます。
ただ、それをCSSで記入するときは、それぞれ別々に指定するのではなく、できるだけ一行にまとめた（ショートバンド）で記入しましょう。
/* 非推奨 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推奨 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
まとめ
いかがでしょうか。以上のルールを念頭に置いてホームページを作っていくと、後々役に立つことがありますので、参考になさってください。
では次回は、ホームページのベースとなるレイアウトについて考えてみましょう。