SNSで情報を発信していると、一度は、Webサイトでも作ってみようかなと思う方もいらっしゃるのではないでしょうか。ちゃんと身につければ、『手に職』のスキルですし。
Webサイトを作るための技術、HTML/CSSの学習の仕方について、ご説明します。
準備するもの
HTML/CSSの学習を行う上で、最低限、HTML/CSSを書いて、結果を確認する環境は必要です。
具体的には以下のものを準備しましょう。
- PC
- テキストエディター
- インターネットブラウザ
それぞれ解説します。
PC
TabletやSmartphoneではなく、PCです。ノート型でもデスクトップ型でもかまいませんが、画面サイズは大きい方が明らかにやりやすいですね。16inch以上のモニタが欲しいところです。Windows、Macは、どちらでもかまいませんが、インターネットブラウザでの確認環境のことや、後々HTML/CSS関連の資格を取ろうとした場合を考えると、Windowsマシンをお勧めします。
テキストエディター
Windowsアクセサリーのメモ帳でもHTML/CSSを書くことはできますが、向いているエディターではありませんので、別途、テキストエディターをインストールして使用することをお勧めします。
無料のテキストエディターは多数ありますが、特に、後々HTML/CSS関連の資格を取ろうとされるのでしたら、資格試験で使用可能なテキストエディターとして指定されることが多い「Terapad」や「サクラエディタ」あたりがお勧めです。
尚、学習をする場合、あまりに高機能なエディターを使用することはお勧めしません。入力補助機能などが充実していると、HTML/CSSそのものを覚えることにならないためです。
インターネットブラウザ
HTML/CSSを書いた結果の確認のため、インターネットブラウザが必要です。
フルラインナップで言えば、PC版、Microsoft Edge / Google Chrome / Mozilla Firefox / Mac Safari。Smartphone版、Android Chrome / Mac Safariが必要です。
ブラウザ毎に微妙に表現仕様が異なりますので、一応、今挙げている全ての環境があることが望ましいです。
他にも、CSSには特殊な記法（SASSやSCSSと呼ばれる記法）があって、よりモダンな書き方をしたい場合は、コンパイラーと呼ばれるCSS変換アプリが必要になったりしますが、それは一旦忘れてしまっていてもいいです。もし、学習教材で最初からSASSなどのコンパイラーを要する記法のものであれば、それに従ってコンパイラーを用意してはじめてしまっても良いです。
ただし、CSSそのものを知る上では、コンパイラーを必要としない書き方での学習をお勧めします。
どこから着手するか
いきなり書いてみる？やっぱり参考書？色々と初手はありますが、お勧めは･･･
1.無料のHTML/CSS学習サイト
HTML/CSSは、まずは書いてみることがお勧めではありますが、何を書けばいいかというそもそもの話があります。ですが、書籍は初学者にとって前置きが余計ですし、書籍見ながらHTMLを書くというのも疲れます。
そこで、はじめの一歩としては、「ドットインストール」や「プロゲート」など、無料でHTML/CSSをイラスト付きで分かりやすく学習できる初学者向けのサイトがありますので、そちらを利用しながら、イラストで学びつつ、コードを実際に書いてみることをお勧めします。
2.まずは、HTMLだけで書いてみる。
無料の学習サイトで最低限のHTMLやCSSの書き方を把握したら、次はとにかく書いてみることをお勧めします。
ただし、HTMLとCSSは、構文が全く異なりますので、まずはHTMLだけでページを作ってみて、思い通りの表現にできるまでやってみることをお勧めします。
セクション・ブロック分け、大・中・小見出し、リスト、段落と改行、左右中央寄せ、テーブル（表）といった、HTMLだけでできる、基本的な文字配置と修飾をしっかりと書けるようになることが必要です。
原稿としては、適当に日記でも書けばいいのですが、もし、何か原稿があった方が書きやすいと言うことであれば、例えば昆虫図鑑のような、小学生あたりをターゲットとしたページの原稿が良いでしょう。ついでに、画像の配置もトライしてみても良いかも知れませんね。
ただ、参考とするページはプロが作っていますので、レイアウトの細部まで真似しようとは思わないようにしてください。そこはCSSがバリバリ使いこなせないと再現できませんので。
わからないところは、ネットで調べたりしても全く問題ありませんので、とにかく、HTMLだけで思い通りの1ページが作れるようにし、何も見ないで作れるようになるまで、繰り返し練習しましょう。
3.HTMLだけで作ったページをCSSで装飾してみる。
HTMLだけで作った練習ページを、CSSで装飾していきましょう。クラス付けの方法や、フォント、インデント、行高の調整など、細部にこだわって綺麗なページを作ってみて下さい。もちろん、わからないところは、ネットで調べたりしても全く問題ありません
4.書籍や動画を見たり、講座を利用して、経験を知識として体系化する。
ある程度、HTMLもCSSも書けるようになったら、この時点では、自分が好む事は覚えていても、あまり関心が無い事は知らないという偏りがある状況だと思いますので、偏りを無くし、より正しく、効率的な書き方として整理するために、書籍、動画、講座を利用することをお勧めします。
経験だけでは、他のページのソースを見ても再現できないこと、単に書いているだけではわからない見えないところでの書き方など、よりスマートにHTML/CSSを書く上では、先人がまとめてくれた知識を学習する事は不可欠です。
5.自分が好きなサイトのトップページをコーディングしてみる。
一通りWebページを作れるようになり、自分に合ったリファレンス（教材）が見つかってからは、後は、プロが作ったページの模写や模倣を重ねましょう。
完全にソースを見ながら書くだけでも書き方の参考になりますし、ソースを見ずに見た目から想像して再現する事に挑戦すれば、より高度な学習になります。
実際にコーディングを職業としている方達の経験上、以上の様なプロセスで学習を進めていけば、上達が早いです。
HTML/CSSは、プログラミング言語とは言わないため、プログラミングに比べると何となく簡単に思われることがありますが、全くそんなことはありません。
HTML/CSSでできることは相当に幅広いので、ひたすら書き、書いたら書籍、動画、講座などで体系化するといった交互繰り返しによって、学習を進めていくことが効率が良い方法です。
また、習熟度に応じて、適切なレベルの教材は異なってきますので、自分のレベルに合わせて教材は切り替えていきましょう。
頑張って、HTML/CSSをマスターして下さい！
