一から始めるWeb制作 #6〜HTML & CSSコーディングの基本と規則

HTML Coding

いよいよ、今回から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はテキストエディタ上で、

「&copy;」

と書く。これが、デモサイトのフッター部分では「©ざっくりLinux!」と表示されている。

その他にも、「&」と表示するには「&amp;」、矢印「→」は「&rarr;」と書く。わからないものがあれば、「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コーディングに、特別な才能は必要ない。

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

【本で学習したい人はコレ】

コメント