Webサイト作りを学ぶHTML初心者は、「こんなサイトを作りたい！」と思って、それを実現する方法を調べたりするが、見た目からよりも構造から入るほうがいい、というのが俺の結論である。

構造とはHTMLの構造のことだ。

実際、ほとんどのWebサイトは、HTMLだけを見ればどこも似たようなものである、と言っても過言ではない。

「こんな見た目にしたい！」と方法を探して、見つけたコードをコピペばかりしていると、いつの間にかHTMLはぐちゃぐちゃになってしまって、あとでCSSを弄ったりモバイルに対応させたりするときに困る、なんてことになりがちである。

HTMLバージョン5（HTML5）ではせっかく直感的な意味をもつ構造タグが追加されたので、それらを使った「簡単で、必要十分なHTML」の書き方を紹介したい。

HTMLは簡単である

HTMLにおいて覚えるべきことは多くない。

まして、一般的なサイトなら使うタグはどこも大体同じで決まっている。

俺たちは先人たちが確立した書き方をそのまま使えるのだ。

むしろWeb制作において難しいのは、色とか形とか画像とかのデザイン面だろう。
誰か俺にデザインセンスを分けてくれ……

そういうわけで、HTML自体はただの構造化マークアップなので難しくないのだが、HTML要素にスタイルを適用するCSSや、動的な処理（動きや変化など）を追加するJavaScriptは簡単ではない。

そういうのは後でゆっくり学んでいけばいいと思う。

Step 1：超基本的な構造

俺のサイトの構造を単純化したものが、以下のHTMLソースだ。

<!doctype html>
<html lang="ja">
<head prefix="【略】">
    <!-- metaタグなどいろいろ -->
</head>
<body>
<!-- ここから本文 -->

<header>【ヘッダー画像・グローバルナビゲーションなど】</header>
<main>【メインコンテンツ】</main>
<aside>【サイドバー】</aside>
<footer>【フッター】</footer>

<!-- ここまで本文 -->
</body>
</html>

厳密にはちょっと違うが、だいたいこんな感じ。

赤字部分がページの本文であり、大きく分けて4つの部分で構成されている。

<header> がヘッダー、 <main> が左ペインでメイン領域、 <aside> が右ペインでサイドバー、 <footer> がフッターとなっている。

<aside> タグの使い方には諸説あり、サイドバーに使うとする派とサイドバーには使うべきでないとする派があるが、「メインでないコンテンツ」という点だけ押さえて、あまり深く考えていない。

Step 2：パーツを追加

上のHTMLの本文の部分に、さらにいくつかのパーツ（要素）を追加する。

<header>
    <div>【ヘッダー画像】</div>
    <nav>【グローバルナビゲーション】</nav>
</header>
<main>
    <article>【記事の部分】</article>
</main>
<aside>
    <div>【サイドバー項目1】</div>
    <div>【サイドバー項目2】</div>
</aside>
<footer>
    <div>【フッター項目】</div>
    <address>【住所／問い合わせ先】</address>
</footer>

赤字部分が、Step 1から追加されたところである。

<nav> がナビゲーション、 <article> が記事、 <address> が住所というふうに、タグ名の通りの用途となっていてわかりやすい。

他に適切なタグがない部分はすべて <div> でいい。

<div> は汎用のブロック要素であり、他に適切なタグがあればそちらを使うべきとされているが、迷ったら <div> でも問題ない。

Step 3：本文を追加

メイン領域だけを抜粋して、記事の本文を追加する。

<main>
    <article>
        <h1>【記事の見出し】</h1>
        <div>
            <p>【本文の段落】</p>
            <section>
                <h1>【セクション1の見出し】</h1>
                <p>【本文の段落】</p>
            </section>
            <section>
                <h1>【セクション2の見出し】</h1>
                <p>【本文の段落】</p>
                <section>
                    <h1>【セクション2-1の見出し】</h1>
                    <p>【本文の段落】</p>
                </section>
            </section>
        </div>
    </article>
</main>

赤字（と緑字）部分が、Step 2から追加されたところである。

<h1> は見出しに使う。

<p> は本文の段落を示し、実際には段落の数だけある。

<section> は文書構造としてセクション（節）に分けるのに使うが、どこで使うべきかわからないって人も多いという。

最もわかりやすい説明は、「見出し（hタグ）を付ける場所で区切る！」だろう。

最初のセクションより前の部分は最上位のセクションにあたるが、構造上 <section> を使えないので、 <article> を最上位のセクションとしている。

じゃあ <div> （ソースの緑字部分）は何かというと、別の目的のために本文全体を囲んでいるものだ。

ところで <h1> タグだけでなく <h2> <h3> タグは？　と思う人もいるだろうが、HTML5ではセクションを <section> で区切れば、hタグを区別して使う必要はない（明示的なセクショニング）。

一方、hタグを階層レベルによって使い分けることで <section> による区切りを省略できる（暗黙のセクショニング）。

<section> は階層のレベル分だけいくらでも重ねて使うことができる。

完成！

ね、簡単でしょ？

え？　見栄えが全く良くない？

そもそも実際にはこれだけじゃ未完成？

細かい部分とかスタイルシートとかは説明してないし、そういうのが一番難しかったりするのだが、難しい部分は後から少しずつ追加していけばいいわけで。

ここまでわかれば、ひとまずどこに出しても恥ずかしくないサイトを作れるようになっているはずだ。

モバイル対応も実は簡単

スマートフォンやタブレット端末といった小さな画面に向けたサイトのデザインは現在では必須となっている。

大画面のデスクトップPCとは別の表示にしたい場合、CSSの「メディアクエリ」という仕組みによってスタイルを別々に適用できる。

メディアクエリは、以下の例のように「全体向けのCSS」とは別に「画面サイズに応じたCSS」を記述してスタイルを適用するものだ。

/* ここに全体向けのCSS */

@media screen and (max-width: 768px) { /* メディアクエリここから */

/* ここに画面幅481〜768pxの端末向けのCSS */

} /* メディアクエリ終わり */

@media screen and (max-width: 480px) { /* メディアクエリここから */

/* ここに画面幅480px以下の端末向けのCSS */

} /* メディアクエリ終わり */

「メディアクエリ」というと難しく感じるが、CSSは基本的に上から下へと上書きしていく仕組みであり、メディアクエリでも同様である。

つまり、モバイル向けの表示において、全体向けのCSSと同じスタイルでいいときはメディアクエリには何も書かず、スタイルを変えたい部分だけメディアクエリにCSSを書いて上書きをする、という感じになる。

基本的には上のほうのCSSをコピーして、数値や色だけを変えるという方法でよく、決して難しい話ではない。

以下は <h1> の文字の大きさをメディアクエリによって切り替える例である。

h1 {
    font-size: 28px;
    font-weight: bold;
    font-color: #333333;
}

@media screen and (max-width: 768px) { /* メディアクエリここから */

h1 {
    font-size: 24px;
}

} /* メディアクエリ終わり */

@media screen and (max-width: 480px) { /* メディアクエリここから */

h1 {
    font-size: 20px;
}

} /* メディアクエリ終わり */

この例では、 <h1> のスタイルのうち font-size だけをメディアクエリで上書きして、他のプロパティについてはそのままにしているので、どの画面幅の端末に対しても文字の大きさ以外は共通のスタイルとなる。

で、これまでのHTMLの話と一見関係なさそうだが、何が言いたいのかというと、HTMLを構造的かつシンプルに書けば、モバイルに対応するのも簡単だということだ。

メディアクエリとその他のモバイル対応に関しては、以下の記事でもう少し詳しく説明しているので、併せて参照されたい。

● れーとーびーむの作り方 - モバイル対応編

終わりに

今回は、誰でもすぐに書けるくらい簡単なHTMLの書き方を紹介した。

この記事を書こうと思ったのは、身の回りでサイトを作ろうとしている人や、サイトをモバイルに対応させようとしている人がいろいろ苦労しているのを見て、HTMLなんてもっと簡単に書けるのに……と思ったのがきっかけだ。

しかし、世の中の多くの人はHTMLを自分で一から作ったりはせず、見栄えの良いテンプレートやテーマを使用していて、HTMLやCSSについてはブラックボックス、という人も多いだろう。

もっとシンプルなテンプレートを提供している人もいるが、知識のある人が自分でゴリゴリカスタマイズするためのものも多い。

そこで、初心者でも簡単に書け、構造的な最新のHTMLを理解する助けになるような書き方を考えてみた。

次回（次とは言ってない）はCSSによるページのレイアウトを解説しようかなーなんて。