プログラミング学習について、ブログやyoutubeを見ていくと登場する「模写コーディング」ですが、そこでお勧めされているWEBページって難しすぎ！と感じるプログラミング初心者の方も多いのではないでしょういか。
今回はそのような方のために、プログラミング初心者向けのHTML/CSS模写コーディングお勧めサイト５選を紹介します！この５つを作成する過程であなたのプログラミング技術は確実に向上します！
HTML/CSS模写コーディングにお勧めのサイト５選
今からプログラミング初心者にお勧めの模写サイトを紹介していますが、その前に前提条件をいくつかお伝えします。まずは模写できるレベルに到達しているかどうか。プログラミング初心者であれば、Progateやドットインストールでの学習を終えており（HTML/CSSのみでOK)、完全ではないもののある程度理解しているレベルが必要です。
次に、模写コーディングをする際は、写経コーディングと異なり、手本となるサイトのソースは基本的に見ないようにすることです。まずは自力でやれるだけやってみましょう。この”ストレスのかかっている状態”も学習には必要不可欠です。どうしても無理だった場合は、ソースをちょこっと見るようにしてヒントを得ましょう。すべてのコードを見ないと出来ないレベルであれば、もう一度Progateやドットインストールをやったほうがいいでしょう。
>>HTML/CSS初心者のためのタグ一覧【必須タグをご紹介】
PAS-POL
私がProgateを学習し、ドットインストールのHTML/CSS部分を一通りやって、初めてチャレンジした模写コーディングがこちらのPAS-POLというサイトです。
とてもシンプルな作りなので、Progateをある程度理解していれば、十分に対応できると思います。トップ部分の背景画像の下部が丸くなっていますが、そこは無視してもいいでしょう。もし余裕があれば、ググって調べながらチャレンジしてみるのもいいですが、まずはその部分は飛ばして完成させた方がいいですね。チャレンジはその後です。
このサイトでは、background-image/max-width/flex/opacityなどよく使う要素を学習できるので、プログラミング初心者には本当にお勧めです！
>>プログラミング初心者にお勧めの模写サイト① PAS-POL
クナイプ
バスソルトなどでおなじみのクナイプ。余談ですが、私の実家でも良く使っていました。なんだか小学生時代を思い出せるそんなページです。
このクナイプのページも非常に良いレベル設定になっています。PAS-POLが出来た方であれば、恐らくほとんどの方が対応できると思います。背景のオレンジ色が直線ではなく、イラスト調になっているのでその点は再現しなくても良いでしょう。これも一通りコーディングをして、余裕があればググリながらチャレンジしてみると良いですね。
このサイトでは、position:absoluteとposition:relativeを使う部分が出てくるので、何んとなーくわかったつもりになっていた、このpositionタグについて理解を深めることが出来ると思います。WEBページを作成する際、このpositionタグは非常に重要ですから、プログラミング中級者になるためにもしっかりとマスターしておきましょう。
キッズコレッチオ
３つ目でいよいよ本格的な今時のWEBページをプログラミングしていきます。とはいっても、ここまで２つの模写コーディングをしてきたため、かなりスキルは身についているでしょう。そのためそんなに苦を感じることなく出来るはずです。
WEBページ作成をしていくと、共通点が見え始めるころでもあります。
「あれ？結局Flex使えばできるんじゃん」
「またpositionか！」
このような具合です。このような発想が出てきたと言う事は、抜群に成長している証拠ですね！素晴らしいです☆このあたりから世の中のWEBページの見方も変わります。これは作れそう、これはまだ無理。これはこういうタグでやってんのかな？などなど。プログラミング学習がぐんと楽しくなるタイミングですので十分に楽しんでください。
>>プログラミング初心者にお勧めの模写サイト③ キッズコレッチオ
タッチタイピング検定
このサイトになると、一気に現代風になります。皆さんもこのページを見たら「あー、最近こういうのよく見るな」と感じるはずです。
このサイトでは、今まで学習してきたプログラミング言語のほとんどを再確認できるでしょう。繰り返しやることで知識定着しますので、確認ならやる必要ないや！と思わずにやってみましょう。いざ挑戦してみると案外難しいものです。
WEBページのボリュームはそこまで多くはありませんが、このくらいになってくると「クラスの名前をどうしよう」という悩みが発生するかと思います。プログラミングをしているとCSSの名前ってかなり迷います。自由につけてよいと言われるから余計に。そのためこのページを作成する中で、自分なりのクラスの名前付けルールをしていくのもいいですね。私は上から順に「A-wrapper」「B-wrapper」「C-….」というようにつけていました。ランディングページを作る程度であればこのような付け方でも問題なしです。
ちなみに余談ですが、このタッチタイピング検定なるものをせっかくなので挑戦してみました。準１級に合格！１級への道はまだまだ遠そうです（笑）
>>プログラミング初心者にお勧めの模写サイト④ タッチタイピング検定
iSara
ここでようやく登場するのがiSaraです。このサイトは多くのブロガーさんも紹介していますよね。あらゆる機能が登場するので、総まとめにはうってつけです。私もプログラミング学習をしている際、挑戦しましたが結構時間がかかった記憶があります。たぶん10時間くらいでした。上記で紹介してきたサイトはおおよそ６時間程度でしたので、そう考えるとかなりかかりました。
このサイトを模写コーディングしていくと、疑似クラスである::beforeや::afterで壁にぶち当たるかもしれません。ただ、この疑似クラスは今後かなり利用していくことになりますし、「こうやれば、こういう表現が出来るんだ！」となり幅が広がること間違いなしです。そのため、避けては通れません。是非ググリながらチャレンジしてみましょう。
>>プログラミング初心者にお勧めの模写サイト⑤ iSara（イサラ）
>>プログラミングは副業に最適かつ、今からでも可能な理由【３０代の初心者向け】
（おまけ）プログラミング初心者に送るスマホ模写サイト 児童発達支援士
最後におまけです。ここまで紹介してきたページはすべてレスポンシブ対応のページでした。といってもレスポンシブページにもいくつか種類があって、「パソコンで見ることを前提に作られたページ」と「スマホで見ることを前提に作られたページ」があります。上記はどちらかと言えば前者のパソコンありきのページでした。
しかし、私のこの記事サイトもそうですが、最近ではアクセスの半分以上がスマホからのアクセスというページが多いようです。特に主婦や若年層を狙ったサイトはスマホからのアクセスが７割から８割になります。こういった統計を知るには「グーグルアナリティクス」が便利です。この辺りはもう少し学習を勧めてから取り入れてみてください。スマホからのアクセスがメインであれば、そのページはスマホありきでページを作るべきです。そうするだけでかなり見た目が変わってきます！
そんな時非常に練習しやすい模写サイトが「児童発達支援士」という資格のサイトです。このサイトの作りは今まで紹介してきたタグでほとんど完結します。ただスマホベースで作るので、今までとはちょっと違うなーと感じながら練習できるはずです。こういった違う角度からの刺激があると既存の知識もさらに定着しやすいので本当にお勧めです。そして出来上がったサイトをスマホで実際に見てみると、驚くほどきれいなんです。スマホの発色はとても良いので、パソコンで見るよりも数倍綺麗に見えて感動すると思いますよ☆
>>プログラミング初心者にお勧めのスマホ模写サイト 児童発達支援士
模写コーディングをする時に便利な Image Downloader
いかがでしょうか。恐らく他のサイトやブログでは紹介していないようなページばかりだったと思います。しかし、プログラミング初心者のレベルに応じたものになっているので本当にお勧めです。
ただ模写コーディングをする際に、ひとつ困ることがあります。それは「画像がない」と言う事です。代わりの画像を適当にあてるといっても、サイズが違っていてやりにくかったり、イメージがわきにくかったりします。かといって、お手本となるWEBページからひとつずつ画像を保存するのも手間ですよね。
そういった時に便利なツールがあります。Google Chromeの拡張機能で「Image Downloader」というものがあります。こちらを入れると、２クリック程度の手間で、表示されているWEBページ上にある画像をすべて保存してくれます。物凄く便利です。ただし背景画像に設定されている画像はダウンロードできません。
背景画像を取得したいと思った時は、画面キャプチャして必要な部分だけ切り取って活用してもいいと思います。windowsで言えば「Snipping tool」のようなものです。ただ背景画像程度であれば、自分で好きな画像をダウンロードして当てても良いでしょう。そうするとどのような画像を入れるとやりやすいかも学べます。background-imageで背景画像を設定する際、background-size:coverとすることが多いですが、こいつが最初案外やっかいです。そういった部分も模写コーディングをしながら技術を高めていくと良いでしょう。
模写コーディング後は、オリジナルページの作成です！ここまで来たら初心者から中級者にレベルアップですね！おめでとうございます！