いよいよ、今回からHTMLコーディングについて、説明していこう。
基本となるのは、Google HTML/CSS Style Guideだ。
単に、書き方や規則を羅列するだけでは分かりにくいので、この記事のために簡単なデモサイトを用意した。
それをもとに、わかりやすく説明しよう。
デモサイトの構造
このブログの中でシリーズで書いている「ざっくりLinux！」を、簡単なウェブサイトにしてみた。
現在、トップページのみのデモサイトだが、このデモサイトの構造は、以下の通り制作する予定。
なお、今後の記事執筆の都合上、トップページのファイル名は「demo-1.html」、スタイルシートのファイル名は「style-demo-1.css」にしてある。以下の図とはファイル名が違うので、ご注意を。
【デモサイトのファイルディレクトリ】
かなりシンプルなウェブサイトではあるが、最低限の要素は揃っている。上図の構造とデモサイトを見比べ、各ページがどのようにリンクしているかを理解しよう。
なお、上図には記載されていないが、imagesフォルダには「Linux.jpg（トップページ中央のイメージ）」の他に「Zakkuri.png（左上、サイトロゴイメージ）」という画像を追加している。
最初に、完成したウェブサイトの構造を考えながら、ファイルとフォルダを用意していく。
ローカル（パソコン内）上に、仮で「Home」という名前をつけたフォルダを用意する。これがウェブサイトのトップページ（ホームページ）になる。
その中に、ウェブサイトを構成する要素すべて（HTML、CSS、javascriptの各ファイル、画像）を、上図のように整理しながら入れておく。
トップページ以下、各カテゴリーごとにサブフォルダを作成し、ウェブサイトと同様の階層を作っていく。
ネット上にアップロードする時は、「Home」内のすべてのファイルを、FTPソフトなどでサーバーへアップロードすれば、このディレクトリどおりにウェブページ同士がリンクする。
参考として、このデモサイトのトップページのHTMLと、スタイルシートを以下に貼り付けておく。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ざっくりLinux！</title>
<meta name="description" content="Linuxのあれこれをざっくりと書いています">
<link rel="stylesheet" href="css/style-demo-1.css">
</head>
<body>
<header>
<div>
<a href="index.html"><img id="logo" src="images/Zakkuri.png" alt="Site Logo"></a>
</div>
<nav class="pc">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">Debian</a>
</li>
<li>
<a href="#">Ubuntu</a>
</li>
<li>
<a href="#">RHEL</a>
</li>
<li>
<a class="nav-end" href="#">OSS</a>
</li>
</ul>
</nav>
</header>
<div class="container"><!-- 大枠のコンテナ -->
<div class="main-container"><!-- メインコンテナ（横幅設定） -->
<h1>ざっくりLinux！</h1>
<p class="title-discript">Linuxのあれこれをざっくりと書いています</p>
<img class="imgcenter" src="images/Linux.jpg" alt="Linux イメージ">
<div class="index">
<p>【目次】</p>
<ul class="mokuji">
<li>
<a href="#">Debianに関する記事一覧</a>
</li>
<li>
<a href="#">Ubuntuに関する記事一覧</a>
</li>
<li>
<a href="#">RHELに関する記事一覧</a>
</li>
<li>
<a href="#">OSSに関する記事一覧</a>
</li>
</ul>
</div>
</div><!-- ここまでメインコンテナ（横幅設定） -->
<footer>
<p class="footmenu"><a href="index.html">Home</a> | <a href="#">Sitemap</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a></p>
<p class="copyright">Copyright ©ざっくりLinux！ All rights reserved.</p>
</footer>
</div><!-- ここまで大枠のコンテナ -->
</body>
</html>@charset "utf-8";
* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 1em;
}
header {
background: #dadada;
display: flex;
height: 70px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#logo {
height: 50px;
margin: 10px auto;
}
.pc {
padding-right: 1em;
}
nav {
margin: auto 0 0 auto;
}
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav ul li a {
border-right: #999 2px solid;
color: black;
padding: 0 .3em;
text-decoration: none;
}
nav ul li a.nav-end {
border: none;}
.container {
position: relative;
top: 80px;
}
.main-container {
margin: 0 auto 2em auto;
width: 90%;
}
footer {
margin: 0 auto;
border-top: #999 1px solid;
width: auto;
}
h1 {
text-align: center;
}
.title-discript {
text-align: center;
}
/* 文章センタリング */
.center {
text-align: center;
}
/* 画像センタリング */
.imgcenter {
border: none;
display: block;
margin: 1em auto;
max-width: 100%;
}
.index {
display: block;
border: black 1px solid;
margin: 1em auto;
padding: 1em;
width: 50%;
}
.mokuji {
list-style: none;
line-height: 2em;
padding-left: 0;
}
.footmenu {
margin-left: 1%;
margin-right: 1%;
padding-right: 1em;
text-align: right;
}
.footmenu a {
color: black;
text-decoration: none;
}
.copyright {
margin-top: 1.5em;
text-align: center;
}HTML文書のheadタグの最後に、
<link rel="stylesheet" href="css/style-demo-1.css">という記載がある。これは、HTML文書に別ファイルのスタイルシート（ファイル名：style-demo-1.css）をリンクさせて、読み込ませているもの。
上記のトップページだけなら、ここに貼り付けたHTMLとCSS、それと2つの画像だけで、ブラウザに表示することができる。
以後、このデモサイトを制作していきながら、各項目ごとの説明とコーディングについて書いていくことにする。
一般的なコーディング規則
最初は、HTML／CSSに共通する、一般的な規則から。
プロトコル
2018年7月以降、全てのウェブサイトは「https (Hypertext Transfer Protocol Secure)」にすることが奨励された。
文字通り、全てのウェブサイトは「Secure（安全）」な「https」に対応していなければならない。ウェブサイトのURLも、必ず「https://〜」から始まることが大前提だ。
このことは、レンタルサーバーとの契約に必要になってくることなので、ここでは省略する。
また、HTMLでは以下のように、javascriptなどをインターネット経由で読み込ませることがある。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>その際、読み込ませるサイトのURLも、必ず「https」で記載する、ということ。
（Google HTML/CSS Style Guide 2.1.1参照）
インデント
同一要素の場合、半角2スペースずつ、インデントさせる。
上記HTMLファイルのうち、ulタグ（リスト表示）の各項目（liタグ）は、2スペースずつインデントされている。
このインデントは、より複雑なテーブル要素や項目の多いナビゲーションなど、開始タグと終了タグがどこか、分かりやすくする目的がある。
スペースとタブキーによるスペースを混同させてはならず、またタブキーによるスペース自体使用してはけない（今まで結構やっていた…、反省）。
（Google HTML/CSS Style Guide 2.2.1参照）
エンティティ
エンティティとは、アンパサンド（＆）で始まり、セミコロン（；）で終了する文字列のこと。例えば、Copyrightはテキストエディタ上で、
「©」
と書く。これが、デモサイトのフッター部分では「©ざっくりLinux！」と表示されている。
その他にも、「＆」と表示するには「&」、矢印「→」は「→」と書く。わからないものがあれば、「HTML特殊文字」と検索すれば、一覧のサイトがヒットする。
なお、Google HTML/CSS Style Guideでは、HTMLファイルとテキストエディタの文字コードが同じであれば、このように書く必要はないとしている。
（Google HTML/CSS Style Guide 3.1.6参照）
その他
全てのコードは、小文字が原則。大文字は使用しない。
ただし、imgタグの「alt属性」など、属性値では、大文字やASCII以外の日本語などの使用も可能だ。
（Google HTML/CSS Style Guide 2.2.2参照）
また、文末（各行の最後）に挿入された空白（スペース）は、必ず削除しておく。
Visual Studio Codeなどのテキストエディタを使用すれば、無用なスペースを表示してくれる。
（Google HTML/CSS Style Guide 2.2.3参照）
最低限、上記のことに気をつけてコーディングしていけば、誰もが見やすく、美しいコーディングとなるはずだ。
CSSのコーディング規則
次は、スタイルシートのコーディングに関する規則をまとめてみる。
HTML文書同様、スタイルシートでは、以下のとおり行頭で文字コードに関する記述をする。
@charset "utf-8";HTMLと揃えて、文字エンコーディングを「UTF-8」で書いていくことを、1行目で宣言しているもの。しかしながら、書き方はHTMLとは違うので、覚えてしまおう。
IDとクラス
上記スタイルシート26行目の、「#logo」という表記がある。
これが「ID」で、HTML文書のimgタグ（21行目）に、「id=”logo”」として記述している。
つまり、スタイルシート内の「#logo」で囲まれた各種装飾内容は、HTML内のサイトロゴ画像の位置を決めている。
具体的には、サイト左上のサイトロゴで
- 画像の高さ（height）を50ピクセルに指定する
- マージンで画像の上下を10ピクセルずつ空ける
よう指示している。
また、スタイルシート内の「.pc」は「クラス名」で、HTML上では「class=”pc”」と記述する。
このように、
- 「#（シャープ）」がつくものは「ID」
- 「.（ドット）」がつくものは「クラス」
と覚えておこう。
スタイルシートは、その装飾がHTML部分のどこを装飾するのかを明確にするために、ID名やクラス名で区別している。
IDは、そのサイト内で固有のもので1ページに1個だけ、クラス名は、同じような装飾をする場所全てに使用できる。
ID名・クラス名は、必ず制作チーム内で事前に決めておかなければならず、
- 意味があり、一般的な名前
- 要素の目的を反映した具体的な名前
- できるだけ簡潔で分かりやすい名前
を使用しなければならない。
（Google HTML/CSS Style Guide 4.1.1、4.1.2参照）
上述の「#logo」は、ウェブサイトのロゴイメージに関する装飾だということがわかる。これなら、チーム内の誰がみても理解できるだろう。
次に、タイプセレクターについて。
以前は
img#logo {
height: 50px;
margin: 10px auto;
}のように、ID名の前にわざわざ、タイプセレクターの「img」をつけて書いていたが、現在ではこれを推奨していない。
ID名は固有のものだから、わざわざ不要なタイプセレクターをつける必要はない、ということ。クラス名も、サイト内で重複しないよう命名されるものなので、同様だ。
（Google HTML/CSS Style Guide 4.1.4参照）
また、ID名・クラス名で、単語を区切る場合は、アンダーラインではなく「ハイフン」で繋ぐ。
スタイルシート64行目の「.main-container」は、「.maincontainer」ではなんだかわかりにくいし、また「.main_container」のようにアンダーラインを使用しない、ということ。
（Google HTML/CSS Style Guide 4.1.10参照）
省略
次に、省略の書き方について。
可能なら、効率的で理解しやすい省略形を使用しよう。
<!--非奨励-->
padding-top: 2em;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;
<!--奨励-->
padding: 2em 1em 0;margin（外側余白）とpadding（内側余白）は、反時計回りに1行で書くことができる。
上記例で、「非奨励」の、top（上）、right（右）、bottom（下）、left（左）は反時計回りに書いてあり、書き方自体は間違いではない。
だが、「奨励」のように、paddingを統一し、反時計回りは分かりきったことなので、あえて場所（top, rightなど）は省略して、1行にまとめている。
さらに、上下、左右が同じであれば、それも一つにまとめることができる。
センタリングの書き方としてよく使われる「margin: 0 auto;」は、実は、以下を省略した書き方だ。
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;（Google HTML/CSS Style Guide 4.1.5参照）
幅や長さの単位や、先頭の「0」も省略可能だ。
上記の「margin: 0 auto;」は、本来「0em（あるいは0px）」だが、ゼロの時は単位を省略する。
また、「0.5em;」は、先頭のゼロを省略して「.5em;」と書くことができる。
（Google HTML/CSS Style Guide 4.1.6、4.1.7参照）
さらに、色指定の表記も16進数で省略する。
「#eebbcc;」は「#ebc;」、「#999999;」は「#999;」と表記する。
（Google HTML/CSS Style Guide 4.1.8参照）
W3Cバリデーターを使おう
上記以外にもコーディングの規定はあるが、代表的なものだけ拾い上げた。
詳しくは、Google HTML/CSS Style Guideを常に読めるよう、ブックマークしておこう。今はGoogleの翻訳機能があるから、誰でもすぐに読むことができる。
HTMLコーディングは、常に正しいかをチェックすべきだ。
Visual Studio Codeのようなテキストエディタを使用すれば、書き間違いはチェックできる。しかし、そうでない場合は、常にバリデーターを使ってチェックを心がける。
HTMLコーディングに、特別な才能は必要ない。
必要なのは、常に検証する「丁寧さ」だけだ。
【本で学習したい人はコレ】
コメント