僕が「HTML×CSSの書き方」を習得した4つのステップ
ウェブサイトを作りたいと思ったとき、避けては通れないのがコーディングです。
HTMLやCSSを使って、実際にウェブサイトとしての機能を実装する必要があります。
例えばリンクを貼ったり、Googleに認識させやすくしたり。
スマートフォンサイトに合わせて形を変えたり。
それもこれも、コーディング無しには実現できません。
なので、ウェブサイトを作ろうとしたらHTML×CSSを学ぶ必要があります。
今ではGoogleで検索することで、あらゆる情報が見つかるようになりました。
独学でもだいぶ学びやすくなりましたし、技術的な情報は膨大にあります。
ただ、まだほとんど出回っていない情報があるのです。
HTMLやCSSの「効率の良い学び方」ですね。
HTML×CSSの書き方を学ぶ時、まず何から始めれば良いのでしょうか？
Progateやドットインストールから始める？
もちろんそれも、習得には素晴らしい手段です。
ただ、Progateやドットインストールをやった後はどうすべきでしょう？
こなした後は、一体どのように先を学べば良いのでしょうか。
オンラインで学ぶとしても、効率の良い習得方法は無いのでしょうか？
仕事に繋げるためには、一体、どんな学び方が必要なのでしょうか？
何が最も、効率的にHTML×CSSの書き方を習得していけるのか。
学び方や勉強の仕方については、まだまだ研究不足です。
そこで、今回はどのようにHTML×CSSの書き方を習得すべきか、まとめてみました。
これからHTML×CSSの書き方を学ぶ方も、ぜひ目を通してみてください。
1. HTMLとCSSの意味を理解し、タグを書いて、何が出来るのかを知る。
まず、自分が書こうとしている言語の意味を、理解しないことには始まりません。
HTMLとは一体何をする言語なのでしょうか。
そしてCSSの役割とは、一体何なのでしょうか。
ウェブサイトを作るにあたって、理解しておくべき基本を抑えましょう。
HTMLとCSSの基礎を抑えるための解説記事はたくさんあります。
そして、この段階で活用できるのが、Progateやドットインストールです。
ざっくり全体を通してやってみて、HTML×CSSの書き方について把握しましょう。
他の言語においてもそうですが、一通りやってみることは大切です。
Progate ( プロゲート )
https://prog-8.com/
ドットインストール
https://dotinstall.com/
習得サイトやブログ記事で一通り、書き方を把握してみてください。
全体像を理解することで、初めて先に進むことができます。
ブログ記事やオンライン講座は、一通り知ることに非常に役に立ちます。
しかし、それだけでは、まだHTML×CSSで書いて、仕事ができるとは言い切れません。
知っていることが重要なのではなく、スポーツのように「実際に出来る」ことが重要なのです。
何度も繰り返し、実践に近い形でHTML×CSSを書き、自信を手に入れなければなりません。
どんなウェブサイトでもHTML×CSSで書ける！という自信です。
そのためには、実際に自分でウェブサイトを作ってみる必要があります。
2. レイアウトがシンプルで平凡なサイトを3つ選び、PC版だけコピーしてみる。
僕が最初に取り組んだことは、ひたすらコピーでした。
他のウェブサイトでシンプルなものを選んでコピーすること。
というより、当時はそれが仕事になってたんですよね。
以前は、テーブルレイアウトと呼ばれる、イレギュラーなコーディング方法がありました。
テーブルレイアウトとは、テーブルタグという表を作るタグで作られたものです。
当時はブラウザによって、HTML×CSSの解釈にも、かなりの差があったんですね。
で、面倒なのでレイアウトが崩れにくいテーブルで全部作ってしまおうと。
しかし、HTML×CSSの書き方として、それは駄目ですし、Googleにも嫌われます。
そこで、テーブルレイアウトを正規のHTML×CSSで書き換える仕事があったんです。
当然見た目は変えてはいけませんので、そのまま中だけ書き換えるイメージです。
今はもう、そんなサイトほとんど残ってませんし、絶滅しましたよねきっと。
ということで、他人のサイトをコピーする機会がたくさんありました。
しかし、これがめちゃくちゃ効果のあるHTML×CSSの書き方エクササイズでして。
僕の場合、いきなり飛び級してやろうと思い、難しいレイアウトからスタートしました。
書き換えるのに2週間かかったんですが、なんとかやりきることができました。
すると、その時には、だいたいHTML×CSSを書けるようになっていたのです。
自分自身でタグの意味を調べ、どう使えばいいか考え、工夫していきました。
結果、初めて2週間後には戦力になることが出来たのです。
今は、当時よりもサイトが複雑になっていますから、それだけでは戦力にはなれません。
最低限、レスポンシブレイアウトくらいは作れる必要があるでしょう。
しかし、いきなりレスポンシブでHTML×CSSの書き方から始める必要もありません。
段階的に、分けて考えるべきです。
まず、PC版のHTML×CSSの書き方を習得しましょう。
ウェブはスマートフォン主体となりましたが、それを承知の上でです。
まずはPC版をオススメします。
PC版を先におすすめすることには、色々な理由があります。
スマートフォン版より、画面で確認しやすいのも理由の1つです。
実機でテストする必要もありません。
特に、HTML×CSSの書き方をトレーニングしやすそうなシンプルなサイトをオススメします。
いきなり難しいレイアウトのサイトを選ぶと、JavaScriptが必要だったりします。
よくある「一般的な会社のサイト」のようなレイアウトを選んで、見た目だけコピーしてみましょう。
焦る必要はありません。
HTML×CSSの書き方も、少しずつ慣れていけば挫折するほどのものではありません。
シンプルなサイトのコーディングから、まずは慣らしていきましょう。
ちなみに、WEBサイトを選ぶ時は、専用のサイトがあります。
世の中には、ウェブデザインリンク集なんてものがあるのですね。
僕たちは、ウェブデザインをする時に、よく参考にしています。
muuuuu.org
https://muuuuu.org/
LPアーカイブ
https://rdlp.jp/lp-archive
僕自身は、よくこのあたりを使っています。
今回は、上記の中から、ごく一般的な企業サイトを選んでみましょう。
例えば、僕のブログもシンプルで再現しやすいレイアウトですね。
特殊な動きとか、柔軟なデザインではなく、昔ながらの企業サイトを選ぶべきです。
クールすぎるものを選ぶと、HTML×CSSの書き方が難しくなってしまいますからね。
なお、ミスした箇所と改善方法を逐一、文章やキャプチャーでまとめましょう。
HTML×CSSの書き方を習得する上で注意すべきは、凡ミスをなくすこと。
そして、同じミスを2回やらかさないことです。
以前、犯してしまったミスに再度、足を取られることは避けるべきです。
HTML×CSSの書き方で言えば、レイアウトの崩れに関してですね。
僕自身、実際は何度も同じミスに遭遇することがありました。
その度に、なんであの時の解決法をメモしておかなかったんだ、と後悔しました。
一度ミスをしたことは、常に「原因」と「解決策」をメモしておくべきです。
まとめるツールはNotionをおすすめします。
もしNotionに慣れなければエクセルなどで一覧で管理しても良いでしょう。
ご自身のまとめやすい方法で、ミスを管理してみてください。
3. 慣れてきたら、作ったサイトをすべて、レスポンシブ化してみる。
シンプルなサイトとは言え、3サイトほどコーディングしたら、慣れてきます。
1サイト、5〜10ページ程度はありますので、20〜30ページほど制作したのではないでしょうか。
HTML×CSSの書き方は、とにかく練習量です。
何度も繰り返し書いていくことで、HTML×CSSの書き方も馴染んできます。
HTML×CSSの書き方に慣れてきたら、今度はレスポンシブ化に挑戦しましょう。
レスポンシブ化とは、スマートフォンやタブレットなどのデバイスに最適化することです。
画面の横幅に応じて、レイアウトが変化する仕組みですね。
まだHTML×CSSの書き方に慣れていない最初であれば、混乱したでしょう。
しかし3サイトを制作し、HTML×CSSの書き方に慣れた人なら、乗り越えられます！
これまで作ったサイトを、改めてレスポンシブ化してみましょう。
現代のサイトはほぼレスポンシブ化されています。
選んだ参考サイトも、レスポンシブ化されているはずです。
作っているうちに、スマホ用に最適化する必要のある箇所も見えてきます。
こう書けばよかった、とHTML×CSSの書き方を見直すことになるでしょう。
少し昔話をすると、iPhoneが発売されるまでは、PC版だけでも戦力になりました。
そこからスマートフォンが普及したことにより、モバイルが絶対になりました。
後にタブレットも発売され、どんどんHTML×CSSの書き方を変える必要が出てきたのです。
HTML×CSSの書き方は、時代に応じて変化していくものです。
ウェブをブラウズする新しい端末が出たら、それに合わせる必要があります。
今後も新しい端末は発売されるでしょうし、HTML×CSSの書き方も変わっていくでしょう。
だからこそ、時代が進めば進むほど、求められるハードルは上がります。
とはいえ、一度すべてマスターしてしまえば、後の進化は簡単な応用でなんとかできます。
HTML×CSSの書き方を習得するなら、早めに覚えてしまう方が良いでしょう。
4. レイアウトが複雑なサイトを、さらに3サイトほどコピーする。
ここまで来たら、あと1歩です。
自分好みのサイトを3つ選んで、ひらすらコピーしてみましょう。
最初は、シンプルなサイトを選びましたが、ここでは複雑なレイアウトを選んでみましょう。
動きなどは再現する必要はありません。
動きに関してはJavaScriptを使う場合が大半ですし、今一緒にやるべきではありません。
HTML×CSSの書き方を覚えるのがメインなので、外観だけコピーしてみてください。
なお、どうやってレイアウトが作られているのか分からない場合があるはずです。
一発で作り方を把握できるのは、相当経験を積んでからになるでしょう。
そんな時、ブラウザには大抵「サイトの構造を覗けるツール」がついています。
Google Chromeであれば「デベロッパーツール」と呼ばれていますね。
各ブラウザごとに名称が異なるので、調べてみてください。
デベロッパーツールを使えばHTML×CSSの書き方を覗けます。
参考に出来ることは、どんどん参考にしていきましょう。
中を調べてみれば、どんなサイトも大抵は作り方を把握できます。
HTML×CSSの書き方が分からない時は、デベロッパーツールを使ってみましょう。
こうして調べながらコーディングしていくことで、どんどん引き出しが増えていきます。
別のサイトを作ったときに「あ、このレイアウトは前やったな」と思い起こせるでしょう。
さらに慣れてくると、考えなくても即座にレイアウトとソースコードが頭に浮かびます。
とにかく数をこなすことが重要ですので、どんどん挑戦しましょう。
ここまで出来るようになれば、すでに実践レベルで挑戦できるはずです。
HTML×CSSの書き方も、大抵、習得出来ているのではないでしょうか。
むしろ、分からない人にHTML×CSSの書き方を教える側に回れるかもしれませんね。
以降は、何か案件を受けたり、これまで作ったサイトを持って就職活動をしてみてください。
実際に見せられるものがあれば、仕事を見つけるのはそう難しくはありません。
まとめ
後は、実際に仕事を見つけて、案件をこなしていくだけです。
何にせよ、実際の仕事を受けてコーディングしてみましょう。
一番HTML×CSSの書き方の勉強にもなります。
実績としても積み上げられますし、なにより、報酬も発生します。
なお、コーディングを再現する時は「そっくりそのまま」を意識してください。
実際に仕事をする際は、デザイナーからデザインデータをもらいます。
そのデザインデータをもとに、コーディングを進めていくわけです。
HTML×CSSの書き方としても、そのまま再現するとなると、なかなか難しいものです。
まず、そのままそっくりデザインを再現することが重要です。
少しでも印象が異なったりすれば、実践では即座に修正を求められますからね。
デザインや見た目と全く同じ形を再現することを意識しましょう。
出来なければ「再現率が低いから」と切られることは多々あります。
方法を学んだから、仕事に出来るというわけではありません。
実際にサイトを作ってみることが重要なのです。
最近、Progateやドットインストールなど、技術をインプットできるサービスは増えました。
しかし、それらに取り組む大半の方が「レベル上げ」をするだけで実際に作っていません。
それでは、実際に仕事にたどり着くことは難しいでしょう。
Progateやドットインストールを使うのは、最小限で良いのです。
基礎を習得するか、実際に作っていて分からない箇所があった時に使います。
僕もドットインストールをよく使います。
使いますが、使うのは、作っていて技術的に分からない箇所があった時です。
案件や自分のサービスを作りながら、どうしても技術が謎な時に使います。
学ぶためにサービスを使うのではなく、作る時に使うのです。
HTML×CSSの書き方だけではなく、他の言語やスキルでも共通していることです。
HTML×CSSの書き方の基礎が分かったら、即座に実践してみましょう。
そして、どうしても分からない該当箇所を改めてサービスで学ぶのです。
学んでレベルを上げ、学習を続けること自体が目的になってはいけません。
何をアウトプットするかが、重要なのです。
HTML×CSSの書き方自体は、本気で取り組めば1ヶ月もあれば習得できるでしょう。
全力で取り組めばさえ1ヶ月後には仕事を受けられるようになっているのです。
ぜひ、集中して取り組んでみてください。
