こんにちは！最近はフォームローラーにハマっているchieitoです。毎日のパソコン作業で体がガチガチですが、これを使うと全身がほぐれてスッキリします！
では早速本題に入りますが、皆さんはHTML＆CSSの実践練習をどのように行っていますか？実際に自分のWebサイトを作ってみたり、問題集を購入して解いてみたりと様々な方法がありますよね。
しかし、
そんな悩みを抱えている人も多いのではないでしょうか。
今回は実践力がグンとアップする、練習問題ができるサイトや書籍、方法などをご紹介します。ぜひ参考にしてみて下さい。たくさんの問題にチャレンジして、現場でも困らないくらいの実力をつけましょう！
目次
練習問題①「模写コーディング」
HTML＆CSSの練習問題としておすすめな方法その１が、「模写コーディング」です。お手本にするサイトを見つけたら、そのサイトをそっくりそのまま模写していきましょう。
模写コーディングをする際には、HTML＆CSSのコードを記述するテキストエディタを用意しましょう。プログラミング専用の無料テキストエディタをダウンロードするか、パソコンの「メモ帳（Windows）」もしくは「テキストエディタ（Mac）」を使用していきます。
模写コーディングを練習問題にする際のポイントとしては、
- 一通り作り終わるまでは、検証ツールでコードを確認しない
- 画像や文字色などは大体でOK
- レスポンシブデザインに対応させる
- 回数を重ねるごとに、動きのあるデザインなどレベルアップしていく
このような事に注意しながら進めていきましょう。最近はタブレットやスマートフォンでのWeb閲覧も増えているので、レスポンシブデザインは欠かせません。模写コーディングをするなら、必ずこのレスポンシブデザインのやり方もしっかりと学んでおきましょう。
模写のお手本にするサイトのおすすめ！
『フリーホームページ.net』
ここのサイトには著作権フリーの無料テンプレートがたくさんあるので、模写コーディングのお手本に最適です。様々なデザインのサイトを模写して、幅広いジャンルに対応できるようになりましょう。
模写コーディングをする場合は、お手本サイトをフルページでキャプチャしておくと便利です。横に表示させながら模写できると、作業がスムーズに進みます。
練習問題②「Webサイトの問題集」
HTML＆CSSの練習問題は、プログラミング情報サイトや個人ブログ、SNSなどにもたくさん掲載されています。無料で豊富な問題にチャレンジできるので、このようなサイトを利用する方法もおすすめです。
TECH Projin
出典：TECH Projin
こちらはCSSの練習問題がたくさん掲載されている情報サイトです。問題数も多いので、初心者の基礎練習として問題を解いていけば、しっかりと技術が身につくのではないでしょうか！
練習問題だけでなく、Webデザインやプログラミング、セキュリティなどITに関する基礎知識も学ぶことができます。フリーランスで活躍したいプログラマーや、Webデザイナーとして就職を考えている人など、幅広い人におすすめです。
Qiita
出典：Qiita
こちらは、エンジニアリングに関する情報を共有しているコミュニティサイトです。ここでは、コミュニティに参加しているユーザーが投稿したたくさんの練習問題を閲覧することができます。
CSSの練習問題だけでなく、JavaScriptなど様々な言語に関する問題も投稿されています。また問題に対して詳しい解説などもあるので、より理解や関心力が深まりおすすめです。コミュニティ内で「CSS練習問題」などと検索するとたくさん問題が出てくるので、ぜひチャレンジしてみて下さい！
ウェブカツ ブログ
出典：ウェブカツブログ
プログラミングやビジネスに関する情報を掲載しているウェブカツブログでは、「鬼練」というHTML＆CSSの練習問題にチャレンジすることができます。
こちらでは、実務で役立ちそうなレイアウト方法などが問題として掲載されています。写真やコードなどで詳しく解説されていておすすめです。１から順番に問題を解いていけば、確実に技術力は向上します。
他にも、プログラミングやビジネスなどITに関する幅広い情報が掲載されています。
練習問題③「参考書」
HTML＆CSSの練習には、ドリル形式の参考書などもおすすめです。ここでは、おすすめの参考書を紹介します。
HTML/CSS ラーニングドリル
出典：amazon.co.jp
このドリルは、コーディングの中で間違いやすい文法や勘違いしやすい箇所などを問題にしています。それぞれの問題に対する詳しい解説、応用的な使い方などが細かく掲載されている点もこのドリルの特徴です。
もちろん問題の解答についての解説などはありますが、このようなドリルはHTMLやCSSの基礎を身につけている状態で使用しましょう。
例題30+演習問題70でしっかり学ぶ HTML5+CSS標準テキスト
出典：amazon.co.jp
こちらのテキストは、HTMLの主要タグの使い方やCSSの記述方法などを問題形式で学ぶことができます。Webページの作成だけでなく、サイト公開のやり方まで学べておすすめです。
また演習問題には実践で使いそうな内容がたくさんあり、基礎を身につけた後の実践練習には最適なのではないでしょうか！
練習問題④「オンラインスクール」
最近は、オンラインのプログラミングスクールがとても増えてきましたね。ここでは、練習問題を通してHTML＆CSSを学べるおすすめスクールをご紹介します。
Progate
出典：Progate
こちらのサイトでは、HTML＆CSSだけではなくJavaScriptやPHPなど様々な言語を学ぶことができます。基礎であれば無料で、応用や実践を身につけたい場合は月額980円（税抜）で受講可能です。
解説に沿って実際にコードを記述していく学習方法なので、より早く技術を習得できるのではないでしょうか。ゲームのような感覚で続けられるプログラミング学習サービスです。
CODEPREP
出典：CODEPREP
こちらは、実際にコードを記述しながら学べるプログラミング学習サイトです。HTMLやCSSのコードを穴埋め問題のように埋めていったり自由にコードを記述して編集してみたりと、実践を通して技術を身につけられます。
またディスカッションボードというサービスがあり、他のユーザーに質問をしたり話し合ったりすることも可能です。同じジャンルを学ぶ仲間がいると、とても心強いですよね！
まとめ
いかがでしたでしょうか！プログラミング技術を向上させるには、とにかく実践を積むことが何よりも大切です。基礎学習や練習問題だけなら、お金をかけずにできる方法がたくさんあります。また模写コーディングであれば、無限に練習できますね！
これからWebデザイナーやプログラマーを目指している人もたくさんいると思います。実践経験がないと、いざ働くとなっても不安になってしまいますよね。Web業界未経験者であっても、技術と知識が豊富にあれば必ず活躍できること間違いありません。
練習問題をたくさん解いて、求められる人材を目指しましょう！
