解説01：自作グリッドシステムとヘッダー作成 | SkillhubAI（スキルハブエーアイ）

レイアウトを作るための共通クラスを用意しつつ、最上部のヘッダーナビゲーションを作成していきます。
今回のコーディングで使っていくクラスの考え方を掴んでください。

グリッドシステムを自作する

今回コーディングするLPは、グリッド（12分割）を意識したデザインです。
それぞれのパーツごとに個別で「コンテンツ幅の何％」とcssを書くよりも、グリッドのベースとなるクラスを作った方がコーディングしやすそうですね。
file
Boostrapの便利なところ・使いたい設定だけを取り入れた、オリジナルのCSSファイルを作るようなイメージです。

12分割のグリッドを作成する

最初にページを12分割できるようにグリッドを設定しましょう。
考え方・クラス名は、わかりやすいようBoostrap式にします。

コンテンツ幅（最大1140px）を設定するための.container
12分割の中から好きなサイズを設定できる.col-1 ～ .col-12
col-*クラスを横並びにするための.rowを作ります。

前回のレッスンで設定した、font-familyの下あたりに書いてみましょう。

style.css

/* ============================================== */
/* base setting
/* ============================================== */
body{
  font-family: 'Noto Sans JP', sans-serif;
}

/* ---------------------- */
/* container & 12grid
/* ---------------------- */
.container{
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* col系クラス共通 */
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
  padding-right: 15px;
  padding-left: 15px;
}

.col{
  flex: 1;
}

.col-1{
  flex: 0 0 auto;
  width: calc(100% / 12);
}

.col-2{
  flex: 0 0 auto;
  width: calc(100% / 12 * 2);
}

.col-3{
  flex: 0 0 auto;
  width: calc(100% / 12 * 3);
}

.col-4{
  flex: 0 0 auto;
  width: calc(100% / 12 * 4);
}

.col-5{
  flex: 0 0 auto;
  width: calc(100% / 12 * 5);
}

.col-6{
  flex: 0 0 auto;
  width: calc(100% / 12 * 6);
}

.col-7{
  flex: 0 0 auto;
  width: calc(100% / 12 * 7);
}

.col-8{
  flex: 0 0 auto;
  width: calc(100% / 12 * 8);
}

.col-9{
  flex: 0 0 auto;
  width: calc(100% / 12 * 9);
}

.col-10{
  flex: 0 0 auto;
  width: calc(100% / 12 * 10);
}

.col-11{
  flex: 0 0 auto;
  width: calc(100% / 12 * 11);
}

.col-12{
  flex: 0 0 auto;
  width: 100%;
}

calc()関数

上記では、col-*クラスの幅を決めるためにcalc()関数を使用しています。
calc()関数は、値を計算式で指定することが出来ます。

例えば、col-4=親要素幅の三分の一の幅を％でダイレクトにいれる場合。
33.333333…と割り切れませんよね。
そもそもcol-11などは計算するのも面倒です。

calc()関数を使うと、自分で計算したり、小数点以下どこまで入力するかを悩んだりしなくて良いので楽ですね。
file

また、単位が異なる計算も出来ます。
簡単に、柔軟な指定ができるようになります。

/* ブラウザの高さ50%から、20pxをひく */
height: calc(50vh - 20px);

/* 親要素から30px減らした幅を、半分にする */
width: calc( ( 100% - 30px ) / 2 );

グリッド以外のクラスも作る

Flex関連のクラスを作る

作成したcol-*でレイアウトする時に使うであろう、Flexアイテム並び等のクラスを作っておきます。
もちろん、コーディングしながら必要なクラスを順次追加していっても構いません。

今回は、絶対に使うであろうクラスは先に作っておきます。
center以外の配置は、使う場面があれば近くに足していきましょう。

style.css

/* ---------------------- */
/* flexlayout 
/* ---------------------- */
.d-flex{
  display: flex;
  flex-wrap: wrap;
}

.flex-column{
  flex-direction: column;
}

.align-items-center{
  align-items: center;
}

.justify-content-center{
  justify-content: center;
}

横方向中央のクラスを作る

今回のデザインは（横方向）中央配置も多く使われています。

文字の中央寄せも多いので、そのためのクラスも作っておきましょう。
marginやpaddingの増減クラスは、必要に応じて追加していきます。

style.css


/* ---------------------- */
/* spacing & text-align
/* ---------------------- */
.text-center{
  text-align: center;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

ヘッダーナビゲーションの作成

ランディングページのコーディングに入りましょう。
最初に、赤線で囲ったヘッダー部分を作ります。
file
ここまでで作成したクラスも使いつつ、大まかにhtmlを書いていきます。

lp.html

<header>
  <div class="container">
    <div class="row align-items-center">
      <div class="d-flex align-items-center">
        <img src="images/sh-logo.svg" width="40" height="40" alt="SkillHub">
        <p>
          日本初のWeb起業スクール<br>
          SkillHubアントレ
        </p>
      </div>
      <nav class="col">
        <ul class="d-flex">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PRICE</a></li>
          <li><a href="#">資料請求</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

ここまで書いて、ブラウザで確認すると下図のようになりました。
リンク文字にブラウザ標準の装飾がされていたり、左に寄っていたりと、まだまだ設定が足りていませんね。
file

調整のためにhtmlでは2つクラスを加えます。

lp.html

file

それぞれに必要なスタイルを指定していきます。

style.css

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

/*  flexlayoutに追加 */
.justify-content-end{
  justify-content: flex-end;
}

/* ============================================== */
/* header
/* ============================================== */
header{
  padding-top: 15px;
}

.header-logo{
  margin-left: 15px;
}

.header-logo img{
  margin-right: 10px;
}

header nav li {
  margin-left: 3.5rem
}

file
デザインに近づきました。

「日本初のWeb起業スクール」はfont-sizeが小さくなっているので、対応できるようにクラスを作ります。
ロゴ（画像）に対しての文字のバランスも、合わせて整えていきましょう。
file

「上marignをゼロにする」も結構使いそうなので、クラス化しました。

.mt-0{
  margin-top: 0;
}

だいたいデザイン通りのバランス・配置になれば完成です。
file

見本ファイルの使い方

ここから先の解説では、途中経過の見本（mihon.html、mihon.css）を素材欄よりダウンロードしていただけます。
実習と一緒にコードを書いていく中で、上手くできない箇所等がでてきた時にご利用ください。

見本フォルダには、画像は含まれておりません。
解凍してそのまま開くと、画像が表示されません。
解答後、作成中のフォルダにファイルを移動させてご利用ください。
file

レッスン一覧へ