【初心者向け】HTML+CSSの練習に最適!KROWLコーディング課題「はじめてのLP」 – 解説編 その2

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

まだ前回の解説を読んでいない方は、ぜひそちらからお読みください。

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

今回は前回解説しきれなかった範囲を詳しく解説していきます。

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

工程その4「”「働く」をデザインする”セクションを作る」

まずは「画像+テキスト」のパーツを作っておく

このセクションでは画像とテキストが横並びになっているパターンのパーツが4回出てきます。まずはこのパターンを作ってしまうことにしましょう。

<div class="feature-block">
  <p class="feature-block__image"><img src="assets/images/img-drip_machine.jpg" alt="12種類のドリンクが楽しめる特注のドリップマシーン"></p>
  <div class="feature-block__wrapper">
    <h3 class="feature-block__title typo-bold">休憩にお供しましょう</h3>
    <p class="feature-block__text">時に良いアイディアは良いコーヒーブレイクの上に生まれます。疲れた時、煮詰まった時は一杯のコーヒーで気分をリフレッシュしましょう。<br>WorkWithは最新のドリップマシーンを4台導入しています。コーヒー、エスプレッソ、紅茶、ココア、カフェインレスの飲み物も、もちろん用意しています。</p>
  </div>
</div>
.feature-block {
  display: flex;
  background-color: #fffff3;
}

.feature-block__image {
  width: 50%;
}

.feature-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-block__wrapper {
  width: 50%;
  padding: 40px 20px;
  box-sizing: border-box;
}

.feature-block__title {
  margin-bottom: 20px;
  font-size: 2.0rem;
  line-height: 1.75;
}

.feature-block__text {
  font-size: 1.6rem;
  line-height: 1.75;
}

一見すると複雑なコードは書かれていませんが、実はここにはマークアップという作業における非常に重要な要素が含まれています。
デザインデータを見る限りでは4つのブロックすべてが280pxの高さで作成されていますが、上記のコードをブラウザで確認すると、いくつかは異なる高さになっているのではないでしょうか。
これは、ブラウザ上でレンダリングされる際、使われているフォントや文章の内容、ユーザーの閲覧環境など様々な要素によってデザイン通りに再現されないことに起因しています。
エンジニアはこういった状況を予測し、可能な限り高さを固定値で設定しないということを考慮する必要があります。

もしここでheight: 280pxを設定してしまうと、280pxを超える部分については隠れてしまうため、下の余白がデザインより極端に詰まってしまったり、内容に変更が入ったときに文字が見切れてしまったりすることが考えられます。

各ブロックの高さを固定値280pxに設定した場合

前回の課題解説記事でも触れましたが、まさに「デザインの外側を見る」必要があるわけですね。

しかし、仮に高さを指定しなかった場合、ブロック自体の高さが可変するため、430px × 280pxの画像をただ配置するだけでは、アスペクト比が合いません。
そこで今回はobject-fitというCSSプロパティを使用しました。
これは画像や動画といった要素を、それを内包している要素に対してどのように配置するかをコントロールするプロパティです。
比較的新しいもので、Can I use…で確認してもIEなどでは動作しませんが、今回の要件であるChrome / Firefox / Safari / Edgeの最新版では動作するので使用には問題ありません。

もしIEにも対応する必要がある場合は、背景画像として配置しbackground-size: coverなどでの対応が考えられます。

作った「画像+テキスト」パターン4つ分を組み合わせる

それでは作ったパターンを複製し、4つ分作りましょう。
それぞれの.feature-block.feature-listの子要素として存在するため、.feature-block.feature-list__itemというクラスを追加します。

<div class="feature-list">
  <div class="feature-list__item feature-block">
    <p class="feature-block__image"><img src="assets/images/img-working.jpg" alt="WorkWithで集中作業中の女性会員"></p>
    <div class="feature-block__wrapper">
      <h3 class="feature-block__title typo-bold">集中しよう</h3>
      <p class="feature-block__text">集中は創造に直結します。<br>WorkWithはあなたがクリエイティブに没頭できる場所を提供するため、160人を収容可能な空間に趣の異なる8種類のデスクとチェアを用意しました。<br>今日の気分に合う場所がきっと見つかります。</p>
    </div>
  </div>
  <div class="feature-list__item feature-block">
    <p class="feature-block__image"><img src="assets/images/img-meeting_room.jpg" alt="陽当りの良い8人用会議室"></p>
    <div class="feature-block__wrapper">
      <h3 class="feature-block__title typo-bold">アイディアを深めよう</h3>
      <p class="feature-block__text">会話は相乗効果を生みます。<br>WorkWithは大小様々なサイズの会議室を各フロアに設置しています。<br>数人で行うブレインストーミングから、20人規模で行うプロジェクトの報告会まで、チームの生産性を最大化する空間を提供します。</p>
    </div>
  </div>
  <div class="feature-list__item feature-block">
    <p class="feature-block__image"><img src="assets/images/img-drip_machine.jpg" alt="12種類のドリンクが楽しめる特注のドリップマーシン"></p>
    <div class="feature-block__wrapper">
      <h3 class="feature-block__title typo-bold">休憩にお供しましょう</h3>
      <p class="feature-block__text">時に良いアイディアは良いコーヒーブレイクの上に生まれます。疲れた時、煮詰まった時は一杯のコーヒーで気分をリフレッシュしましょう。<br>WorkWithは最新のドリップマシーンを4台導入しています。コーヒー、エスプレッソ、紅茶、ココア、カフェインレスの飲み物も、もちろん用意しています。</p>
    </div>
  </div>
  <div class="feature-list__item feature-block">
    <p class="feature-block__image"><img src="assets/images/img-bar_w2.jpg" alt="Bar W2のカウンター"></p>
    <div class="feature-block__wrapper">
      <h3 class="feature-block__title typo-bold">お疲れ様です<br>ちょっと一杯、あなたと乾杯</h3>
      <p class="feature-block__text">帰る前に1パイントのビールはいかがでしょう。<br>Bar W2は17時から23時までオープンしています。<br>今日の自分を労って、WorkWithで出会った新しいビジネスを祝して、乾杯しましょう。</p>
    </div>
  </div>
</div>
.feature-list {
  width: 960px;
  margin: 0 auto;
  padding: 50px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
}
/* デザインを見る限り、奇数番は左、偶数番は右に文章があるので、:nth-child(even)を使う */
.feature-list__item:nth-child(even) {
  flex-direction: row-reverse;
}

共通パーツと背景画像を使ってセクションを仕上げる

<!-- 「働く」をデザインする -->
<section id="feature" class="section">
  <h2 class="section__title--white typo-bold">「働く」をデザインする</h2>
  <div class="feature-list">
    ...
  </div>
</section>
<!-- 「働く」をデザインする -->
#feature {
  background: url(../images/bg-content.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

難しいことは何もないですが、今回はbackground-attachment: fixedを使ってみました。
これは背景画像を固定するプロパティで、スクロールしても背景を動かさないようにすることで、奥行き感を出しています。

あとは前回の記事の内容と組み合わせて完成!
KROWLコーディング課題001「週末廃墟写真家の趣味サイト」がクリアできた方ならそれほど難しい内容ではなかったかな?と思います。

今回のまとめ

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

  • 要素の高さを安易に固定値で設定しない
  • 高さが定まっていない要素の横並びはFlexboxとobject-fitの合わせ技で対応
  • background-attachment: fixedでちょっとオシャレに

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

▼課題のダウンロードはコチラ

前回に引き続きKROWLコーディング課題の解説を行ってきました。
「この記事を読んでもいまいちわからない箇所があった」「マークアップのテクニックについて、もっと詳しく話を聞いてみたい」などありましたら、ぜひ「ほぼ毎週木曜日 KROWL勉強会」にお越しください!

▼「ほぼ毎週木曜日 KROWL勉強会」の詳細はこちら

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

関連記事