【模写コーディング】初心者向けのLP練習サイト【解説あり】

最終更新日

模写コーディング初心者の方にぴったりの、練習用LPサイトをご紹介します。

コーディングの解説もついていますので、ぜひ学習にお役立てください。

練習用のLPサイトは下記のポートフォリオサイトです。

▼PC表示

【初級編】ポートフォリオサイト(1カラムの初心者向けLPサイト)PC表示イメージ

▼スマホ表示

【初級編】ポートフォリオサイト(1カラムの初心者向けLPサイト)スマホ表示イメージ

▼デモ

デモサイトはこちらからご確認いただけます。

このLPを初心者の方におすすめする理由

①:基礎的な学習内容がつまっている

実務のサイト制作で頻繁に使う、HTMLとCSSの基礎的な内容がつまった練習用LPサイトになっています。

具体的には、下記の内容が学べます。

  • header、footer、main、navタグを使ったレイアウトの組み立て方
  • sectionの使い方
  • h1、h2タグの使い方
  • メインビジュアルの全幅表示(高さ固定)
  • PCとスマホでの画像切り替え
  • リストタグ(dl、dt、dd、ul、li)の使い方
  • Flexboxを使用した画像の横並び
  • コンタクトフォーム(form、input、textarea)の使い方
  • レスポンシブ対応

②:レイアウト構成がシンプル

初級者の方が学習しやすいように、サイトのレイアウト構成をシンプルに仕上げています。

全体のレイアウト構成は、header、main、footerの3つだけです。

headerの中はh1タグとnavタグ、mainの中はsectionタグとh2タグという基本的な構成になっているので、コーディングの際にレイアウトが組み立てやすいです。

③:コーディング量が適切

初級者の方が模写コーディングに取り組む際に注意していただきたいのが、模写するサイトのコーディングボリュームです。
短すぎても勉強にならず、かといって長すぎると挫折に繋がりやすくなってしまいます。

こちらの練習用LPでは、コーディングのポイントを下記の7つに絞りました。

  • ヘッダー
  • メインビジュアル
  • Aboutセクション
  • Worksセクション
  • Newsセクション
  • Contactセクション
  • フッター

それぞれの箇所に別の学習内容を盛り込み、且つ各セクションのボリュームを大きくしすぎないことで、飽きたり挫折したりしないような適切なコーディング量に調整しました。

④:正しいHTML5とCSS3でコーディングされている

模写コーディングする場合、模写の途中や模写が終わった後でソースコードを確認するかと思いますが、その際にそのサイトのHTMLとCSSが正しい記述でコーディングされているかというのは心配の1つです。

HTMLとCSSが適切かどうかを判断する基準の1つとして、Web技術の標準化を行っている非営利団体W3Cが定める標準規格に準拠しているかどうかという見方があります。

こちらの練習用LPは、W3Cに準拠したコーディングを行っており、W3Cが公開しているHTMLチェックサービス「Markup Validation Service」で、エラーがないことを確認しています。

※2021年1月29日付けで、WHATWGのHTML Review DraftがW3C勧告となりました。

⑤:コーディングの解説がある

模写コーディングの途中で行き詰ってしまった時のために、コーディング解説を用意しました。

解説の内容は下記の2点です。

  • レイアウト構成の解説
  • ソースコードの解説

上記の内容を実際のコーディングの手順に沿って解説しています。
特に、「コーディングの前にレイアウト構成を考える」という点はすごく大切ですので意識して取り組んでみてください。
「レイアウト構成」と「ソースコード」の解説は下記からご覧いただけます。

<レイアウト構成の解説>

<ソースコードの解説>

模写コーディングのやり方

はじめて模写コーディングに取り組むという方で、模写コーディングのやり方がわからないという方はこちらの記事を参考にしてください。

模写コーディングの手順をステップごとに解説しています。

レベル別の練習サイト

初心者向けの練習サイト以外にもレベル別に模写コーディングの練習サイトを用意しています。
自分のスキルにあったものから順にチャレンジしてみてください。

【入門編】LPサイト

基礎学習を終えたばかりの方で、はじめて模写コーディングにチャレンジするという方は、こちらのサイトからチャレンジしてみてください。ちょうどよいウォーミングアップになると思います。

プロフィールサイト/1カラム レスポンシブ

【初級編】1カラムレイアウト

今回ご紹介したポートフォリオサイトと同じく、初級編のストアサイト(書店)です。こちらのサイトでは、主に画像に文字やボタンを重ねる「position」の使い方が学べます。

ストアサイト(書店)/1カラム レスポンシブ

【中級編】2カラムレイアウト

LPの模写を終えた方は、こちらの2カラムのブログサイトの模写がおすすめです。
2カラムのブログタイプはWordPressでもよく使われるレイアウトですので、勉強しておくとのちのち役に立ちます。

ブログサイト/2カラム レスポンシブ

【上級編】グリッドレイアウト

最後の上級編は、主にjQueryの学習に重点をおいた模写サイトです。
ハンバーガ―メニュー、カルーセルスライダー、スムーススクロールといった実務でよく使われるjQueryが学べます。

メディアサイト/グリッドレイアウト レスポンシブ

それでは、さっそく模写コーディングにチャレンジしてみましょう!
初心者向けのLPの模写はこちらからどうぞ。

1カラムLP ポートフォリオサイト