プログラミングを始める場合、まず最初にこのHTML・CSSを練習し、格闘する期間が出てきます。
ですが全くコードを打ち込んだ事のない人にとっては、正直わけわからん部分がたくさん出てきます。
中にはHTML・CSSを学習している段階で挫折してしまう人もいるため、この学習期間は甘くみてはいけませんよ。
ちなみに私は
『HTML・ CSSなんて楽勝でしょ！』
と思っていた人間の一人なので、最初は結構メンタルが削られました。
なのでここでは私がど素人だった頃に失敗した勉強法と、最短でたくさんの経験値が得られるHTML・CSSの練習方法を実例を交えながらご紹介していきたいと思います。
以下の通りに学習していけば、短期間である程度のサイトを作る事ができるようになりますので、ぜひ最後まで読んでみてください。
速攻でHTMLをマスターしたいあなたへ！
まず一般的に正しいと言われているHTMLの学習方法を実践すると、思ったよりも遠回りしてしまう事があります。
初心者の場合、まず最初にアマゾンや書店などで
『初めてのHTML・CSS』
などの本を購入して、それを勉強しようとします。
しかしこの行動は、ぶっちゃけ遠回りです！
つまり
で考えておくということです。
学校の勉強のように、最初のページから最後のページを丸暗記するような学習スタイルは、このプログラミングの世界では無意味です（無意味は言い過ぎかもしれませんが笑）。
それよりも、初心者は他にやる事がたくさんあります。
最初はとにかく『経験値』を積む事が重要ですからね。
ぶっちゃけHTMLは難しくない
HTML学習で重要なことは様々ありますが、まず最初にやっていただきたいことは
『HTML・CSSが難しいというセルフイメージをぶっ壊す』
ことです。つまり
『HTML・CSSなんて俺（私）なら余裕でしょ！』
くらいのマインドを持っていただきたいのです。
しかし、最初の何も分からない段階で『HTML・CSS=難しい』と思ってしまうと、頭に入ってくるものも入ってこなくなるのです。
大人が
『自転車に乗れるのは当たり前』
だと思っていますが、子供からしたら
『自転車に乗ること＝難しい』
というセルフイメージですから、同じことを実践するにしても、マインドひとつで最終的な結果は大きく変わってくるのです。
HTML学習を最短で駆け抜ける実践練習方法！
正直私自身がHTML・CSSの学習を最短最速で駆け抜けたとは言えません。色々と失敗を経験してきたことは事実です。
しかし今考えると
『あれを取り入れておけばよかったな』
と思う事がたくさんありますので、それを取り入れれば初心者のあなたもすぐにHTML・CSSのスキルを高める事ができると思います。
重要なポイントとしては
です。
まずはHTMLの動きを軽く覚える
いきなりHTMLを練習すると言っても、最低限理解しておかなければならないものがあります。
例えば
<h1>見出し１</h1>
文章内容
<h2>見出し２</h2>
文章内容
<h3>見出し３</h3>
文章内容
これは『hタグ』と呼ばれるもので、文章の見出しを作る際に使われるタグです。
このサイトでは
見出し２
見出し３
これらの表示が『hタグ』の役割となっています。
これがあることで、サイトの文章にメリハリが出るため、とても読みやすくなります。
<ul>
<li>りんご</li>
<li>ゴリラ</li>
<li>ラッパ</li>
<ul>
こちらは箇条書きリストのタグで、実際にこのコードを打ち込むと
このような表示になります。
基本的なタグに関しては、そこまで種類が多くありませんので、最初の段階で頭に入れておけばすぐに使う事ができるようになります。
タグを打ち込むとどのような表示になるのか？まずはこの動きをチェックしておきましょう。
実際にコードを書いてみる
ある程度タグの動作が理解できれば、次は実際にコードを書いていきましょう。
途中でもお話ししましたが、HTMLやプログラミング言語に関しては、とにかく知識を吐き出さなければ経験値として蓄積されていきません。
RPGゲームでも、敵の詳細や弱点を調べて満足しただけでは、全く経験値が得られませんよね？
HTMLやプログラミングも同じです。とにかく取り入れた知識を吐き出して経験値を蓄積することによって、それがいずれ大きな必殺技を覚えるきっかけとなるのです。
HTMLのコードを書く方法としてはいくつかやり方がありますが、私の場合はプログラミング学習の無料サービスを活用し、そこでコードを学んでアウトプットしていきます。
実例を紹介すると、私は最初に無料学習サービス『ドットインストール』を使って知識を取り入れていました。
例えばこのサイトを使って動画講義を視聴し、実際に使われているコードを頭に入れます。
そしてその後に、学んだ内容で使われていたコードを自分の手で打ち込んでみて、同じような動きをするのかどうかを見ていきます。
私のように、パソコンでMacを使っている場合、最初からパソコンに入っている
『CotEditor』
というソフトを使えば、コードを打ち込んでブラウザで表示する事が可能です。
コードを打ち込んで、実際にブラウザで確認する。
コードを打ち込んで、実際にブラウザで確認する。
これを繰り返していくことによって、動画で学んだことを即座にアウトプットしまくる事ができます。
しかし、これはあくまでも雑魚キャラを倒して経験値を得ているにすぎませんから、この段階をクリアしたら、次のステップに進む必要があります。
自分が『作りて～～！』と思うサイトを見つけて真似する
これは今までの方法よりも格段に多くの経験値を得られる方法になります。
ある程度タグの動作を理解し、無料学習サービスでざっくりとした知識を得たら、実際に世の中に出ているWEBサービスを自分の手で真似して作ってみましょう。
実際にネット上にあるサイトを真似する方法として便利なのが
『開発ツール』
を使うことです。
例えばYahoo!のサイトを真似したいと思った時、右クリックで『検証』を選択すると
こんな感じでHTMLとCSSのコードがズラーっと出てきます。
これは『開発ツール』とも呼ばれており、この機能を使うとHTML・CSSを感覚的に見る事ができるため、他のサイトがどのようなコーディングをしているのかが丸分かりになります。
どんなサイトでも、すべてこれからあなたが勉強しようとしているHTML・CSSを使って組み立てられているため、この開発ツールを使って真似をすることは飛躍的なスキルアップに繋がるのです。
- プロがどんなコードを使っているのか？
- 自分が知らないコードはどれくらいあるのか？
- サイト全体はどのようなコードで組み立てられているのか？
これらを学びながら真似をしていくことで、気づいたときにはレベルの高いサイト構築ができるようになっています。
もちろん最初は分からないことだらけなので、大変です。
ですがありがたいことに、すでに世の中には正解（プロのサイト）をいくらでも真似できる環境が整っていますので、学習意欲さえあればいくらでも学習できるのです。
コーディングはRPGゲームのレベル上げの感覚で実践する
HTML・CSSの知識をたくさん持っている人はいますが、実際にコーディングができる人となると、途端に数が少なくなります。
しかも自分の手で1からサイトを作れるようなスキルを持っている人はほとんどいません。
そんな中、アウトプット主体のレベル上げをする事ができれば、途端にこの業界でも抜きに出る事ができます。
今の自分がどれくらいのレベルで、実際にプロが作っているウェブサイトのレベルがどれくらいなのか？
まずはその違いを現実として受け止め、そこから自分がプロに近づいていくための手段として、圧倒的なアウトプットをしていきましょう。
いくら勉強してもアウトプットしなければレベルは上がらない！
どんなに良い教材を購入して、どんなに優秀な講師から教わったとしても、結局自分がアウトプット（レベル上げ）をしなければ何も変わりません。
しかし社会に出てみると分かる通り、実際にスキルとして使うためには圧倒的なアウトプットが必要不可欠です。
プログラミングに関しても同じです。どれだけ自分の知識を外に吐き出す事ができるか？ここで自分のスキルというのは決まってきます。
事実、プログラミングを学んでも、IT土方として働いている人たちが大半を占めていますからね。
ボス（実務）は多くの経験値が得られる
そして最後になりますが、結局今までご紹介した内容というのは、自分のレベルを上げていくための手段でしかありません。
あなたがどのような目的でHTML・CSSを学ぶのかは私には分かりませんが、ほとんどの人は最終的に
『自分のスキルを使って何かしらの仕事をする』
ことを考えているはずです。
それを考えると、やはり
『ボス（実務）』
は早い段階で倒していくべきでしょう。
このボスを倒す事ができれば、今までとは比べものにならないくらいの経験値を得ることが可能です。
どうしても自分でレベル上げをするのは大変だという場合は、プログラミングスクールの活用を考えてみるのもありです。
いずれにせよ、実務（ボス）を相手にしなければ本当の意味でのスキルは身につきませんので、なるべく早い段階で新しい環境に飛び込むことをおすすめします。
まとめ
HTML・CSSの練習方法に関しては、今回の流れで進めていけば、かなり早い段階でスキルがアップしていることを実感できるはずです。
何度も言うようですが、一番まずいのは
『HTMLやプログラミングを勉強してしまうこと』
です。
プロとして活躍している人たちの中で、アウトプット量が少ない人に私は会った事がありません。
むしろアウトプット量が少ない人たちは、いつまでも安い賃金で働かされているのが現実です。
そうならないためにも、自分が目標とするレベルまで最短で駆け抜けるために、今日から徹底的なアウトプット習慣を取り入れていきましょう。
これができると、面白いくらいスキルが上がっていきますよ♪
