模写修行メディア

無料コーディング練習教材作りました!

webデザイン、コーディング、プログラミングの上達への近道は、とにかく自分でたくさん手を動かすことです。

コーディングでは、模写をしている方も多くいます。ただ、模写の場合、正解や解説がないので、模写するサイトによってはあまり良い練習にならないケースもあります。

そこで、簡単な無料コーディング練習教材を作ってみました。

この記事では、コード付きで解説していますが、なるべく1度ご自身で作ってみてください。サンプルコードや解説が唯一の正解ではありません。良いところは採用するなど、ご活用ください。

注意!
※ 次の章の『前提条件』を読んでからご自身で挑戦してみると良いです。

デザインデータ(XD)もダウンロード資料に入っているので、是非XDを見ながらコーディングに挑戦してみてください。

Adobe XDからコーディングする方法を丁寧に解説!ピクセルパーフェクトする方法も紹介!

XDからのコーディング方法がわからない方は、まず上の記事を読むと良いです。簡単な例でXDの使い方も紹介しています。

※ PC版のみの実装なのでPCでご確認ください。

注意
この教材は、模写修行の無料版・簡易版的な位置付けです。

🎉 お知らせ

コーディングの実践的な"練習"ができるサービスを作りました。

  • コーダー・フロントエンドエンジニアを目指している
  • 基礎学習を終えて実践的な"練習"がしたい
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

こんな方におすすめです。

前提条件

今回作った教材の前提条件と注意事項です。

実務ではもっとデザインは複雑で、ニュースやブログがあれば WordPress化も必要です。セキュリティ対策など、他にもやることはたくさんあります。あくまで、勉強を初めたばかりの方向けのコーディングの練習教材だと思っていただければ幸いです。

対象者

HTMLのタグやCSSのプロパティなど、基礎的なことは解説しないので、初心者を半歩くらい脱した方向けのコーディング練習教材として作りました。

デザイン

今回はコーディングの練習を目的としているので、配色や画像など簡易的にしています。

サイト構成

  • ホーム
  • 特徴
  • サービス
  • ニュース
  • ブログ
  • 会社概要
  • 採用情報
  • お問い合わせ

上のページがある想定で、トップページかつPC版のみの練習教材になっています。

コーディング規約

💡 ディレクトリルール

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

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

SCSSは使わない想定で解説しますが、ダウンロード資料はSCSSも含んでいます。

  • scssフォルダ内
  • cssフォルダ内のstyle.css.map

SCSSを使わない方は、ダウンロード資料内の上のファイルは、無視するか削除してしまって構いません。


💡 CSS 設計に関して

駆け出しの方にもわかりやすいような、独自のCSS設計でコードは書いています。

【初心者向け】模写修行流CSS設計を紹介!

上の記事で紹介しているCSS設計に従って書いています。(記事を読まなくても、解説は理解できるようになっています。)

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説

CSS設計に関して、まだ勉強したことがない方は、こちらの記事も参考にしてみてください。

PC版のみなので、メディアクエリの記載はありませんが、普段コーディングをする際は小さいサイズから書いた方が、コード量が少なくなって良いです。つまりスマホ → タブレット →PC の順です。


💡 パスに関して

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

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

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

<!-- 🙆‍♂️ 外部リンク等は絶対パス -->
<a href="https://twitter.com/moshamusha2010" target="_blank" rel="noopener noreferrer">Twitter</a>

特別な理由がない限り、相対パスを使用します。もちろん外部のリンクは絶対パスになります。

WordPressでは絶対パスが使われていたり、案件の規模によってはルート相対パスの方が適している場合もあります。


💡 SEO対策に関して

SEO対策はやるべきことがたくさんありますが、今回はコーディング練習なのでやっていないことや、ローカルでの練習なので出来ないこともあります。

ただし、HTMLのタグの使い方に関してはSEO的にマイナスになる書き方はしていません。


💡 画像の最適化に関して

画像の最適化は複雑で難易度が高いので、今回は行っていません。詳しく解説している記事を載せておきます。

HTMLのsrcset属性やpictureタグを使ったレスポンシブイメージを解説CSSの背景画像を最適化!Retina ディスプレイ(高解像度)対応する方法

💡 アクセシビリティ対応

アクセシビリティとは情報や機能の利用しやすさのことです。

例えば、スクリーンリーダー(音声読み上げソフト)を使ってwebサイトの情報を得ている方にも優しいサイトになっているか?など気にする必要があります。

この教材では、最低限の対応のみします。

コピペで使える!HTML・CSS でフォームをおしゃれにカスタマイズする方法

アクセシビリティを意識したフォームのカスタマイズに関する記事も書いているので、興味がある方は是非ご覧ください。


💡 コメント

<!-- top-kv -->
<div class="top-kv">
    …
</div>
<!-- end top-kv -->

セクションや大きなブロック単位で上のようにコメントを入れます。また、それ以外でもコメントを入れた方がわかりやすい箇所にはコメントを入れるようにします。あまり厳密なルール化はせずに、初めて見た人に親切なコメントを入れることを心がけます。

/*!
foundation > base
------------------------------
*/
body {
    …
}

カテゴリごとに分類してコメントを入れます。また、それ以外でもコメントを入れた方がわかりやすい箇所にはコメントを入れるようにします。

カテゴリはCSSのコードを役割ごとに分類していると思っていただければ良いです。詳しくは後述します。


💡 動作保証環境

OSブラウザ
WindowsChrome / Firefox / Edge
MacChrome / Firefox / Safari

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

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

実際はサービスの性質によって、これらに加えて、OS・ブラウザの旧バージョンの対応もすることになります。もちろんSP対応もします。

今回作るサイトのコーディング解説

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

コンポーネントとはページをまたいで使い回すパーツです。例えば、ボタンやタイトルはコンポーネント化することが多いです。何か特別な技術を使うわけではありません、考え方と運用の話しです。『コンポーネント』という単語を初めて聞いた方でも、解説は理解していただけると思います。

サンプルコードは、上の順番に従って制作しました。解説も同じようにこの手順で進めます。

XDで余白やサイズを計りながらコーディングしますが、XDの行間(行送り)とwebのline-heightの仕様の違いにより、デザインを忠実に再現するためには細かい計算が必要になります。今回は目視で調整しているので、XDとサンプルコードでは余白やサイズが違う場合があります。

line-heightで出来るスペースをSCSSのmixinを使って効率よく消す方法

より忠実に再現したい場合、SCSS を使った方法ですが、上の記事で紹介している方法を参考にしてみてください。

サイト内共通の設定を準備(HTML)

これ以降の解説は、XDのデザインとサンプルコードを見ながら進めるとより理解しやすくなっています。

まず最初にサイト内共通の設定や準備を行います。新しくサイトを作る際は必ず必要なコードもあるので、新規サイト制作用の雛形を用意しておくと効率的です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>コーディングの練習</title>
        <meta name="description" content="コーディングの練習です。" />
        <meta name="format-detection" content="telephone=no" />

        <!-- favicon/webclipicon -->
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="webclip.png" />

        <!-- ogp -->
        <meta property="og:site_name" content="コーディングの練習" />
        <meta property="og:url" content="URL(絶対パス)" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="コーディングの練習" />
        <meta property="og:description" content="コーディングの練習です。" />
        <meta property="og:image" content="URL(絶対パス)" />
        <meta property="og:locale" content="ja_JP" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:description" content="コーディングの練習です。" />
        <meta name="twitter:image:src" content="URL(絶対パス)" />

        <!-- google fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet" />

        <!-- css -->
        <link rel="stylesheet" href="css/style.css" />

        <!-- js -->
        <script src="js/main.js" defer></script>
    </head>
    <body>
        ...
    </body>
</html>

この時点でbody内は書かずに、雛形だけにしておきます。今回はトップページしか作りませんが、他のページも同じように雛形を作っておきます。

【2021年版】HTMLのheadタグの書き方を全て解説!

headタグ内に書くべきことに関しては上の記事で詳しく解説しています。

webフォントの基礎と使い方を解説!Google Fontsの導入方法も紹介!

今回のサイトではGoogle Fontsを使用しています。Google Fontsの使い方は上の記事で解説しています。

サイト内共通の設定を準備(CSS)

/*!
global > color
------------------------------
*/
:root {
  --color-bg-dark: #333333;
  --color-bg-light: #fafafa;
  --color-bg-white: #ffffff;
  --color-bg-accent: #f76767;
  --color-font-white: #ffffff;
  --color-font-base: #333333;
}

/*!
global > content-width
------------------------------
*/
:root {
  --width-content: 1080px;
}

/*!
global > font
------------------------------
*/
:root {
  --font-family-base: "Noto Sans JP", serif;
}

/*!
foundation > reset
------------------------------
*/
html {
  color: #000;
  background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select,
button {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  *font-size: 100%;
  border-radius: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: inherit;
}

input,
textarea,
select {
  font-size: 16px;
}

textarea {
  resize: vertical;
  display: block;
}

button {
  padding: 0;
  cursor: pointer;
}

legend {
  color: #000;
}

main {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg {
  display: block;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/*!
foundation > base
------------------------------
*/
body {
  line-height: 1.75;
  font-size: 16px;
  color: var(--color-font-base);
  font-family: var(--font-family-base);
}

/*!
utility > utility
------------------------------
*/
.u-ptb {
  padding: 80px 0;
}

.u-mt {
  margin-top: 40px;
}

/*!
component > button
------------------------------
*/

/*💡ここに『ボタンコンポーネントのコード』を書く*/

/*!
component > title
------------------------------
*/

/*💡ここに『タイトルコンポーネントのコード』を書く*/

/*!
component > cta
------------------------------
*/

/*💡ここに『CTAコンポーネントのコード』を書く*/

/*!
layout > container
------------------------------
*/
.l-container {
  width: 90%;
  margin: 0 auto;
}

.l-container {
  max-width: var(--width-content);
}

/*!
layout > header
------------------------------
*/

/*💡ここに『ヘッターのコード』を書く*/

/*!
layout > footer
------------------------------
*/

/*💡ここに『フッターのコード』を書く*/

/*!
page > top
------------------------------
*/
/*💡ここに『トップページのコード』を書く*/

HTMLと同じようにCSSも共通の設定などをこの時点で用意しておきます。

コメントで区切っている意図は、どんな役割のコードかわかるようにするためです。コードをカテゴリ分けしていると言い換えることも出来ます。

カテゴリ名役割
globalサイト内共通の設定
foundationリセット CSS とサイト内共通で効かせたいスタイル
utilityちょっとした使いわますスタイル
componentサイト内で使い回すパーツのスタイル
layoutレイアウトを作るスタイル
page各ページ固有のスタイル

各カテゴリは、簡単にまとめると、上の表のようになります。これ以降、各カテゴリの役割や記載したコードに関して紹介します。


💡 globalカテゴリのコード

global カテゴリ 👉 サイト内共通の設定が入る

コメントにある、global > colorは親子関係を表しています。globalカテゴリが親で、colorカテゴリが子です。他のカテゴリも同じような運用方法になっています。

/*!
global > color
------------------------------
*/
:root {
  --color-bg-dark: #333333;
  --color-bg-light: #fafafa;
  --color-bg-white: #ffffff;
  --color-bg-accent: #f76767;
  --color-font-white: #ffffff;
  --color-font-base: #333333;
}

/*!
global > content-width
------------------------------
*/
:root {
  --width-content: 1080px;
}

/*!
global > font
------------------------------
*/
:root {
  --font-family-base: "Noto Sans JP", serif;
}
  • カラー
  • コンテナの幅
  • フォント

上の値をカスタムプロパティで定義しています。デザインによっては、余白 / z-index / フォントサイズもカスタムプロパティで定義しても良いと思います。

XDのデザインを確認していただくと、フォントは源ノ角ゴシック JPを使っています。源ノ角ゴシック JPはGoogle fontsのNoto Sans JPと同じです。

Adobeでの呼び名Google fontsでの呼び名
源ノ角ゴシックNoto Sans
源ノ明朝Noto Serif

これらは呼び名が違うだけで、AdobeとGoogleで共同開発された同じフォントです。webフォントの中では、よく使うフォントなので覚えておくと良いです。


💡 foundationカテゴリのコード

foundationカテゴリ 👉 リセット CSS とサイト内共通で効かせたいスタイルが入る

/*!
foundation > reset
------------------------------
*/
html {
  color: #000;
  background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input,
textarea,
select,
button {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  *font-size: 100%;
  border-radius: 0;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: inherit;
}

input,
textarea,
select {
  font-size: 16px;
}

textarea {
  resize: vertical;
  display: block;
}

button {
  padding: 0;
  cursor: pointer;
}

legend {
  color: #000;
}

main {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg {
  display: block;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/*!
foundation > base
------------------------------
*/
body {
  line-height: 1.75;
  font-size: 16px;
  color: var(--color-font-base);
  font-family: var(--font-family-base);
}
カテゴリ名役割
foundation > resetリセット CSS
foundation > baseプロジェクト固有のサイト内共通で効かせたいスタイル

リセットCSSはどのプロジェクトでもコードを変更することなく使用します。今回は独自のリセットCSSを使っていますが、一般に配布されている有名なリセットCSSを使っても良いです。

ブラウザのほぼ全てのスタイルをリセットするようなハード系のリセットCSSであれば、おおよそ同じ見た目になるはずです。デザインにもよりますが、基本的にweb制作ではハード系のリセットCSSの方が都合が良い場合が多いように感じます。


💡 utilityカテゴリのコード

utilityカテゴリ 👉 余白や隠しテキストなどのちょっとした使いわますスタイルが入る

/*!
utility > utility
------------------------------
*/
.u-ptb {
  padding: 80px 0;
}

.u-mt {
  margin-top: 40px;
}

余白用のクラスを用意しています。今回は上下に80pxのpaddingを入れる箇所と上に40pxのmarginを入れる箇所が複数あるので、utilityクラスとして用意しました。

※ クラス名にはプレフィックスとして u-を付けます。


💡 componentカテゴリのコード

componentカテゴリ 👉 サイト内で使い回すパーツのスタイルが入る

/*!
component > button
------------------------------
*/

/*💡ここに『ボタンコンポーネントのコード』を書く*/

/*!
component > title
------------------------------
*/

/*💡ここに『タイトルコンポーネントのコード』を書く*/

/*!
component > cta
------------------------------
*/

/*💡ここに『CTAコンポーネントのコード』を書く*/

今回はトップページしか用意していないので、他のページでも使い回し"そうな"パーツをコンポーネント化しています。実際は全ページのデザインを確認して、どこをコンポーネント化すべきか考えるのが良いです。

※ クラス名にはプレフィックスとして c-を付けます。


💡 layoutカテゴリのコード

layoutカテゴリ 👉 レイアウトを作るスタイルが入る

/*!
layout > container
------------------------------
*/
.l-container {
  width: 90%;
  margin: 0 auto;
}

.l-container {
  max-width: var(--width-content);
}

/*!
layout > header
------------------------------
*/

/*💡ここに『ヘッターのコード』を書く*/

/*!
layout > footer
------------------------------
*/

/*💡ここに『フッターのコード』を書く*/

何を入れれば良いか少しわかりにくいかもしれませんが、例えばヘッター / フッター / サイドメニュー / コンテナ幅などがこのカテゴリに入りま。

※ クラス名にはプレフィックスとして -を付けます。ただし、header / footerは明らかにlayoutカテゴリなのでプレフィックスを付けていません。


💡 pageカテゴリのコード

pageカテゴリ 👉 各ページ固有のスタイルが入る

/*!
page > top
------------------------------
*/
/*💡ここに『トップページのコード』を書く*/

今回はトップページだけになります。

コンポーネントの作成

  • ボタン
  • タイトル
  • CTA

上の3つをコンポーネント化しました。本来ニュースやブログの投稿もコンポーネント化できそうですが、トップページ以外のデザインがないので、今回はしないでおきます。

コンポーネントには幅や高さ、マージン、ポジションなどの情報は持たせません。ある箇所ではコンポーネントの上に余白が必要でも、他の箇所でその余白が邪魔になる可能性があるからです。

コンポーネントはどこででも使えることを意識して作ると良いです。


💡 ボタンを作る

<!-- 使用例 -->
<a href="" class="c-button c-button--accent">ボタン</a>
.c-button {
  display: inline-block;
  padding: 16px 40px;
  line-height: 1;
  background-color: var(--color-bg-dark);
  color: var(--color-font-white);
  font-weight: bold;
}
.c-button--accent {
  background-color: var(--color-bg-accent);
}

セオリー通り幅や高さを持たせず、どこででも使用出来るようにしています。

※ ハイフン2つがついているクラスはバリエーションクラスです。必ずベースのクラスと一緒に使います。


💡 タイトルを作る

<!-- 使用例 -->
<h2 class="c-title-level2 c-title-level2--center">タイトル</h2>
/*! level2 */
.c-title-level2 {
  font-size: 24px;
  font-weight: bold;
}
.c-title-level2--center {
  text-align: center;
}

見出し2をコンポーネント化しました。他のページでも同じ見た目で使い回すのであれば、見出し1や見出し3などもコンポーネント化します。


💡 CTA を作る

CTAとはCall To Actionの略で、ユーザーに何かアクションを起こしてもらうための要素です。

<!-- cta-->
<div class="c-cta u-ptb">
    <div class="l-container">
        <p class="c-cta-text">お問い合わせ</p>
        <p class="c-cta-text02">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
        <div class="c-cta-button">
            <a href="" class="c-button c-button--accent">お仕事のご依頼・ご相談</a>
        </div>
    </div>
</div>
<!-- end cta -->
.c-cta {
  background-color: var(--color-bg-dark);
  text-align: center;
}

.c-cta-text {
  color: var(--color-font-white);
  font-size: 24px;
  font-weight: bold;
}

.c-cta-text02 {
  color: var(--color-font-white);
  font-size: 18px;
  margin: 24px auto 0;
  max-width: 680px;
}

.c-cta-button {
  margin-top: 32px;
}

CTAコンポーネントの中で、ボタンコンポーネントも使っています。このようにコンポーネントの中に他のコンポーネントが入ることは問題ありません。

共通部分の作成

💡 header を作る

<!-- header-->
<header class="header">
    <h1 class="header-logo">
        <a href="index.html">
            <img width="53" height="15" src="img/logo.svg" alt="logo" decoding="async" loading="lazy" />
        </a>
    </h1>

    <nav class="header-nav">
        <ul class="header-list">
            <li class="header-item"><a href="">ホーム</a></li>
            <li class="header-item"><a href="">特徴</a></li>
            <li class="header-item"><a href="">サービス</a></li>
            <li class="header-item"><a href="">ニュース</a></li>
            <li class="header-item"><a href="">ブログ</a></li>
            <li class="header-item"><a href="">会社概要</a></li>
            <li class="header-item"><a href="">採用情報</a></li>
            <li class="header-item header-item--contact"><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<!-- end header-->
.header {
  height: 70px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  width: 53px;
}

.header-logo img{
    display: block;
}

.header-list {
  display: flex;
}

.header-item:not(:first-child) {
  margin-left: 24px;
}
.header-item--contact a {
  background-color: var(--color-bg-accent);
  color: var(--color-font-white);
  padding: 8px 24px;
  line-height: 1;
  font-weight: bold;
}

ロゴはsvgにしました、ロゴに限らず画像には必ずwidthとheightをつけましょう。widthとheightがないとレイアウトシフトという現象を引き起こしてしまいます。

CLS(Cumulative Layout Shift)とは?対策・改善方法も紹介!

レイアウトシフトに関しては上の記事で詳しく紹介しています。

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

また、headerのレイアウトを作るためにFlexboxを使いました。Flexboxに関しても詳しく解説してる記事があるので、理解できているか怪しい方は上の記事をご覧ください。


💡 footerを作る

<!-- footer -->
<footer class="footer">
    <nav class="footer-nav">
        <ul class="footer-list">
            <li class="footer-item"><a href="">ホーム</a></li>
            <li class="footer-item"><a href="">特徴</a></li>
            <li class="footer-item"><a href="">サービス</a></li>
            <li class="footer-item"><a href="">ニュース</a></li>
            <li class="footer-item"><a href="">ブログ</a></li>
            <li class="footer-item"><a href="">会社概要</a></li>
            <li class="footer-item"><a href="">採用情報</a></li>
            <li class="footer-item"><a href="">お問い合わせ</a></li>
        </ul>
    </nav>

    <small class="footer-copyright">&copy; 2021 コーディングの練習</small>
</footer>
<!-- end footer -->
.footer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 24px;
}

.footer-list {
  display: flex;
}

.footer-item {
  font-size: 14px;
}
.footer-item:not(:last-child)::after {
  content: "/";
  display: inline-block;
  padding: 0 8px;
}

.footer-copyright {
  font-size: 14px;
}

footerもFlexboxを使って作っています。

キービジュアルを作る

<!-- top-kv -->
<div class="top-kv">
    <div class="top-kv-inner">
        <div class="l-container">
            <p class="top-kv-main-copy">KVのコピーはとても重要です!</p>
            <p class="top-kv-sub-copy">親譲りの無鉄砲で小供の時から損ばかりしている。</p>

            <div class="top-kv-button">
                <a href="" class="c-button c-button--accent">お仕事のご依頼・ご相談</a>
            </div>
        </div>
    </div>
</div>
<!-- end top-kv -->
/*!
page > top > top-kv
------------------------------
*/
.top-kv {
  height: 75vh;
  background-image: url(../img/bg-top-kv@2x.png);
  background-position: center;
  background-size: cover;
  display: grid;
  place-items: center;
  text-align: center;
}

.top-kv-inner {
  width: 100%;
}

.top-kv-main-copy {
  font-size: 45px;
  font-weight: bold;
}

.top-kv-sub-copy {
  font-size: 18px;
  font-weight: bold;
  margin-top: 8px;
}

.top-kv-button {
  margin-top: 24px;
}

トップページの中でも更に階層を切って、page > top > top-kvのようなコメントを入れています。

背景画像は今回はただの灰色の画像ですが、本来はなんらかの画像が入る想定です。

特徴セクションを作る

<!-- top-feature -->
<div class="top-feature u-ptb">
    <div class="l-container">
        <p class="top-feature-copy">特徴のキャッチコピー</p>

        <p class="top-feature-text">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)</p>

        <div class="top-feature-button">
            <a href="" class="c-button">特徴をみる</a>
        </div>
    </div>
</div>
<!-- end top-feature -->
/*!
page > top > top-feature
------------------------------
*/
.top-feature {
  background-color: var(--color-bg-light);
}

.top-feature-copy {
  font-size: 24px;
  font-weight: bold;
}

.top-feature-text {
  margin-top: 16px;
  line-height: 2;
  max-width: 850px;
}

.top-feature-button {
  margin-top: 24px;
}

特に難しい点はありませんね。XDを見ながら余白等調整しています。

サービスセクションを作る

<!-- top-service -->
<section class="top-service u-ptb">
    <div class="l-container">
        <h2 class="c-title-level2 c-title-level2--center">サービス</h2>

        <div class="top-service-list u-mt">
            <section class="top-service-item">
                <div class="top-service-img">
                    <img src="img/pic-top-service@2x.png" alt="..." width="1040" height="540" />
                </div>
                <h3 class="top-service-item-title">サービス1のタイトル</h3>
                <p class="top-service-description">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
            </section>

            <!-- 上と同じ繰り返しなので省略 -->
        </div>

        <div class="top-service-button u-mt">
            <a href="" class="c-button">サービスをみる</a>
        </div>
    </div>
</section>
<!-- end service -->
/*!
page > top > top-service
------------------------------
*/
.top-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.top-service-item-title {
  font-weight: bold;
  font-size: 18px;
  margin-top: 16px;
}

.top-service-description {
  margin-top: 8px;
}

.top-service-button {
  text-align: center;
}

CSS Gridを使って作りました。レイアウトを作る際にはとても便利なので、Flexboxと合わせて使えるようになっておくと良いです。

【CSS Grid 入門】図解も交えて使い方を詳しく解説!

CSS Gridについては上の記事で詳しく解説しています。

ニュースセクションを作る

<!-- top-news -->
<section class="top-news u-ptb">
    <div class="l-container">
        <div class="top-news-inner">
            <h2 class="c-title-level2">ニュース</h2>

            <div class="top-news-list u-mt">
                <article class="top-news-item">
                    <time datetime="”2021-12-26”" class="top-news-date">2021-12-26</time>
                    <h3 class="top-news-title">HPをリニューアルしました!</h3>
                </article>

                <!-- 上と同じ繰り返しなので省略 -->
            </div>

            <a href="" class="c-button">一覧を見る</a>
        </div>
    </div>
</section>
<!-- end news -->
/*!
page > top > top-news
------------------------------
*/
.top-news {
  background-color: var(--color-bg-light);
}

.top-news-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.top-news-list {
  width: 100%;
  order: 1;
}

.top-news-item {
  padding: 24px;
  background-color: var(--color-bg-white);
  display: flex;
}
.top-news-item:not(:first-child) {
  margin-top: 8px;
}

.top-news-title {
  margin-left: 32px;
}
  1. タイトル
  2. 投稿のブロック
  3. ボタン

HTMLは上の順に書いて、CSSで順番を変更しています。上の順番の方がより自然なので、このようにしています。

ブログセクションを作る

<!-- top-blog -->
<section class="top-blog u-ptb">
    <div class="l-container">
        <h2 class="c-title-level2 c-title-level2--center">ブログ</h2>

        <div class="top-blog-list u-mt">
            <article class="top-blog-item">
                <div class="top-blog-img">
                    <img src="img/pic-top-blog@2x.png" alt="..." width="688" height="360" />
                </div>
                <div class="top-blog-meta">
                    <time datetime="”2021-12-26”" class="top-blog-date">2021-12-26</time>
                    <span class="top-blog-category">category01</span>
                </div>
                <h3 class="top-blog-title">HPをリニューアルしました!</h3>
            </article>

            <!-- 上と同じ繰り返しなので省略 -->
        </div>

        <div class="top-blog-button u-mt">
            <a href="" class="c-button">一覧を見る</a>
        </div>
    </div>
</section>
<!-- end blog -->
/*!
page > top > top-blog
------------------------------
*/
.top-blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.top-blog-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.top-blog-date {
  font-size: 14px;
}

.top-blog-category {
  font-size: 14px;
}

.top-blog-title {
  font-size: 18px;
  font-weight: bold;
}

.top-blog-button {
  text-align: center;
}

サービスセクションとほぼ同じでCSS Gridで作っています。

会社概要と採用情報セクションを作る

<!-- top-company-info -->
<div class="top-company-info u-ptb">
    <div class="l-container">
        <div class="top-company-info-inner">
            <section>
                <a href="">
                    <div class="top-company-info-img">
                        <img src="img/pic-top-company@2x.png" alt="..." width="1032" height="540" />
                    </div>
                    <div class="top-company-info-title">
                        <h2 class="c-title-level2 c-title-level2--center">会社概要</h2>
                    </div>
                </a>
            </section>

            <section>
                <a href="">
                    <div class="top-company-info-img">
                        <img src="img/pic-top-recruit@2x.png" alt="..." width="1032" height="540" />
                    </div>
                    <div class="top-company-info-title">
                        <h2 class="c-title-level2 c-title-level2--center">採用情報</h2>
                    </div>
                </a>
            </section>
        </div>
    </div>
</div>
<!-- end company-info -->
/*!
page > top > top-company-info
------------------------------
*/
.top-company-info {
  background-color: var(--color-bg-light);
}

.top-company-info-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.top-company-info-title {
  padding: 16px 0;
  background-color: var(--color-bg-white);
  position: relative;
}
.top-company-info-title::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--color-bg-dark);
  border-right: 3px solid var(--color-bg-dark);
  transform: rotate(45deg);
}

CSSで矢印を作ることはよくあるので、覚えておくと良いです。SCSSを使っている方は、mixinにしておいても良いと思います。

これで全て完成になります。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材