ささぴよ 
Webサイトを作るなら絶対に必要になるHTMLコーディングの知識ですが、何を重要視したらいいのかとか、あんまりよくわからなかったりしますよね。ということで、今回はその辺りについて書いていこうかと思います。
正確に技術としての理解をするということよりは、大枠としてどんなものなのかということや、どう使えるのかということをイメージでとらえるためにまとめている記事です。
この記事を通して興味が湧いたら、他の皆さんの書いている記事も見てみてください。必要な記事が読めるようになっていると思います。
目次ページはこちらにありますので、よかったらみてみてください。
この記事の目次
そもそもは構造を示すもの
HTMLは「文書」と呼ばれる通り、基本的にはその内容が「文書」であることが前提になっています。それに合わせてその構造を示すために作られたのがHTMLです。
つまり「ここは見出しだよ」とか「ここに画像があってね」とかそういうことを書いていくものであるという話ですね。というところから、細かいことを言えばHTMLはプログラミング言語ではないということになります。実際に呼ばれる際には「マークアップ言語」と呼ばれます。
「ここからここまで」という考え方
基本的な考え方
基本的なHTMLの考え方は「ここからここまで」です。つまり、開始と終了があります。基本的にこの構造を守って作っていきましょう。
仕様書を見てみると、省略できるタグというのがたくさんあって、短く書くこともできたりするわけですが、視認性の観点から避けるべきです。必ずしも未来永劫自分がファイルを直すわけではないということを忘れてはいけません。
例外もある
例外もあります。例えば画像を配置するimgタグです。これは「ここにあるよ」というタイプのものなので、配置するだけで「ここからここまで」には当たりません。それ以外にも、外部ファイルの読み込みに使われるタグの一部や、HTMLファイルの仕様を提示したりするタグなどの類は「ここからここまで」の形式ではありません。とは言いつつも、表示されるタイプのものの殆どが「ここからここまで」スタイルであるということになります。
この辺りは、１つ前の記事でも「ボックスモデル」として触れているので、よかったら見てみてください。
コーディングをイメージしたデザイン
紙物のデザインをしてきた方々が苦戦する部分として、「Webだと何ができるの？」というところが見えず、無茶なデザインを作ってしまうことがあるというところでしょうか。
でも、結論から言えば、「Webだからできないデザインはほぼない」と考えていいと思います。金色の表現云々とかはそもそもの特性として出来ないということにして、基本的には垣根はないです。ただ、コーディングがめっちゃ大変になる可能性はある…ってことですね。
ただ、デザイナーとして気をつけてあげたいところとしては、「見る端末によってサイズが変わる」という点です。ここの扱いをどうして欲しいのかという点において、明確な指示をしてあげるべきです。
例えば、優先されるのは「余白」なのか「要素のサイズ」なのか…とか。それらも「絶対的なサイズ」で指定するのか「相対的なサイズ」で指定するのかという点も重要です。
…と、割とデザイン面に突っ込んでしまいましたが、この辺りはCSSの記事で触れるとして、デザインの全体を見ている中で「ここからここまで」が見えるものになっているかというのはコーディングをスムーズにできるようなデザインかどうかという点にしっかりつながると思います。これは具体的に見えている線や塗りとしてではなく、「見えないボックスがイメージできるか？」という見方です。「見えるっ！見えるゾッ！」ってなればGoodですね。
ちなみに、この「ボックス」は傾いたり重なっていたりしても大丈夫。そこはCSSで頑張ることができます。
とにかく適切なタグで適切に囲もう
よくあるのが、何を使えばいいかわからないから適当にタグを使ってしまうというパターン。表示を実現できればクライアントさんは納得してくれると思いますが、SEOの面から考えると良くありません。また、読み上げブラウザなどにとってもよくないかもしれません。
この記事の前半でも話に出している通り、「ここからここまで」という形で書いていくので、「ここは見出しですよー」とか「これで1つの段落ですよー」ってこととかがわかるようにしてあげましょう。基本的なタグはいくつか覚えておくべきです。私が思うに押さえておくべきタグはこの辺りかな？っていうのを挙げておきますね。（これだけでいいという意味ではないです。）
- head
- body
- h1, h2, h3, h4, h5, h6
- p
- a
- img
- nav
- ul, ol, li
- dl, dt, dd
- article, section
- div, span
- title
- meta, script, link
ということで、この辺は役割とか覚えておく方がよさそうです。これ以外にもたくさんタグはあるんですが、まずはここからという感じでしょうか。そもそもの大前提となるタグは除いてますので、その辺りは別途知っておきましょう。
ということでなんだかんだと書いてきていますが、はっきりした内容ではないですね。我ながらそう思います。結局HTMLの考えってシンプルで、「構造を確実に見せる」ということで、そのために「適切なタグを知っておく」ということと、デザインを実現するために「CSSでできること」というのを理解しておくのが一番かもしれません。絶対にHTMLでデザイン（サイズ調整や色の指定は）しないようにしましょう。