サイト制作していると、どうしてもcssに目がいきますよね。
cssがWEBデザインの醍醐味ですからしょうがないんですが。
僕も初心者の頃は、cssばかりにかまってました。
もうhtmlのことなんて気にしてられない。
そんな感じでした。
ただ、実際はhtmlがサイトの主役なんですね。
htmlはサイトの骨組み、cssはサイトの色付け
htmlはサイトの骨格です。
cssはサイトに色を付け。デザインですね。
サイト制作では、htmlで<h1>やら<p>やらを書いてから、cssで指定していきます。
この逆はないですよね。
別の表現で例えると、絵を描く時、鉛筆で人物・建物・風景を先に輪郭をつけていきます。
そのうえで、絵の具で色を塗っていくはずです。
やっぱり、この逆もないですよね。
絵の具を塗ってから、鉛筆で輪郭を書いていくってことは。
というより、輪郭なしでは色をつけるのは相当にむずかしい。
html/cssの話に戻すと、cssからコードを書いていく。
指定することは無理なんですよね。
できない。
なぜできないかっていうと、<div>や<li>といった目印がないのに、指定ができないから。
マージンや背景色もつけれない。
ですよね？
こういう意味で、htmlはやはりサイトの骨格と言えると思うんです。
そして、この骨格がシンプルに組み立てられていれば、cssの作業もしやすくなります。
シンプルというのは、複雑すぎないというレイアウトということ。
入れ子構造が何重にもなっていない。
このタグはcss指定するうえで、省いても問題なさそう。だから外してもオッケー。
みたいな感じです。
つまり、cssでデザインする時にそれだけで事足りるhtmlレイアウトがシンプルと言えます。
※要素を使う時はSEOとかのことも考えないといけないのですが、現時点では気にしなくてで大丈夫です。
headの中身
htmlがサイトの主役という理由はもう1つあります。
それが、<head>の存在。
ここって、むずかしいですよね。
何について書いてあるか分からない人も多いかと思います。
ただ、なんとなく重要そうなのは分かる。
分かるけど詳細は知らないし、知りたくてもむずかしすぎるから近づけない。
こんな感じではないでしょうか。
それかcssで精一杯だから、そもそも<head>の中身まで気にする段階へ行けないのかもしれません。
しかし、やっぱり大切なんですね。
<head>って。
あれやこれやと大事なことがたくさん書いてあります。
そしてね。
仕事しだすと、ここを見る機会も増えてきます。
htmlの勉強は、カンプどおりにコードを書けるようになってから
「htmlがだいじだ」みたいな話をしてますが、今までどおりcssを中心に勉強してオッケーです。
まずはカンプデザインどおりにコードを書けるようになることが先なので。
それができてから、htmlや<head>に注目しましょう。
htmlの要素やレイアウトを見直すと何がいいかというと、勉強してきた内容がつながってくるんです。
点と点がつながるっていいますよね。
まさにあんな感覚です。
「ああ、ここがこうなってるから、ここの指定もうまくいっていたのか」
「ここがこうだから、ここは何度やってもデザインどおりにならなかったのか」
ってのが分かってきますし、それが分かればかなりあなたの知識は定着してるはずです。
そして、結果的に速くコードを書けるようになるんですね。
僕もhtmlのコードを
- 最小限に書く
- 書いたレイアウトを眺める
こんなふうに意識してから、10〜20%はコードを完成させるのが速くなりました。
<head>内にある<meta>などもひととおり調べることで、サイトへの理解度も深まります。
それと同時に、「サイトって複雑〜」って気持ちを抱くことになるんですが…
まあ、サイトは複雑ですがね。
1年も仕事してればたいていのことは覚えられるので心配はありません。
分からなすぎて勉強するのしんどい〜、ってならないようだけ気をつけといてください。
一気に理解しようとするのではなく、1日に1個覚えるつもりでやると精神衛生上もいいですよ。
まとめ
htmlはだいじだよって話をしてきました。
css指定ができるようになったらhtmlも一段深く学んでみてください。
サイト制作がよりおもしろく感じられるはずです。