デザインだけじゃ生き残れない！HTMLとCSSの効果的な学習法
WebデザイナーがWebデザインだけやっていていい環境という職場は滅多にありません。コーディングやプログラミングを兼任する職場がほとんどです。
デザインの域を超えてまず実感する項目が「HTMLとCSS」です。聞きなれない言葉と見慣れないコードの表示に戸惑ってしまう方も多いです。
そこで今回は最短ルートでHTMLとCSSを覚えてみよう！というコラムにしてみました。「自分ができることの範囲を広げたい」「職場でHTMLとCSSも学んでと言われた」そんな方に最適です。
HTMLとCSSの基本
HTMLというのは文章と画像を何も装飾していない段落そのものです。それらにclassやidというラべルを使って、CSSファイルで装飾します。何を言っているのか分からないと思いますので、一例を挙げます。
[HTML]
<span class=“red_color”>この文章は赤色です</span>
[CSS]
.red_color{
color:red;
}
以上のように、HTMLは文章や画像を表示するだけのもの、またCSSはそれらを装飾するものと考えていただいて大丈夫かと思います。
CSSの種類は多岐に渡りますので、これは本当に一例です。
■HTML・CSSコーディング初心者が最初にぶち当たる壁
それはCSSの種類の多さです。書店では分厚い「HTML・CSSリファレンス」という冊子が売っていますが、はっきりいってその冊子の３割覚えればこちらのものです。
HTMLやCSSは使用するものも限られてきますし、すべて覚えなければダメだというものでもありません。分からなかったら辞書を逆引きしたり、ネットで使い方を調べればいいだけの話です。
私自身もスペルを確認するためにGoogleで調べたりします。ですので全然怖気付く必要はありません。
HTML・CSSの効果的な勉強法
まず白紙のHTMLファイルを作りましょう。index.htmlとか覚えやすい名前でいいです。それに各フォルダを設定します。構成は以下の通りです。
それぞれ相対パスで紐つけておきましょう。
index.html・CSSフォルダ・imagesフォルダ
今回使うのは以上の３つになります。
■ 今日起こったことの日記を書いてください
なんでもいいです。ペットのこととか仕事のこととかでも大丈夫。500文字くらいをindex.htmlに書いていきます。画像を挿入すると後の勉強も捗ります。
ネットのCSSリファレンスか書物のCSSリファレンスを用意します
サクッと終わらせたい場合はネットにCSS入門というコラムはいくらでも落ちていますし、今後もリファレンスを使いたいのであれば書物でも構いません。
なるべくボリュームがある方が勉強になります。
用意したリファレンスを一から自由に適応させていきます
さてここからが重要です。買ってきたリファレンスを最初から真似ていきましょう。先ほど書いた500文字の日記と画像にCSSを片っ端から適応させていくわけです。
何をやっているかというと頭のHTMLとCSSの「情報」を「経験」に昇華させているわけですね。
意味が分からなかったり、うまくいかなかったところは付箋を貼って何度も挑戦しましょう。
リファレンスを２巡したらもう知識は身についています
早い人だとリファレンスを１周しただけでHTMLとCSSの仕組みが分かってきます。ど素人でも２巡するとどういう時にどうのような効果を使うべきかも理解できるようになります。
あとは、必要な時に必要な効果を頭の引き出しから出してくるだけです。
分からないことはまずGoogle検索してみよう！
あなたがつまずいたポイントというのは、必ず誰かが同じようにつまずいています。しかもその解決策をネットに上げている方はたくさんいます！（素晴らしい！）
ですので「分からなかったら検索する」ということを癖つけておけば、少々問題が起きてもすぐに解決できるでしょう。
■リファレンスには載っていないこともある
例えば、並列しているボックスの高さを一定にする方法など、リファレンスではなかなかお目にかかれない情報もGoogle検索で得ることができます。
あと初心者の最大の敵「絶対配置と相対配置の詳しい説明」など、すごく分かりやすく解説してあるサイトもゴマンと存在します。
先輩に聞くのもいいですが「自己解決させる能力」もアップしておきたいところですね。
初心者を苦しめるidとclassの違い
ある程度HTMLとCSSの勉強を進めていくと「idとclassどちらを使うべきなの？」という疑問が生まれると思います。少しご説明します。
■idは１ページに１回しか使えない・classは何度でも使える
idの特徴として１ページにつき１回しか使えないというものがあります。classはいくら使ってくれても構いません。例を挙げましょう。
[正]
<h2 id=“headline”>テストテスト</h2>
・
・
<h3 id=“sub_headline”>テストテスト</h2>
[誤]
<h2 id=“headline”>テストテスト</h2>
・
・
<h3 id=“headline”>テストテスト</h2>
このようにidの名前は重複することができません。
■だったら全部classにすればいいじゃん！
全てclassにしたらいいんじゃないの？と思われた方もいると思います。しかしこれにはサイトの拡張の問題が関わってきます。
例えば、スマホでよくみる「ページの初めに戻る」ボタンもidを使っていますし。サイトに動きを出すJavaScriptも同じくidを使用することができます。
ですので、サイトに動きを見せたいときやリッチなコンテンツを目指す場合は、idとclassの明確な使い分けが必要になってくるのです。
HTMLとCSSの知識がつくと……
コーディングの知識がつくと「このデザインではコーディングしにくいだろうな」とか「この動きは出せないだろうな」というコーダーへの配慮が生まれます。
また「このデザイン面白いかも！」という気づきも生まれるようになります。
無茶なデザインをすることがなくなりますので、作業も円滑に進むようになりますよ！ぜひHTML・CSSの勉強を今日から始めてみましょう！
最後までお読みいただきありがとうございました。
ラライフでは、専門のキャリアカウンセラーがあなたのライフスタイルに合わせたキャリアをアドバイス。新しいことにチャレンジしたい方をとことん応援しています。
仕事のご紹介だけではありません。今の仕事の悩みや将来のことなど、あなたの心の不安やこれからのことをお話できる有料カウンセリングも行っています。どうぞお気軽にご相談ください。
皆さまからのご連絡を心よりお待ちしています。
