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

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

まだ前回の解説を読んでいない方は、ぜひそちらからお読みください。
ぜひKROWLサイトから課題をダウンロードし、同梱されているサンプルコードを見ながらお読みください!

今回は以下の範囲を解説し、残りを次回の記事で解説していきます。

  • ページ内で共通の箇所
  • ヘッダー
  • フッター
  • “創造しよう”セクション
  • “導入企業様”セクション

工程その1「共通の箇所を探す」

前回同様、まずは共通で使い回せる箇所を探していきましょう。
今回は複数のセクションが存在しているのであくまでも「セクションを問わず共通で使われている箇所」を探すことにします。

今回は以下の3点が共通化できそうです。

  • 各セクションの上下の余白
  • 各セクションのタイトル
  • 各セクションの導入文

これをBEMのBlock__Elementの考え方に則り、「.sectionというクラス名を持つBlockと、タイトルと導入文はそれに付随するElement」という形で定義することにします。
CSSを書いてみると、以下のようになると思います。

/* 各セクション */
.section {
  padding: 100px 0;
}

/* セクションタイトル */
/* "「働く」をデザインする"のみ白文字なのでBEMのmodifierでスタイルを拡張する */
.section__title,
.section__title--white {
  margin-bottom: 50px;
  font-size: 3.2rem;
  line-height: 1.0;
  text-align: center;
}

.section__title--white {
  color: #fff;
}

/* セクションの導入文 */
.section__text {
  font-size: 1.6rem;
  line-height: 2.0;
  text-align: center;
}

/* わかりやすいように色をつけておきます */
#introduction {
  background-color: #fffff3;
}

今回は「創造しよう」セクションが全て内包しているので、実際にこの部分だけHTMLを書いて確認してみましょう。

<!-- イントロダクション -->
<section id="introduction" class="section">
  <h2 class="section__title typo-bold">創造しよう</h2>
  <p class="section__text">WorkWithは全く新しいワーキングコミュニティの形です。<br>全ての人がもっと自由に、自分の才能を最大限活用できるよう<br>働くという行為自体をデザインします。<br>アイディアとインスピレーション溢れるこの空間で<br>次の時代の価値を創造しましょう。</p>
</section>
<!-- イントロダクション -->

いい感じですね!

ちなみに今回はセクションの余白を上下100pxで設定しましたが、この状態だとタイトルや導入文に行高(line-height)が設定されている場合に、デザインデータ上のマージンと多少の差異が出てしまいます。
ここの処理については(もちろんその分もきちんと計算して設定するのが望ましいですが)会社や案件、Webデザイナー、実装者(エンジニア)によって考え方は様々です。
実際に何人かのWebデザイナーや実装者(エンジニア)に聞いてみたところ、以下のような答えが返ってきました。

  • そこまで合わせてくれたら嬉しいけど、納期や工数のこともあるから「ここはこだわりたい」という箇所以外はキリの良い数字で合わせてくれればいい(Webデザイナー)
  • その分も考慮してデザインをしている(Webデザイナー)
  • スケジュールに余裕があって規模の小さい案件なら対応するけど、規模が大きくなるとデザインコンポーネントの組み合わせによってどうしてもデザインデータ通りにできない箇所が出てくるから、100%厳密にできないことがある(エンジニア)
  • (UXの向上を目的に)その部分以上に時間をかけるべき箇所があるから時間に余裕があったらやる(エンジニア)

今回については、細かいところを詰めるのが目的ではないため、基本的に行高のことは考慮しないで進めようと思います。

工程その2「ヘッダーとフッターを作る」

今回はかなり簡易的なヘッダーなのでサクッと作ってしまいましょう。

ヘッダー

<!-- ヘッダー(ロゴとメインビジュアル) -->
<header class="page-header">
  <h1 class="page-header__logo"><img src="assets/images/logo-work_with.svg" alt="WorkWith"></h1>
</header>
<!-- ヘッダー -->
/*------------------------------
ページヘッダー
------------------------------*/
.page-header {
  padding-top: 40%;
  background: url(../images/bg-main_visual.jpg) center top no-repeat;
  background-size: cover;
  position: relative;
}

.page-header__logo {
  position: absolute;
  bottom: 60px;
  left: 60px;
}

気をつけるべき点はヘッダーに設定されている背景画像です。
CSSで背景画像として設定する場合はimg要素と違い、その画像自体の幅や高さによって要素の表示領域が確保されません。
そのため、.page-headerpadding-top: 40%を指定し、1,000px * 400pxの画像をアスペクト比を崩すことなくブラウザサイズに応じて拡大・縮小させます。

フッター

<!-- フッター -->
<footer class="page-footer">
  <p class="page-footer__copyright"><small>Copyright WorkWith, Inc.</small></p>
  <nav class="page-footer__nav">
    <ul>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">プライバシーポリシー</a></li>
    </ul>
  </nav>
</footer>
<!-- フッター -->
/*------------------------------
ページフッター
------------------------------*/
.page-footer {
  display: flex;
  justify-content: flex-end;
  position: relative;
  padding: 24px 20px;
  background-color: #000;
}

.page-footer p {
  font-size: 1.2rem;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.page-footer__nav ul {
  display: flex;
}

.page-footer__nav ul li {
  line-height: 1;
}

.page-footer__nav ul li:not(:last-child) {
  margin-right: 20px;
}

.page-footer__nav ul a {
  font-size: 1.2rem;
  color: #fff;
}

今回のフッターはコピーライトがセンタリングされており、お問い合わせとプライバシーポリシーへのリンクが右寄せになっています。
それなので.page-footer自体をFlexboxにしてリンクの類を右寄せにした上で、コピーライトをposition: absoluteで中央に配置することで実現してみました。

工程その3「”導入企業様”セクションを作る」

つくりとしては“創造しよう”セクションに企業ロゴのリストが追加されたものになりますが、一点注意しないといけないのが「WorkWithは福利厚生の〜」からはじまるテキストと企業ロゴの間のマージンです。
テキスト部分は工程その1で作った.section__textを利用しますが、現時点ではマージンが設定されていないのでこれだけでは不十分です。
そこで、:not(:last-child)パターンを使用して共通パーツを拡張します。

.section__text:not(:last-child) {
  margin-bottom: 70px;
}

これを踏まえてマークアップしてみましょう。

<!-- 導入企業様 -->
<section id="client" class="section">
  <h2 class="section__title typo-bold">導入企業様</h2>
  <p class="section__text">WorkWithは福利厚生の一貫として多くの企業様に導入いただいております。<br>お得な法人様向けプランもありますのでお気軽にお問い合わせください。</p>
  <ul class="client-list">
    <li class="client-list__item"><img src="assets/images/logo-company01.svg" alt="株式会社◯◯のロゴ"></li>
    <li class="client-list__item"><img src="assets/images/logo-company02.svg" alt="株式会社◯◯のロゴ"></li>
    <li class="client-list__item"><img src="assets/images/logo-company03.svg" alt="株式会社◯◯のロゴ"></li>
    <li class="client-list__item"><img src="assets/images/logo-company04.svg" alt="株式会社◯◯のロゴ"></li>
  </ul>
</section>
<!-- 導入企業様 -->
/*------------------------------
導入企業様
------------------------------*/
#client {
  background-color: #fffff3;
}

.client-list {
  display: flex;
  justify-content: space-between;
  width: 780px;
  margin: 0 auto;
  list-style: none;
}

予め共通パーツ化した部分が効いていることで、CSSの記述量がとても少なくてすみましたね!
また、今回はul要素に対するlist-styleの指定をリセットしていないので、ここでlist-style: noneを指定しておきます。

今回のまとめ

それでは一旦ここまでコーディングした状態をブラウザで確認しておきましょう。

だいぶ形になってきましたね!

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

  • line-heightによって変化するマージンの扱いは案件や関わっている人によって変わり得る
  • 共通パーツは適宜拡張する

次回は“「働く」をデザインする”セクションを解説します。

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

関連記事