はじめに

模写修行の教材はなるべくリアルに近づけたいと考え、実際にありそうな題材を、実際の制作手順に従って解説しています。

制作手順やコードの書き方に正解はありません。人それぞれな部分も多くあります。しかし、当たり障りのない題材と解説より、一例としてでもリアルなものにしました。

サンプルコードや解説が絶対の正解ではないことを念頭に、良いと思った点は取り入れるなど、ご活用いただければ幸いです。

サンプルコードとデザインは、下記のボタンからダウンロードできます。

制作と解説の手順

1. デザインの確認
2. カラーやコンテナ幅など共通設定の準備
3. コンポーネントの作成
4. headerやfooterなど共通部分の作成
5. 各ページの作成

コンポーネントとは、使い回すパーツのことです。例えば、ボタンやタイトルはコンポーネント化することが多いです。何か特別な技術を使うわけではありません。考え方と運用の話です。

コンポーネントという単語を初めて聞いた方は、おそらくまだCSS設計の勉強をしていないかもしれません。そんな方は、弊社が作成した下記のUdemy教材をご活用ください。

また、Figmaのデータを見ながらコーディングする方法がわからない方は、下記のUdemy教材もご活用ください。

サンプルコードのコーディング規約

サンプルコードや解説は、ここで紹介するコーディング規約に従っています。緩めで、特別な技術は必要ない規約になっているので、初心者の方でも理解していただけると思います。

ディレクトリルール

root/
├ css/
├ img/
├ js/
├ favicon.ico
├ ogp.png
├ webclip.png
└ index.html

画像は少ないので、imgディレクトリ直下に全て入れることにします。この教材ではJavaScriptを使わないので、サンプルコードのJavaScriptファイルには何も記載していません。

モバイルファースト

SPデザインから作るので、メディアクエリの書き方は下記のようになります。

/* 🙆‍♂️ OK */
@media (width >= 768px) {
  …
}

/* 🙅‍♂️ NG */
@media (width <= 768px) {
  …
}

モバイルファーストで書くことは必須ではありませんが、モバイルファーストの方が最終的にコード量が少なくなることが多いです。

パスの記述方法

<!-- 🙆‍♂️ 相対パスはOK -->
<img src="img/hoge.jpg" />

<!-- 🙆‍♂️ ルート相対パスは環境が整っていればOK -->
<img src="/img/hoge.jpg" />

<!-- 🙅‍♂️ 絶対パスはNG -->
<img src="https://moshashugyo.com/img/hoge.jpg" />

<!-- 🙆‍♂️ 外部リンクは絶対パス -->
<a href="https://moshashugyo.com/" target="_blank" rel="noopener noreferrer">
  模写修行
</a>

特別な理由がない限り、相対パスを使用します。

ルート相対パスを使うためには専用の環境を用意したり、エディタのプラグインを使用する必要があります。興味がある方は調べてみてください。

画像

img/
├ bg-top-kv.png
├ ico-twitter.svg
├ pic-product.jpg
├ ...

画像の種類に応じて画像名にプレフィックスをつけます。画像名は、種類-場所-連番-状態.拡張子にします。連番と状態は必要がなければ省略します。また、連番をつける際は1番目には付けず、2番目から付けます。

画像の最適化は、中級者向けの内容になってしまうので、解説では対応していません。まだ学んでいない方は、source属性や高解像度ディスプレイについて調べてみてください。

動作保証環境

OS・ブラウザともに、下記の最新版を動作保証環境とします。つまり、下記のOS・ブラウザで表示が崩れることなく制作します。

勉強中の方で、検証用に複数デバイスを持っている方は少ないと思います。ご自身が持っているデバイスで確認し、正常に表示されることを目指しましょう。

注意点

解説内で下記の項目には深くは触れません。

また、この章以降の解説は簡易的なものになります。解説でポイントを掴みつつ、サンプルコードを見て、AIなども使いながら理解してみてください。

• 細かい点を質問したい
• わからないことが多すぎて迷子
• 効率良く学習したい

そんな方は、弊社で運営しているHello Mentorをご活用ください。未経験から副業・フリーランスデビューした方、転職に成功した方などを輩出しています。

Web制作会社でもある弊社だからこそ、他では得られない実践的なサポートが可能です。