top of page

デザインだけじゃ生き残れない!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リファレンス」という冊子が売っていますが、はっきりいってその冊子の3割覚えればこちらのものです。

HTMLやCSSは使用するものも限られてきますし、すべて覚えなければダメだというものでもありません。分からなかったら辞書を逆引きしたり、ネットで使い方を調べればいいだけの話です。

私自身もスペルを確認するためにGoogleで調べたりします。ですので全然怖気付く必要はありません。

HTML・CSSの効果的な勉強法

まず白紙のHTMLファイルを作りましょう。index.htmlとか覚えやすい名前でいいです。それに各フォルダを設定します。構成は以下の通りです。

それぞれ相対パスで紐つけておきましょう。

index.html・CSSフォルダ・imagesフォルダ

今回使うのは以上の3つになります。

■ 今日起こったことの日記を書いてください

なんでもいいです。ペットのこととか仕事のこととかでも大丈夫。500文字くらいをindex.htmlに書いていきます。画像を挿入すると後の勉強も捗ります。

  • ネットのCSSリファレンスか書物のCSSリファレンスを用意します

サクッと終わらせたい場合はネットにCSS入門というコラムはいくらでも落ちていますし、今後もリファレンスを使いたいのであれば書物でも構いません。

なるべくボリュームがある方が勉強になります。

  • 用意したリファレンスを一から自由に適応させていきます

さてここからが重要です。買ってきたリファレンスを最初から真似ていきましょう。先ほど書いた500文字の日記と画像にCSSを片っ端から適応させていくわけです。

何をやっているかというと頭のHTMLとCSSの「情報」を「経験」に昇華させているわけですね。

意味が分からなかったり、うまくいかなかったところは付箋を貼って何度も挑戦しましょう。

  • リファレンスを2巡したらもう知識は身についています

早い人だとリファレンスを1周しただけでHTMLとCSSの仕組みが分かってきます。ど素人でも2巡するとどういう時にどうのような効果を使うべきかも理解できるようになります。

あとは、必要な時に必要な効果を頭の引き出しから出してくるだけです。

分からないことはまずGoogle検索してみよう!