こんにちは！休日は、ゆったりとミステリー小説を読むのがブームなchieitoです。
皆さんは、HTMLやCSSといったプログラミング学習をどのように進めていますか？何かを制作するには、やはり実践を積む事が１番大事ですよね。プログラミングの技術を習得するには、参考書を読み込んだりコードを覚えることももちろん大切ですが、実際に手を動かしてコンピュータを操作することでより一層理解が深まります。
しかし、その実践練習の方法がわからない！という人も多いのではないでしょうか。ここでは、HTML＆CSSの実践練習方法を詳しくご紹介します。ぜひ参考にしてみてください！
目次
HTML＆CSSの練習は実践に限る！
参考書や動画など、様々な方法を使ってHTML&CSSを独学で勉強したという人もたくさんいると思います。
しかし、
と不安を感じている人も多いのではないでしょうか。
どれだけコードや文法を覚えても、実際にそれを書き込んで思い通りのものを仕上げられなくては意味がありません。実際の仕事では、クライアントの希望通りのものを制作することが大前提です。
初心者WebデザイナーもベテランWebデザイナーも、クライアントにとっては同じWebデザイナー。初心者だからこれはできない、このデザインは作ったことがないから無理なんてことは通用しません。
そんなことにならないためにも、ものを作るWebデザイナーはとにかく実践を積んで技術を磨くことです。何十時間、何百時間とひたすら参考書を読んで暗記するよりも、たくさん手を動かして実践経験を増やしていきましょう！
HTML＆CSSの練習には模写コーディング！
幅広いWebサイトを制作できるようなデザイナーになるには、HTML＆CSSの実践練習が重要です。ここでは、そんな実践練習としておすすめの「模写コーディング」についてご説明します。
模写コーディングとは？
模写コーディングとは、その名の通り実際に存在しているWebサイトを模写して制作する練習方法です。既存のサイトを真似してゼロから作り上げるので、一気に実力アップが期待できます。
- 医療系のホームページ
- キュレーションサイト（ジャンル別に分けたり、同じジャンルのページのリンクをつけるなど）
- ショッピングサイト（ショッピングカートや決済、お問い合わせページが必要。セキュリティ対策が必須）
- カーソルを文字やロゴなどに合わせると、デザインや色が変わるなど動きの多いWebサイト
このようにたくさんのWebサイトがありますよね。このようなサイトをいざ制作しようと思っても、どこから始めれば良いのか…何をどう作っていけば良いのかわからないということも珍しくはありません。
幅広いWebデザインを制作できるデザイナーになるには、様々なWebサイトに触れて、それを練習として模写してみることが高い技術を手に入れるポイントです。
模写コーディングのメリット
参考書の手順に沿って、実際にコードを記入したりWebサイトのデザインを作ってみたという人も多いのではないでしょうか。もちろんこのように手を動かすことでHTML＆CSSの技術は身についていきます。
しかし、これだけではまだまだ不十分なのです。世の中にはたくさんのWebサイトがあり、そのWebサイトのデザインやクオリティなどは日々進化しています。
模写コーディングでHTML＆CSSの練習をすることで、
- ゼロから制作することで技術力が向上する
- 幅広いサイトに触れることでデザインのバリエーションが増える
- 複雑なコーディングにも対応できるようになる
- CSSがどのように反映されるのか、実践練習をすることでよくわかるようになる
- 自分自身の実力が今どれくらいなのかがわかる
このように模写コーディングにはたくさんのメリットがあります。
また無料のテキストエディタを使用すればお金をかけずに模写コーディングができるので、低コストで練習したい人にもピッタリです！
注意すべきポイントは？
模写コーディングは、既存のWebサイトを真似して制作する練習方法です。これはあくまでHTML＆CSSの練習として行うので、実際に模写したWebサイトを公開しないようにしましょう。
他にも、
- デベロッパーツール（サイトのコーディングを表示する機能）を使わない
- イラストや写真などはコピペやフリー素材の代用でOK
- フォントの種類や大きさ、カラーはきっちり同じにしなくてOK
このようなことに気をつけながら模写コーディングをしてみて下さい！
デベロッパーツールを見ながら制作すると、答えをそのまま写しているのと同じなので練習になりません。最後の答え合わせまではデベロッパーツールを使用せず、試行錯誤しながら自力で作り上げましょう。
ここで行う模写コーディングの目的は、HTML＆CSSの実践練習をして技術を向上させるため。もちろんお手本のWebサイトと全く同じものを制作できれば良いですが、フォントやカラーなど細かな部分はだいたいでOKです。ここに時間をかけないように注意しましょう。
HTML＆CSSの練習に！模写コーディングのやり方
ではここで、HTML＆CSSの実践練習に最適な模写コーディングの具体的な方法をご説明します！
模写するサイトを決める
ますは、実際に模写するWebサイトを見つけましょう！初めて模写コーディングをする場合は、
- 動きが多いサイトは避ける
- LP（ランディングページ）のみにする
- 自分の好みのデザインのサイトを選ぶ
このようなポイントに注目してみて下さい！いきなり動きの多いサイトはコーディングが大変で挫折してしまう可能性が高いので、回数を重ねるごとに少しずつレベルアップをしていきましょう。
また縦長のLPサイトであればボリュームもあり、練習には最適です。ヘッダー、メイン、フッターのサイズやバランス、メニューの表示の仕方など様々な要素をLPページのみで練習でき、さらにデザインの勉強にもなっておすすめ！
途中で挫折してしまうことがないように、自分の好みのデザインを見つけてモチベーションを維持しながら練習を進めていきましょう。
テキストエディタを準備する
模写するサイトが決まったら、HTML＆CSSを記述していくテキストエディタの準備をします。Macには「テキストエディタ」Windowsには「メモ帳」という機能が標準装備されていますが、より幅広い機能を使ったりスムーズな模写コーディングをするには、プログラミング専用のテキストエディタをインストールすることをおすすめします。
ここでは、無料で使えるおすすめテキストエディタの「厳選２サイト」をご紹介します。
Atom
Atomは、カスタマイズ性が高く初心者でも使いやすいテキストエディタです。サイトはすべて英語ですが、日本語化パッケージをインストールできるので安心！
HTMLをその場でプレビューできるだけでなく、CSSやJavaScriptなどの動作も確認することが可能です。
Brackets
Bracketsは、Adobeが開発した無料のテキストエディタです。HTML＆CSSの編集は、それぞれのファイルを行ったり来たりせず、ポップオーバーで表示しながら記述や確認ができます。効率的にコーディングができるのでおすすめです。
模写コーディングをする
専用のテキストエディタをインストールしたら、早速HTML＆CSSの練習を始めましょう！
コーディングをするときは、最初に模写するサイトの「フルページスクリーンショット」を撮っておき、横に表示させながら進めるとやりやすくておすすめです。
途中でコーディング方法がわからなくなっても、すぐにデベロッパーツールを使用して答えを確認せず、自分で参考書などで調べながら試行錯誤してみて下さい。その方がより早く実力が身に付きますよ！
また最近はスマホやタブレットに対応しているサイトがほとんどですよね！CSSを使ってレスポンシブデザインの作成もしてみましょう。
検証ツールで確認
HTML＆CSSのコーディングが最後まで出来たら、いよいよ答え合わせです。参考にしたサイトはGoogle Chromeの検証ツールを利用して、HTML＆CSSのコードを表示させます。
- コードの書き方の違いがあるかどうか
- 全体的なレイアウトのバランスが崩れていない
- イラストや写真が切れたり表示されないということがないか
- レスポンシブデザインにしたことで、デザインの乱れがないか
このようなことに注目して、答え合わせをしてみて下さい。間違っていた箇所や新たな発見などは見逃さず、必ず次に生かしましょう！
まとめ
いかがでしたでしょうか！模写コーディングを何度も繰り返していけば、実践力が身についてプログラミング技術に自信がつきそうですよね。
HTML&CSSをマスターするには、とにかく実践練習が必要不可欠。何日も何ヶ月もひたすら参考書を読むのではなく、たくさん手を動かしてみましょう！やればやるだけ実力が身に付くだけでなく、たくさんのWebサイトやアプリに触れることでデザイン力も向上します。
また、コードやプログラミングのやり方をまだ理解できていないという状態でも、積極的に模写コーディングで練習してみて下さい。実際に練習することで覚えられることもたくさんあるのでおすすめです。
