【初心者向け】HTML+CSSの練習に最適!KROWLコーディング課題「個人制作の趣味サイト」 – 解説編 その2

本記事では前回に続き、HTML / CSSの練習用にKROWLサイトで配布している、KROWLコーディング課題「個人制作の趣味サイト」のコード解説をしていきたいと思います。
今回は細かい部分のコーディングを進め、ページを完成させましょう。

前回の記事をまだ読んでない方はコチラをチェック!

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

工程その4「ヘッダーを作る」

いよいよ細かい部分のマークアップに入っていきましょう。まずはページ自体のヘッダーです。
このヘッダーはh1とメインビジュアルを内包しています。

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

<header class="page-header">
  <div class="page-header__inner common-inner">
    <h1 class="page-header__title">
      <span class="large">廃</span><span class="small">- before the time comes -</span>
    </h1>
  </div>
  <p class="page-header__main-visual">
    <img src="assets/images/main_visual.jpg" alt="メインビジュアル">
  </p>
</header>

.page-header__inner.common-innerのふたつのクラス名のついたdiv要素でh1要素を包んでいます。
これはマルチクラスという考え方で、CSSのクラスごとに細かく役割を分担し、それぞれを組み合わせることで必要なスタイルをあてていきます。
こうすることで「ページ全体で使い回す.common-inner」と「ヘッダーの中だけ使う.page-header__inner」という2つの役割を共存させることができます。

このとき、デザインだけ見るとわざわざdivで囲わなくてもよいことに気づく方もいらっしゃると思います。
それは非常に的を得た意見ですが、現行のデザインを見るとヘッダーの右上の部分に空いたスペースがあり、もしかしたらそこにグローバルナビゲーションが入ってくるかもしれません。

その時h1に.common-innerが付与されていると、960pxの幅で作られてしまい、グローバルナビゲーションが入る余地がありません。
このように、デザインを目に見える形だけで捉えず、Webサイトの未来の姿を想像して設計することが、マークアップという作業においては非常に重要です。
下記のイベントレポートでもそのようなことを紹介しているので是非参考にしてみてください。

それではこの部分にあてるCSSを書いていきましょう。

.page-header {
  background-color: #5A442A;
}

.page-header__inner {
  padding: 24px 0;
}

.page-header__title {
  color: #fff;
  /* line-heightを1.0に指定することで上下に余計な隙間を持たせない */
  line-height: 1.0;
  font-weight: normal;
}

.page-header__title .large {
  font-size: 3.2rem;
}

.page-header__title .small {
  font-size: 2rem;
}

.page-header__main-visual img {
  /* メインビジュアルの画像は横幅に応じて可変するので幅100%指定 */
  width: 100%;
}

ブラウザで見てみます。

一気にそれっぽい感じが出てきましたね!

工程その5「メインコンテンツ部分を作る」

次にこのWebサイトのメインコンテンツとなる部分を作っていきます。
このセクションは大きく3つの要素に分けることができます。

[写真+テキスト]のリストの部分は塊がやや大きめなので、まず先にセクションタイトル別ページへのリンクを片付けてしまいましょう。

<!-- メインコンテンツ -->
<main class="main-content">
  <div class="common-inner">
    <header class="section-header">
      <h2 class="section-header__title typo-bold">
        <span class="large">8</span><span class="small">月の探訪</span>
      </h2>
    </header>
    <p class="old-works">
      <a href="works-201907"><span class="large">7</span><span class="small">月の探訪</span></a>
    </p>
  </div>
</main>
<!-- メインコンテンツ -->
.section-header {
  margin-bottom: 30px;
}

.section-header__title {
  line-height: 1;
  font-weight: 600;
}

.section-header__title .large {
  font-size: 3.6rem;
}

.section-header__title .small {
  font-size: 2.4rem;
}

.old-works {
  line-height: 1.0;
  text-align: center;
  font-weight: 600;
}

.old-works a {
  color: #707070;
  /*
    子要素の.largeと.mediumのフォントサイズが異なっているので、
    text-decoration: underlineでは下線の太さが異なってしまう。
    そのためborder-bottomで代替する。
  */
  text-decoration: none;
  border-bottom: 2px solid;
}

.old-works a:hover {
  border-bottom: none;
}

.old-works .large {
  font-size: 3.6rem;
}

.old-works .small {
  font-size: 2.4rem;
}

「廃」と「- before the time comes -」では文字の大きさがことなるので、それぞれを.smallと.largeというクラス名のspanで囲っています。
「small」「large」といった抽象度の高い言葉をそれ単体でクラス名に使用することはあまり望ましくないので、「.old-worksの子要素である.small」といった形で、影響範囲を絞ってあげることが重要です。

それではブラウザで確認してみましょう。
以下のようになっていると思います。

それではいよいよこのWebサイトの一番のキモに取り掛かります。
まずは先ほどのコードに、前回作った[写真+テキスト]のブロックをひとつ分追加してみましょう。

<!-- メインコンテンツ -->
<main class="main-content">
  <div class="common-inner">
    <header class="section-header">
      <h2 class="section-header__title">
        <span class="large">8</span><span class="small">月の探訪</span>
      </h2>
    </header>

    <!-- [写真+テキスト]のブロックをひとつ分追加 -->
    <div class="photo-work">
      <p class="photo-work__image"><img src="assets/images/hokkaido.jpg" alt="帯広の近くで見つけた廃墟と広大な草原の写真"></p>
      <p class="photo-work__text">北海道を旅行するのに最適な季節は8月をおいて他にない。<br>トウモロコシ畑はいよいよ隆盛を極め、今正にその旬を謳歌しようとしている。<br>そんな黄色の恵みを背に帯広から十数キロ北に車を走らせたところ、その場所は見えてきた。<br>一面に広がる緑には、おおよそ商業的農業としての役割を全うしているであろう空間は1ヘクタールも見つからない。<br>広大な庭の持ち主と、その隙間から覗く青空が伝える「夏」という言葉の解釈は、きっとまだどの辞書にも載っていないだろう。</p>
    </div>
    <!-- [写真+テキスト]のブロックをひとつ分追加 -->

    <p class="old-works">
      <a href="works-201907"><span class="large">7</span><span class="small">月の探訪</span></a>
    </p>
  </div>
</main>
<!-- メインコンテンツ -->

このとき、特に追加でCSSを書かなくても以下のようになっていると思います。

想定通りなので、これを3つに増やす…のですが、ここで前回も出たマルチクラスを使ったテクニックが光ります。

<!-- メインコンテンツ -->
<main class="main-content">
  <div class="common-inner">
    <header class="section-header">
      <h2 class="section-header__title">
        <span class="large">8</span><span class="small">月の探訪</span>
      </h2>
    </header>

    <!-- .work_listというクラス名を付与し、リストとして扱う -->
    <div class="work-list">
      <!-- .photo-workでもあり、.work_listというリストを構成する要素のひとつでもあるという考え方 -->
      <div class="work-list__item photo-work">
        <p class="photo-work__image"><img src="assets/images/hokkaido.jpg" alt="帯広の近くで見つけた廃墟と広大な草原の写真"></p>
        <p class="photo-work__text">北海道を旅行するのに最適な季節は8月をおいて他にない。<br>トウモロコシ畑はいよいよ隆盛を極め、今正にその旬を謳歌しようとしている。<br>そんな黄色の恵みを背に帯広から十数キロ北に車を走らせたところ、その場所は見えてきた。<br>一面に広がる緑には、おおよそ商業的農業としての役割を全うしているであろう空間は1ヘクタールも見つからない。<br>広大な庭の持ち主と、その隙間から覗く青空が伝える「夏」という言葉の解釈は、きっとまだどの辞書にも載っていないだろう。</p>
      </div>
      <div class="work-list__item photo-work">
        <p class="photo-work__image"><img src="assets/images/printing_factory.jpg" alt="印刷工場跡の中にある階段の写真"></p>
        <p class="photo-work__text">友人の誘いで訪れた印刷工場跡で見た階段はところどころ腐食が進んでおり、歩みを進めるたびにそう長くないであろう踏み板の寿命を感じさせる。<br>こういった場所に来るたびに懐かしい感覚を覚えてしまうのはなぜだろう。手すりを掴んだ左手から香る酸化鉄は、逆上がりができずに半べそをかいていた時分を思い出させた。</p>
      </div>
      <div class="work-list__item photo-work">
        <p class="photo-work__image"><img src="assets/images/hisuitouge.jpg" alt="思ったほど荒れていない翡翠峠の廃線の写真"></p>
        <p class="photo-work__text">長めに取った夏季休暇もいよいよ終わりに近づく某日、せっかく軽井沢に来ているのだからと、少し足を伸ばして翡翠峠に訪れた。<br>眼前に広がる一本道は、トンネルを抜けて感じた温度差も相まっていっそう胃のあたりをざわつかせる。<br>長らく手入れされていないであろう道だが、思った以上に歩みを阻む草が少ない理由に想像を巡らせ、一人笑みが溢れる。<br>年を取るにつれ失うものは多くあれど、廃線を歩くという高揚感は、皆いくつになっても消えないらしい。</p>
      </div>
    </div>
    <p class="old-works">
      <a href="works-201907" class="typo-bold"><span class="large">7</span><span class="small">月の探訪</span></a>
    </p>
  </div>
</main>
<!-- メインコンテンツ -->
.work-list {
  margin-bottom: 50px;
}

/* .work_listを構成する要素かつ一番最後以外にはmargin-bottomを設定する */
.work-list__item:not(:last-child) {
  margin-bottom: 30px;
}

コードのコメントにも書きましたが、[写真+テキスト]というブロックを

  • .photo-workという、塊としてのありかた
  • .work_list__itemという、.work_listという集団の中のひとつの構成要素としてのあり方

というふたつの役割を持たせています。
こうすることにより、[写真+テキスト]というパーツを「それ自体がマージンを持たないためいろいろな場所に配置できる」という状態を保ったまま、「縦に3つ並んだときの振る舞い方」も定義することができます。

今回は非常にミニマムな形で登場していますが、実はこういったパターンは実務でもとてもよく見受けられます。
そのため、Webサイト全体で共通して使いまわせそうなパーツには、安易にマージンなど他の要素に影響を及ぼすプロパティを設定することは極力避けたほうが良いです。

工程その6「フッターを作る」

最後にフッターを作りましょう!
といってもココまでの工程ができた方にとっては、非常に簡単な作業でしょう。

<!-- フッター -->
<footer class="page-footer">
  <p><small>Copyright 廃墟探訪</small></p>
</footer>
<!-- フッター -->
.page-footer {
  padding: 22px 0;
  background-color: #5A442A;
}

.page-footer p {
  font-size: 1.6rem;
  line-height: 1.0;
  text-align: center;
  color: #fff;
}

特筆して難しい箇所はないのですが、あえて挙げるとすればsmall要素でしょうか。
smallといっても文字を小さくしたいから使っているわけではなく、著作権表記や免責事項といった内容を記載する際によく使います。

今回のまとめ

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

  • 目に見える事実だけでなく、そのWebサイトの未来の可能性を考える
  • パーツ単体で存在する場合と、それが組み合わさった場合を分けて考える
  • :not(:last-child)パターンは便利!

また、今回の解説で使ったコードを回答例(サンプルコード)として課題に同梱しました。
ぜひKROWLサイトからダウンロードしてくださいね。
課題のダウンロードはコチラ

前回に引き続きKROWLコーディング課題を解説してきました。
ぜひ、課題を進めるときの参考にしてみてください!

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

関連記事