-
HTML/CSS
- css
- html
- progate
Webページの作成に役立つHTML/CSS練習問題を解説
HTML/CSSを学習したけれど、知識が定着していないと感じる人も多いと思います。学習サイトや本を読んでいる内は理解したつもりでも、実際にWebページを作ろうと思ったらコードが欠けなくなることもあります。
HTML/CSSでWebページを作るための近道は練習問題を解くことです。コードを書きながら問題を解くことで、HTML/CSSのコードの書き方を理解することができます。本記事ではおすすめのHTML/CSS練習問題を解説します。
HTML/CSSを学んだけれど次に何をしていいか分からない人やHTML/CSSのコードを書くことに自信が持てない人はぜひ参考にして下さい。
HTML/CSSの理解には練習問題を解く
Webページを1人で作れるくらいにHTML/CSSの練習問題を解くことが近道です。もちろん、学習サイトで何回も学習すれば、コードを書けるようになります。しかし、繰り返し教科書や学習サイトを解いていても中々理解が深まりません。
理解を深めるためには自分で考えてコードを書くことが大切です。デザインやWebサイトのイメージを見ながら、実際にコードを書くことで、どんなときにどんなコードを書けば上手く書けるかが分かります。
学校の勉強を思い出してください。先生の授業を聞いただけでは理解できなかったことも、問題集を解くことで理解ができます。また、受験の際には参考書を読んだ段階では成績が思うように上がらなくても、過去問を解くことで一気に成績が上がった人も多いと思います。
つまり、ある程度のインプットを行ったら、アウトプットをすることで飛躍的に技術力が上がります。HTML/CSSのスキルを早く上げたい人はインプット3割、アウトプット7割を心掛けることがおすすめです。
HTML/CSSでおすすめの練習問題
Progate 道場コース
HTML/CSSの学習をProgateで行った人は必ずやることをおすすめしたいのが、Progateの道場コースです。Progateの学習スライドで作ったサイトを仕様書を見ながら作成していきます。一度インプットしたことをすぐにアウトプットできるのが利点です。
Progateは初心者の学習サイトとして人気です。学習スライドでは解説とコードの練習がセットになっており、インプットとアウトプットを繰り返して理解を深めていきます。初学者でもわかりやすいため、人気のコンテンツです。
道場コースは学習コースの総集編となっており、仕様書（設計書）からコードを書いていきます。コードに正解はなく、正しく表示されれば合格です。しかし、1pxでもずれていたら不合格なので、難易度が少し高めです。しかし、道場コースをやり遂げたかでHTML/CSSの技術レベルがかなり変わってきます。
一度、Progateで道場コースを終えた人は自分のPC上でコーディングをすることをおすすめします。自分のエディタを使って、再現できるかを確認してください。一回書いていてもブラウザ上で書くのと、ローカル環境で書くのでは違うことがわかります。
違いが分かって、ローカル環境でも書けるようになればあなたの技術はさらにレベルが上がっていること間違いなしです。
Codestep
Codestepはレベル別にHTML/CSSのコーディングの練習ができるサイトです。Codestepには入門編、初級編、中級編、上級編でスキルレベルに応じて、実際のWebページに近いコーディングができるのが特徴です。
また、練習問題も数多くあるため、Progateを終えた人はCodestepのデモサイトを作っていくことがおすすめです。HTML/CSSの技術習得は数を重ねることで、コーディング速度や精度が上がります。
Codestepでは模写コーディングとデザインカンプからのサイト作成の両方ができます。模写クーディングは完成されたサイトから構成を考えて同じサイトを作ることです。一方、デザインカンプからのサイト作成はXDファイルで作られたデザインを元にコーディングをしていきます。
模写コーディングはスキルを定着用、デザインカンプからのサイト作成はWeb制作案件などの実践的な練習になります。
サイトリンク：Codestep
PENGIN BLOG
PENGIN BLOGでは無料でデザインカンプを配布しているコーディングの学習サイトです。初級編、中級編、上級編に分かれています。レベル別に習得できるスキルが書いてあり、自分のスキルに合わせて練習問題を解くことができます。
解説記事もあるため、Progateをある程度が理解できた人がデザインカンプからのコーディングを始めるのにおすすめです。学習手順も書いてあり、始めようと思ったけどどう始めたらいいか分からない人でも挑戦できます。
PENGIN BLOGで配布されているデザインカンプは無料で配布されている上、ポートフォリオにも掲載OKです。改編、デザイン変更も許可されています。転職やクラウドソーシングで案件に応募しようとしている人はProgateが終わったら、まずPENGIN BLOGを始めてもいいと思います。
サイトリンク：PENGIN BLOG
おまけ：WP-LOAD
本サイトで公開しているコーディング教材です。Web制作について無料で学べる教材を探している方はもちろんのこと、HTML、CSS、JavaScript(jQuery)を一通り勉強し終わった方がデザインカンプからのコーディングを行いたいという場合にも使用できます。
前者の場合は頭から順を追って進めていただければサイトが完成するようになってます。
後者の場合はデザインカンプをダウンロードしてコーディングを行なってみて下さい。実装方法が分からない場合は記事を読んでもらえれば解決できるようになってます。
HTML/CSSの練習問題ができたら
サイト模写
自分のよく見るサイトや作れそうだと思ったサイトを模写することをおすすめします。紹介した練習問題をある程度できるようになったら、サイトを模写するくらいのスキルがあります。そのため、サイト模写もある程度できると思います。
サイト模写は実際に使われているサイトのコードを考えます。練習問題より実践的な内容です。つまり、自分でサイトを開設する際の参考になることが多くなります。練習問題の段階で「コードを書けるようになる」は卒業できます。そのため、サイトの模写では「実際に使われるコードを実践する」ことが大切です。
クラウドソーシングで案件に応募
練習問題である程度のWebサイトは作れるので、実際の案件に応募するのもおすすめです。案件を見つけるにはクラウドワークスやランサーズなどのクラウドソーシングを利用するといいと思います。
最初は中々案件を取れないと思いますが、諦めずに挑戦して下さい。また、応募をする際は練習で作ったサイトをポートフォリオとしてクライアントがすぐに見れる状態にしておくといいと思います。
実績がない人がスキルをアピールするにはポートフォリオが必須です。案件に応募する前位に作ることをおすすめします。
まとめ
HTML/CSSは学習サイトで勉強するだけでは中々、実践的なコーディングをするのは難しいです。サイトを作るための練習問題をすることで、コードの理解を深めたり、HTML/CSSのコード設計ができるようになります。
初めは解答や解説を見ながらでもいいので、完成させることを目標にしましょう。ただし、コードの模写はせずに、サイトと解答を見ながら、コードを理解するように心掛けてください。終わったころにはかなりレベルが上がっていると思います。
