初心者のためのHTMLとCSSの学び方【ロードマップ①】
- コーディング
- 2022.02.03
みなさんこんにちは。Kenichiです。
今日はプログラミングを学ぶにあたってのロードマップを自分の経験談をもとにまとめたので３話連結でお伝えしていこうと思います。本日は1話目です。
こんなお悩みはありませんか？
HTMLとCSSの知識が必要なのはわかった！
ただどうやって始めたらいいだろう？
本日は、これから学び始める方に私自身の体験をもとに、コーディングを学ぶ際に扱うべきオススメのサービス、参考書や模写の仕方についてお伝えいたします。
目次
まずはprogateでHTML/CSSに触れてみる
前回の記事でも紹介をしたprogateです。なんといっても、とりあえず無料で開発環境もいらず使えるので、これから試してみてください。3周ぐらい回してやってみると何となく理解できてくると思います。なかでも「HTML & CSS Flexbox編」は非常に重要なので、必ず学んでおいてください。
初心者向けの参考書を使って進めよう
progateが3周ほど終えることができたら、次は参考書でHTML/CSSを体系的に理解していきましょう。VSコードなどのエディターをインストールして、開発環境を整えましょう。
よくわかるHTML5＆CSS3 ウェブサイト構築の基本と実践
私はまずこの参考書から入りました。全くの初心者でもHTML/CSSの概要から学ぶことができます。不動産会社のHP作成を想定して、１からサイト設計のフローを解説しています。また、レスポンシブにも対応した知識を身に着けることができます。最後には総合問題で総復習を行えます。個人的にはこの参考書で、HPの作り方を理解できたぐらいにレベルが上がったと思います。
私は利用したことがありませんが、よくお勧めされているところを目にする参考書はこちらになります。私の知り合いが、職業訓練の学校に通い始めましたが、そちらでもこの参考書を扱っているということです。
こちらの参考書のポイントとしては、手を進めるだけで、WEB制作の基本を一通り学んでいくことができるとのことです。
HTML/CSSの力を向上さるために既存サイトを模写
既存サイトを模写してみることで、実力がめちゃくちゃ向上します。できれば3社ぐらいのサイトを模写してみましょう。模写する箇所は、indexページ（TOPページ）のみでもOKです。できれば、1社分はリンク等の確認をするために2ページほど、作ったほうが良いと思います。
【1社目】Dental Clinic
私の場合、このサイトを初めて模写しました。あんまりよくない出来栄えでしたが、とてつもなく達成感はありました。
ヘッダー、フッター、メイン、サイドバーなどをカテゴリー分けできて表現することができたら問会えずはよいのではないでしょうか。
【2社目】iSARA
このホームページを模写することができたら、かなりレベルがあがります。レスポンシブにはできなくてもいいので、とりあえず、最後までデザインしきってください。
【3社目】少し複雑な構造のHP
3社目は少し、表現がどうなっているのかわかりづらいHPを選びましょう。そのHPでレスポンシブの形が作れるようになれば、もうあなたはほとんどのHPを作り上げることができると思います。
ぜひ、portfolioサイトなどを作ってみましょう。
まとめ
HTML/CSSを学び始めると確実にどこかで躓くと思います。ただ諦めすに調べたり、人に聞いたりして根気強くやりきることが肝心です。頑張る皆さんを応援してます。私もがんばります（笑）