れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(2)Webサイト作りを学ぶHTML初心者は、「こんなサイトを作りたい!」と思って、それを実現する方法を調べたりするが、見た目からよりも構造から入るほうがいい、というのが俺の結論である。構造とはHTMLの構造のことだ。実際、ほとんどのWebサイトは、HTMLだけを見ればどこも似たようなものである、と言っても過言ではない。「こんな見た目にしたい!」と方法を探して、見つけたコードをコピペばかりしていると、いつの間にかHTMLはぐちゃぐちゃになってしまって、あとでCSSを弄ったりモバイルに対応させたりするときに困る、なんてことになりがちである。HTMLバージョン5(HTML5)ではせっかく直感的な意味をもつ構造タグが追加されたので、それらを使った「簡単で、必要十分なHTML」の書き方を紹介したい。終わりにHTMLは簡単であるHTMLにおいて覚えるべきことは多くない。一般的なサイトなら使うタグはどこも大体同じで決まっている。俺たちは先人たちが確立した書き方をそのまま使えるのだ。Web制作において難しいのは、色とか形とか画像とかのデザイン面だろう。誰か俺にデザインセンスを分けてくれ......そういうわけで、HTML自体はただの構造化マークアップなので難しくないのだが、HTML要素にスタイルを適用するCSSや、動的な処理(動きや変化など)を追加するJavaScriptは簡単ではない。いうのは後でゆっくり学んでいけばいいと思う。俺のサイトの構造を単純化したものが、以下のHTMLソースだ。--></body></html>厳密にはちょっと違うが、だいたいこんな感じ。赤字部分がページの本文であり、大きく分けて4つの部分で構成されている。フッターとなっている。タグの使い方には諸説あり、サイドバーに使うとする派とサイドバーには使うべきでないとする派があるが、「メインでないコンテンツ」という点だけ押さえて、あまり深く考えていない。上のHTMLの本文の部分に、さらにいくつかのパーツ(要素)を追加する。1から追加されたところである。住所というふうに、タグ名の通りの用途となっていてわかりやすい。