HTMLコーディングをはじめよう〜副業にも!|第3章 コーディングの基本と規則

HTML Coding

いよいよ、今回からHTMLコーディングについて、説明していこう。

常に基本となるのは、Google HTML/CSS Style Guideだ。

単に書き方や規則を羅列するだけでは分かりにくいので、この記事のために、簡単なウェブサイトを用意した。

サーバーにアップロードしたものではないので、分かりやすくウェブページのスクリーンショットを随所に入れていく。

デモサイトのフォルダとファイル

このブログの中でシリーズで書いている「ざっくりLinux!」を、簡単なウェブサイトにしてみる。

まだ、記事の内容は書いていないが、

「WordPressのようなCMSではなく、HTMLウェブサイトにしたらこんな感じ」

というデモサイトを作ってみた。

サイトのスクリーンショットは、以下の通り。

仮ウェブサイトトップページ

【トップページのスクリーンショット】

仮ウェブサイトカテゴリートップ

【カテゴリートップページ(Debian)スクリーンショット】

わかりやすく、内部リンクはアンダーラインがついたままにしてある。また、フッター部分のHome以外は、まだHTMLファイルを作っていない。

そして、このデモサイトのファイル構造は、以下の通りとなっている。

ウェブサイトのディレクトリ

【デモサイトのファイルディレクトリ】

かなりシンプルなウェブサイトではあるが、最低限の要素は揃っている。

ローカル(パソコン内)上に、「Home」とでも名前をつけたフォルダを用意し、その中にウェブサイトを構成する要素すべて(HTML、CSS、javascriptの各ファイル、画像)を入れておく。

トップページ以下の各カテゴリーごとに、サブフォルダを作成し、ウェブサイトと同様の階層を作っていく。

ネット上にアップロードする時は、「Home」内のすべてのファイルを、FTPソフトなどでサーバーへアップロードすれば、このディレクトリどおりにウェブページ同士がリンクする。

次に、このデモサイトのトップページのHTMLと、スタイルシートを以下に貼り付けておく。

<!doctype html>

<html lang="ja">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ざっくりLinux!</title>
<meta name="description" content="Linuxのあれこれをざっくりと書いています">

<!--Google HTML/CSS Style Guide 3.1.5 関心の分離/3.1.8 type属性-->
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<h1><a id="sitetitle" href="index.html">ざっくりLinux!</a></h1>

<p class="discript">Linuxのあれこれをざっくりと書いています</p>

<!--Google HTML/CSS Style Guide 2.2.1 インデント-->
<nav>
<ul>
  <li><a href="Debian/index.html">Debian</a></li>
  <li><a href="Ubuntu/index.html">Ubuntu</a></li>
  <li><a href="RHEL/index.html">RHEL</a></li>
  <li><a href="OSS/index.html">OSS</a></li>
</ul>
</nav>
</header>

<h2>「ざっくりLinux!」のホームページへようこそ!</h2>

<!--Google HTML/CSS Style Guide 3.1.4 マルチメディアフォールバック-->
<img class="imgcenter" src="images/Linux.jpg" alt="Linux イメージ">


<footer>
<p class="footmenu"><a href="index.html">Home</a> | Sitemap | About Us | Contact Us</p>

<!--Google HTML/CSS Style Guide 3.1.6 エンティティ参照-->
<p class="copyright">Copyright ©ざっくりLinux! All rights reserved.</p>
</footer>

</body>
</html>

@charset "utf-8";

body {
  font-size: 1em;
  margin-left: 1%;
  margin-right: 1%;
  max-width: 100%;
}

header {
  border-bottom: #999 1px solid;
}

nav {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  max-width: 100%;
}

nav li {
  float: left;
  height: 2em;
  list-style: none;
  line-height: 2em;
  margin-left: 0;
  text-align: center;
  width: 24%;
}

footer {
  margin: 0 auto;
  border-top: #999 1px solid;
  width: auto;
}

h1,
h2 {
  text-align: center;
}

#sitetitle {
  color: black;
  text-decoration: none;
}

.discript {
  text-align: center;
}

/* 文章センタリング */
.center {
  text-align: center;
}

/* 画像センタリング */
.imgcenter {
  border: none;
  display: block;
  margin: 1em auto;
  max-width: 100%;
}

.footmenu {
  margin-left: 1%;
  margin-right: 1%;
  padding-right: 1em;
  text-align: right;}

.copyright {
  margin-top: 1.5em;
  text-align: center;
}

HTML文書のheadタグの最後に、

<link rel="stylesheet" href="css/style.css"> 

という記載がある。これで、HTML文書に別ファイルのスタイルシート(ファイル名:style.css)をリンクさせて、読み込ませている。

上記のトップページだけなら、ここに貼り付けたHTMLとCSSだけで、ブラウザに表示することができる。

以後、このデモサイトを制作していきながら、各項目ごとの説明とコーディングについて書いていこう。

一般的なコーディング規則

最初は、HTML/CSSに共通する、一般的な規則から。

プロトコル

2018年7月以降、全てのウェブサイトは「https(Hypertext Transfer Protocol Secure)」にすることが奨励された。

文字通り、全てのウェブサイトは「Secure(安全)」なhttpsに対応していないといけない。

HTMLでは、以下のように、javascriptなどをサードパーティーから読み込ませることがある。その際、読み込ませるサイトのURLも、必ず「https」で記載する、という意味だ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

Google HTML/CSS Style Guide 2.1.1参照)

インデント

同一要素の場合、半角2スペースずつ、インデントさせる。

上記HTMLファイルのうち、ulタグ(リスト表示)の各項目(liタグ)は、2スペースずつインデントされている。

このインデントは、より複雑なテーブル要素や項目の多いナビゲーションなど、開始タグと終了タグがどこか、分かりやすくする目的がある。

スペースとタブキーによるスペースを混同させてはならず、またタブキーによるスペース自体使用してはけない(今まで結構やっていた…、反省)。

Google HTML/CSS Style Guide 2.2.1参照)

エンティティ

エンティティとは、アンパサンド(&)で始まり、セミコロン(;)で終了する文字列のこと。上記HTMLでは、サイトのCopyrightのところに、

「&copy;」

と書かれているもののこと。実際には、トップページのスクリーンショットでわかるように、「©」と表示される。

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のコーディング規則

次は、スタイルシートのコーディングに関する規則をまとめてみる。

まず、改めて上記スタイルシート例を見てほしい。

1行目には、HTML文書同様、文字コードに関する記述がある。

HTMLと揃えるて「UTF-8」で書いていくことを、1行目で宣言しているが、その書き方はHTMLとは違うので、覚えてしまおう。

IDとクラス名

上記スタイルシートのうち、「#sitetitle」というところに注目してほしい。

これが「ID名」で、HTML文書のh1タグに囲まれたaタグに、「id=”sitetitle”」として、リンクしている。

つまり、スタイルシート内の「#sitetitle」で囲まれた各種装飾内容は、HTML内のタイトル部分を装飾している。具体的には、サイト上部のサイト名(「ざっくりLinux!」の箇所)で

  • 文字色は黒
  • リンクを示す下線はなし

を表している。

また、スタイルシート内の「.discript」は「クラス名」で、「class=”discript”」としてリンクしている。

このように、

個別の単語の前に「#」がつくものはID名、「.(ドット)」がつくものはクラス名

と覚えておこう。

スタイルシートは、その装飾がHTML部分のどこを装飾するのか、明確にするためにID名やクラス名で区別している。

ID名は、そのサイト内で固有のもの、クラス名は、同じような装飾をする場所全てに使用できるものだ。

ID名・クラス名は、必ず制作チーム内で事前に決めておかなければならず、

  • 意味があり、一般的な名前
  • 要素の目的を反映した具体的な名前
  • できるだけ簡潔で分かりやすい名前

を使用しなければならない。

Google HTML/CSS Style Guide 4.1.1、4.1.2参照)

上述の「#sitetitle」は、ウェブサイトのタイトルに関する装飾だということがわかる。これなら、チーム内の誰がみても理解できるだろう。

次に、タイプセレクターについて。

以前は

ul#nav {
  list-style: none;
}

のように、ID名の前にわざわざ、タイプセレクターの「ul」をつけて書いていたが、現在ではこれを推奨していない。

ID名は固有のものだから、わざわざ不要なタイプセレクターをつける必要はない、ということ。クラス名も、サイト内で重複しないよう命名されるものなので、同様だ。

Google HTML/CSS Style Guide 4.1.4参照)

また、ID名・クラス名で、単語の区切りはアンダーラインではなく、「ハイフン」で繋ぐ。

上記「#sitetitle」を区切る場合は、「#site-title」と書けば、より見やすい。

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コーディングに、特別な才能は必要ない。

必要なのは、常に検証する「丁寧さ」だけだ。

コメント