【初心者向け】HTML+CSSの練習に最適!KROWLコーディング課題「ツールの紹介サイト」 – 解説編 その1

本記事ではHTML / CSSの練習用にKROWLサイトで配布している、KROWLコーディング課題「ツールの紹介サイト」のコード解説をしたいと思います。

初心者向けのコーディング課題を解説した記事もありますので、そちらもぜひお読みください。

ぜひKROWLサイトから課題をダウンロードし、同梱されているサンプルコードを見ながらお読みください!

今回はヘッダーとフッターに絞って細かく解説し、続きは次回以降の記事で解説していきます。

※本記事に掲載されているコードはあくまでも一例です。絶対的な正解というわけではありませんので、予めご了承ください。

工程その1 マークアップの準備

大枠のマークアップをする

ヘッダー、フッター、メインコンテンツの大枠のマークアップしてしまいましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DataMania - 特化型データマーケティング支援サービス</title>
    <!-- HTML5 Reset Stylesheet -->
    <link rel="stylesheet" href="assets/css/reset.css">
    <!-- HTML5 Reset Stylesheet でリセットし切れないスタイルをcustom_reset.cssで定義-->
    <link rel="stylesheet" href="assets/css/custom_reset.css">
    <!-- 具体的なスタイルをstyle.cssに記述 -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- css-browser-selector.jsを読み込む -->
    <script src="assets/js/css-browser-selector.js"></script>

  </head>
  <body>
    <!-- ヘッダー(ロゴとメインビジュアル) -->
    <header class="page-header">
    </header>
    <!-- ヘッダー -->

    <!-- メインコンテンツ -->
    <main>
    </main>
    <!-- メインコンテンツ -->
    
    <!-- フッター -->
    <footer class="page-footer">
    </footer>
    <!-- フッター -->
  </body>
</html>

注目すべきは唯一JSファイルとして読み込んでいる、css-browser-selector.jsです。

こちらはユーザーの閲覧環境(OSやブラウザ)をJavaScriptで判定し、html要素に「mac chrome」や「windows firefox」といったクラス名を付与するライブラリです。
今回は一部WindowsとMacで見た目に差異が出てしまう箇所の調整が必要だったので導入しました。
同様のライブラリはいくつかありますが、今回は「ふたえご」さんのcss-browser-selector.jsを使わせていただきました。

リセットCSSを見直す

今回は、前回使用したcustom_reset.cssに多少変更を加えています。

/* リストに中黒や数字をつけないようにする */
ol, ul {
  list-style: none;
}
/* リンクに標準で付与される下線をなくす */
a {
  text-decoration: none;
}

/* 以下はフォームで使用するパーツに関わるリセット */
input {
  outline: none;
}

textarea {
  display: block;
  outline: none;
}

select {
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
}

button {
  background-color: transparent;
  outline: none;
}

これで準備完了です。
いよいよ本格的なマークアップ作業に入っていきましょう。

工程その2 ヘッダーを実装する

まずはナビゲーション以外の部分についてマークアップをしましょう。
要素としては以下の4つになります。

  • キービジュアル
  • h1にあたる「データマーケティングの未来をつくる」
  • Data Maniaロゴ
  • キャンペーンバナー「今なら初月無料」

今回は「キービジュアルとh1」「Data Maniaロゴとキャンペーンバナー」に分けて解説します。

キービジュアルとh1の部分を作る

まずは以下のようにマークアップしましょう。

<!-- ヘッダー -->
<header class="page-header">
  <div class="page-header__inner">
    <h1 class="page-header__title typo-bold"><span class="black-belt">データマーケティングの</span><br><span class="black-belt">未来をつくる</span></h1>
  </div>
</header>
<!-- ヘッダー →

ここでポイントになるところがふたつあります。

1.h1タグはロゴではなく「データマーケティングの未来をつくる」に使う

h1タグはそのページ内で最も主張したい事柄の見出しとして使う要素です。
企業やそのページの役割にもよりますが、今回は固有名詞である「Data Mania」より「データマーケティングの未来をつくる」をh1として設定した方が、「データマーケティング」という言葉にフォーカスするという目的には合致しています。

2.背景色付きのテキストは行ごとにspanで区切る

一見するとspanで区切らず、h1タグに直接background-colorを指定しても良さそうですが、そうすると…

こちらの画像のように、改行する位置で左右の余白がなくなってしまい、1行目の右端と2行目の左端が詰まって見えてしまいます。
それなので、こういったパターンは行ごとにspanで囲った上でスタイルを適用しましょう。

まずはメインビジュアル部分のCSSを書いていきます。
今回は背景画像として使いますが、その際に以下の2点に注意してCSSを書いていきましょう。

  1. 画像のアスペクト比を保ったまま拡大・縮小する
  2. 画像の元のサイズより小さくならないようにする
.page-header__inner {
  /* 後述のアスペクト比を保ちつつ、1200px * 480pxの最小サイズは保持する */
  min-height: 480px;
  /* 高さを画面幅の40%とすることで、アスペクト比を5:2に保つ */
  height: 40vw;
  background: url(../images/main_visual.jpg) center top no-repeat;
  background-size: cover;
}

次にh1である「データマーケティングの未来をつくる」のスタイルをあてます。

/* 天地中央かつ画面左端から100pxの位置に配置したいので、親要素である.page-header__innerに以下のスタイルを追記する */
.page-header__inner {
  display: flex;
  align-items: center;
  padding: 0 100px;
}

.page-header__title {
  font-size: 3.6rem;
  line-height: 1.5;
  color: #fff;
}
/* 背景色(黒) */
.page-header__title .black-belt {
  padding: 5px 8px;
  background-color: #000;
}

/* Windowsの場合フォントの関係で黒帯が埋まってしまうのでcss-browser-selectorを使って付与したクラス名を使って、影響範囲をwindowsに限定する */
.windows .page-header__title .black-belt {
  padding: 2px 8px 0;
  background-color: #000;
}

macOSとWindowsではフォントの関係で黒い帯の見え方に差異が出てしまいます。
それを解消するために工程その1で説明したcss-browser-selectorを活用し、windowsというクラス名が付与された場合のみ、.black-beltにかけているpaddingの値を少し抑えるように記述しました。
この時点でブラウザで確認すると以下のようになっていると思います。

ロゴとバナーの部分を作る

それでは「Data Mania」のロゴとキャンペーンのバナーを設置していきましょう。

<header class="page-header">
  <div class="page-header__inner">
    <h1 class="page-header__title typo-bold"><span class="black-belt">データマーケティングの</span><br><span class="black-belt">未来をつくる</span></h1>
    <!-- ↓ロゴとキャンペーンバナーを追記↓ -->
    <p class="page-header__logo"><img src="assets/images/logo-datamania.png" alt="DataMania"></p>
    <p class="page-header__campaign"><a href="#" class="typo-bold">今なら<br>初月無料</a></p>
    <!-- ↑ロゴとキャンペーンバナーを追記↑ -->
  </div>
</header>
/* ロゴとキャンペーンバナーでposition: absoluteが使いたいので、親要素である.page-header__innerにposition: relativeを指定しておく */
.page-header__inner {
  position: relative;
}
/* ロゴは必ず左上 */
.page-header__logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* キャンペーンバナーは右下から右辺・底辺ともに20px離れた場所に設置 */
.page-header__campaign {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
}

.page-header__campaign a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 180px;
  background-color: #fff;
  box-sizing: border-box;
  border: 5px solid #008DD5;
  /* width, heightが同一の値で円の形なので、border-radiusはpx指定する必要がない */
  border-radius: 50%;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
  color: #008DD5;
  transition: 0.2s ease 0s;
  transition-property: color, background-color;
}

.page-header__campaign a:hover {
  background-color: #008DD5;
  color: #fff;
}

いずれもposition: absoluteによる絶対配置を使っています。
そのため、親要素である.page-header__innerにposition: relativeを追記しています。

これでナビゲーション以外の部分は完成です。

ナビゲーション部分を作る

ここについては一見するとやや複雑なので、悩む方もいらっしゃると思います。
ですが「パーツごとに分解して考える」を意識すると実はそれほど難しいことではありません。
それでは分解してみましょう。

これらをマークアップすると以下のようになります。

<!-- 下に影がついている青い背景 -->
<nav class="header-navigation">
  <!-- 画面の左端から100pxの位置にある4つのメニュー -->
  <ul class="header-navigation__list">
    <li><a href="#news">最新情報</a></li>
    <li><a href="#feature">サービスの特長</a></li>
    <li><a href="#advantage">3つの強み</a></li>
    <li><a href="#client-voice">お客様の声</a></li>
  </ul>
  <!-- 画面の右端にある黄緑色のボタン -->
  <p class="header-navigation__contact"><a href="#contact">お問い合わせ</a></p>
</nav>

これを踏まえて、各パーツごとにCSSを書いていきましょう。

/* 下に影がついている青い背景 */
.header-navigation {
  background-color: #008DD5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 画面の左端から100pxの位置にある4つのメニュー */
.header-navigation__list {
  /* メニューは横並びなのでdisplay: flexを指定する */
  display: flex;
}

.header-navigation__list li {
  line-height: 1.0;
}

/* メニュー同士のマージンを設定 */
.header-navigation__list li:not(:last-child) {
  margin-right: 50px;
}

.header-navigation__list li a {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  transition: opacity 0.2s ease 0s;
}

.header-navigation__list li a:hover {
  opacity: 0.7;
}

.header-navigation__contact a {
  display: inline-block;
  padding: 30px 50px;
  background-color: #A9D92F;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  position: relative;
}
/* マウスオンしたときにボタン自体のopacityを下げてしまうと親要素の背景色と混ざってしまうので、背景色が白色で半透明なafter疑似要素を置く */
.header-navigation__contact a:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: opacity 0.2s ease 0s;
}

.header-navigation__contact a:hover:after {
  opacity: 0.3;
}

一回ブラウザで見てみると、以下のようになりました。

ここから重要なのは「言葉の変換作業」です。
例えば今回については以下のように変換してみましょう。
・画面の左端から100pxの位置にある→親要素自体の左端に100px分の余白がある

さらにそうすると、
・メニューは左端から100px
・お問い合わせボタンは右端
という状況も以下のように変換できます。
・親要素の両端にメニューとお問い合わせボタンが存在している

この考え方でCSSを組んでいくと、以下のような例が思いつきます。

/* ヘッダーのナビゲーション */
.header-navigation {
  display: flex;
 /* 子要素(メニューとお問い合わせ)を両端に均等配置 */
  justify-content: space-between;
 /* 子要素(メニューとお問い合わせ)を天地中央揃え */
  align-items: center;

  /* 自身の左端に100px分の余白を設ける */
  padding-left: 100px;
}

このたった4行のCSSを加えるだけで、先ほどの見た目が思惑通りきれいに整頓されました。

さらにもう一歩、UXを考慮してひと工夫加えましょう。

.header-navigation__list li a {
  padding: 10px;
}

.header-navigation__list li:not(:last-child) {
  /* 左右のpaddingが増えた分marginを減らす */
  margin-right: 50px;
  ↓
  margin-right: 30px;
}

.header-navigation__list li:first-child {
  /*
    一番最初のli要素だけmargin-leftをマイナス値で設定する
        ※ネガティブマージン
  */
  margin-left: -10px;
}

a要素自体の周囲に10pxのpaddingを設けることで、クリックできるエリアが広がりました。
また、増えた分をmarginを減らせば、見た目は変わらずより使いやすくなります。
こういったちょっとした気遣いが、実はWebサイトの閲覧者のストレスを下げることに深く繋がっていたりします。

これでヘッダーは完成です!

工程その3「フッターを実装する」

今回はメインコンテンツの部分がかなり多いので、比較的簡単なフッターを先に片付けてしまいましょう。
ですがその前に、そういえば今回は「ページ全体に共通する箇所」を探していませんでした。
実はこれはいくつかあるのですが、かなり長くなるので次の記事で解説することにします。
一旦フッターにも関わってくる.common-innerのみ設定しておきましょう。

/* 横幅1000px かつ 水平方向に対して中央寄せをするクラス */
.common-inner {
  width: 1000px;
  margin: 0 auto;
}

それではフッター部分のマークアップをしていきます。

<!-- フッター -->
<footer class="page-footer">
  <div class="common-inner">
    <nav class="page-footer__nav">
      <div class="footer-nav-block">
        <p class="footer-nav-block__category typo-bold">企業情報</p>
        <ul class="footer-nav-block__list">
          <li><a href="#">会社概要</a></li>
          <li><a href="#">ミッション</a></li>
          <li><a href="#">メッセージ</a></li>
          <li><a href="#">アクセス</a></li>
          <li><a href="#">採用情報</a></li>
        </ul>
      </div>
      ...
    </nav>
  </div>
</footer>
<!-- フッター -->
/*------------------------------
ページフッター
------------------------------*/
.page-footer {
  padding: 50px 0;
  background-color: #008DD5;
}

.page-footer__nav {
  display: flex;
}

.page-footer__nav .footer-nav-block:not(:last-child) {
  margin-right: 100px;
}

.footer-nav-block__category {
  margin-bottom: 40px;
  font-size: 1.4rem;
  line-height: 1.0;
  color: #fff;
}

.footer-nav-block__list {
  font-size: 1.4rem;
  line-height: 1;
}

.footer-nav-block__list li:not(:last-child) {
  margin-bottom: 20px;
}

.footer-nav-block__list li a {
  color: #fff;
}

.footer-nav-block__list li a:hover {
  text-decoration: underline;
}

特に難しい点はないと思いますが、ひとつだけ特筆すると、「.footer-nav-blockとその子要素にはwidthを指定しない」ということが挙げられます。
これは、その親要素である.page-footer__navにdisplay: flexが指定されているので、自動で調整がかかるので、個別に幅を指定する必要がないわけですね。

それではここまでの状態を一回ブラウザで確認してみましょう。
ヘッダーのメニューとフッターがどちらも同じ背景色なので、区切りがわかるようにmain要素に一時的に以下のコードを差し込んでおきます。

<main>
  <p>ここにメインコンテンツが入ります</p>
</main>

こちらの画像のようになっていればここまでは完璧です!

まとめ

今回のポイントはこちらです。

  • 閲覧環境による差異はJavaScriptライブラリとCSSを組み合わせて解消する
    ※CSSハックを使う手法もあります
  • 悩んだらパーツごとに分解して考える
  • 常に「言葉の変換」を意識して解決策を探る

次回はページ全体で使う共通パーツについて解説します。

HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中!
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう!

関連記事