【WEB制作】模写から始めるコーディング勉強【練習方法】
どうも、とまとです。今回はWEB制作で必須のコーディングについて解説したいと思います、WEB系に就職・転職を考えている方への「HTML/CSS」の練習方法の提案です。
この記事を書いている私自身、WEB制作会社で働いていますのである程度の質は保証できると思います。
コーディング勉強は模写がオススメ【理由】
「HTML/CSSを学びたい」「コーディングスキルを上げたい」、前者についてはprogate（プロゲート）を使って無料で学べるからいいとして、問題は後者で基礎を学んだあとの次のステップ、ここをどう学ぶかで戸惑う人が多印象を受けます。よく分からないから職業訓練でお金貰いつつ学校で学ぼうって選択に切り替える人もいますよね。
結論を言うと、HTML/CSSの基礎を学んだら「模写コーディング」でコーディングスキルを上げましょう、模写コーディングでほぼ全て学べます（模写コーディングとは、他サイトを真似てコーディングする事）、有料教材を購入する必要はありません、学校に通う必要もありません、お金要らず無料で完結します。
模写コーディングは手法自体はシンプルで分かりやすく、必要なスキルだけ取り入れる事ができて、教える側と教わる側のコストも超低いというメリットがあります、簡単に言うとコーディングを学ぶ際に一番手っ取り早い方法なわけです、その証拠にこの一記事だけで完結です。
ぶっちゃけると、コーディングの独学に関する質問への回答に疲れたという背景は少なからずある。同じ質問にスマホで長文で返すの大変なので、詳細はこの記事を読んでくださいで終わらせたい、私も時間は有意義に使いたいので頑張って記事書きました😅
模写コーディングのやり方【練習方法】
模写コーディングに必要なものは「HTML/CSSの基礎知識 必須」と「模写の参考サイト 必須」、コーディング時に使用するブラウザは「chorme（クローム）」がベストでしょう、あとPCとかネット環境とかは言わなくても大丈夫ですよね。笑
ここからが本題、模写コーディングの具体的な進め方についてですが、やり方はいたって簡単で文字通り「他サイトを模写してコーディング」を進めていくだけ、本当にこれだけなんですね。とは言っても、この説明だけじゃ昔の自分すら納得しないと思うので補足していきます😅
①：模写するサイトはLPがベスト
まず模写するサイト探しですが、サイト自体は腐るほどあるのでどれを参考にすればいいか悩むと思います、WEB制作会社で働く私（現場）の意見としてはまず「LP（ランディングページ）」と呼ばれる一枚もの（一枚だけのページ）から探すのがオススメ、実務でもLPコーディングは機会が多いですし、コーディング作業自体も複雑化しないので初心者の方でも取り組みやすい。
ではこのLPはどうやって探すのか、これについてはLPを集めたデータサイトを利用するのが最効率です、最近だと「LP ARCHIVE」がオススメですね更新頻度が高く鮮度も良いです、LPが腐るほど転がっているのでその中から好きなものを選んでみてください、どれも自分には無理だわって方はご退場ください、そんな考えじゃ到底無理です流石にフォローしきれません、ごめんなさい。
②：ディレクトリ構成について
参考サイト（LP）を選んだら早速練習、それでは模写どうぞ！ってのは不親切かと思うので、もう少し掘り下げていきます、模写する際のディレクトリ構成なんかも説明してみましょうか、「sample」というフォルダを作った場合は下記のような感じです。
「sample」 ├「css」-- style.css ├「img」-- 使用する画像全て └ index.html ※「」で囲んでいるのはディレクトリ
sampleというプロジェクトの中にindex.html、スタイルシートは「css」でまとめて管理して、使用する画像素材は「img」にまとめて放り込む、これが基本形かと思います。余裕がある方は「css」の中にreset.css（スタイル初期化用のスタイルシートのこと、「reset.css」でググると情報は出てきます）も作成しておくといいですね。
「はぁ？今時スタイルはSassっしょ！」ってな感じのいきりニート君の場合は下記の様な感じで大丈夫です、実際には納品時は不要なディレクトリは全て削除するのですが、今回は練習用という事なので。
「sample」
├「css」 -- style.css
├「img」 -- 使用する画像全て
├「sass」-- style.scss new
└ index.html
※「」で囲んでいるのはディレクトリ
③：各ファイルの書き方・進め方
各ファイルの書き方・進め方について簡単に説明しておきます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sample</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<!-- ここにヘッダー -->
</header>
<main>
<!-- ここにメイン -->
</main>
<footer>
<!-- ここにフッター -->
</footer>
</div>
</body>
</html>index.htmlは上記をコピペするなりしてテンプレートとして使えば大丈夫です、body内の構造に関して補足しておくと、コーディングをする時は「ラッパー」というもので全体を囲んでおくのが基本です、その中にヘッダー・メイン・フッターを入れて分けて作っていくと。
style.css
/* --------------------------------------------
・共通
--------------------------------------------*/
.inner {
}
/* --------------------------------------------
・ヘッダー
--------------------------------------------*/
.header {
}
/* --------------------------------------------
・メイン
--------------------------------------------*/
.main {
}
/* --------------------------------------------
・フッター
--------------------------------------------*/
.footer {
}スタイルに関しては普通通りで、セクションや区切りごとにコメントを入れて整理しておくと実務でも効率良く進められるようになります。ここらへんは好みですが私はコメントをよく入れるタイプです。
画像素材について
模写コーディングする為には画像が必要となります、参考サイトで使用している画像はchromeブラウザの拡張機能「Image Downloader」をインストールして使用すると簡単に画像を保存できます、一部スタイルで背景指定されている画像はダウンロード出来ませんので検証ツール（デベロッパーツール）から画像を探して保存してください（詳細についてはググってどうぞ、この場では説明しきれません）
④：ひたすら模写しましょう
模写するサイトも見つけた、ディレクトリ・ファイルと画像も準備した、それではレッツ模写コーディング！ヘッダー・コンテンツ・フッターの上から順に作ってみましょう、各要素の配置や幅や大きさを調整しつつ完成を目指します、模写サイトと比較して大きく違わなければOKです。
完成したら次は別のサイトを模写しましょう、何個か作るとコツが分かってくると思います、最初のうちは丁寧に模写する事を心がけて、最終的に8時間で1LP作れるようになれば上等かと思います。
慣れてきたらcssの直書きからsassを使ってみたり、ヘッダーが固定されたり追尾されるLPならJavaScriptを使って実装してみるのもありでしょう、後者についてはプログラミング領域ですが簡単なものならコーダーの人がやる場合も多いので軽く触れておく分にはメリットしかないと思います。
ってな感じでLPを量産してコーディングスキルを上げましょう、質問等に関しては時間があれば対応します。本気で回答したにも関わらずリアクションの無い人も多くいるようなので返信の確約はできかねます。以上！
補足：就活・転職を考えている人へ
模写コーディングを極めればWEB制作会社でコーダーとして就職・転職するスキルは身に付いているはずです、最初はコーダーとしてWEB制作会社で働いてその中でデザインスキルを学んでデザイナーになったり、プログラミングスキルを磨いて私と同じフロントエンドエンジニアを目指す事が可能です、マネジメントが得意ならディレクターという選択もあるでしょう。
しかし、模写コーディングを極めたからといって職に就けるかどうかはまた別の話です、その理由はシンプルにコーダーの求人応募者が多いからです、学習コストが低い分WEB業界の入り口でコーダーを選択する人はかなりいます、皆さんが思っている以上にいます、未経験だとコーディングから入るのが無難ですし気持ちは分かります。
その中で、採用されるにはコーディングスキルは最低条件としてプラスαとなる武器が必要、例えば一からサイトのデザインは無理だとしても単体の画像加工はできるなどフォトショップの扱いに長けているとか、他にも私のようにプログラミング出来るだとか、少し特殊なパターンだとワードプレス（CMS）のカスタマイズが出来るなど、コーディング以外でWEB制作で貢献できる武器を持つことが重要になってくると思います。
以上、模写コーディングについて書いてみました。再見
他の人が読んでいる記事
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。