イベント紹介セクションのレスポンシブコーディング

「楽しいイベントいっぱいだよ」のセクション、<section class="event"> 部分をレスポンシブにコーディングしていきます。

• セクション見出しを作る
• 基本（スマホ幅の表示）
• タブレット幅以上のCSS
• イベント情報のカード作成
• 1.配置のための大枠を考える
• 2.カードのベースを作る
• 3.カードの中身を作る①画像～概要まで
• 4.カードの中身を作る②投稿者と日にち部分
• 5.カードを4つにする
• カード配置をレスポンシブにする
• タブレット幅の表示
• PC幅の表示

セクション見出しを作る

基本（スマホ幅の表示）

見出し部分は、今までに作ってきたクラスを使うだけでも、かなり形になります。

index.html

<section class="event">
  <div class="container section-padding">
    <h2 class="text-white text-center">
      楽しいイベントいっぱいだよ
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="400" height="6" alt="">
    </div>
    <p class="text-white text-center">
      いつ訪れても楽しいズーロッパ東京。
    </p>      

  </div>
</section>

ブラウザで見てみると、h2タグの下余白が広すぎますね。
CSSでここだけ調整しましょう。

style.css

h2{
  margin-bottom: 0.25rem;
}

スマホ幅での表示は、これでOKです。

タブレット幅以上のCSS

タブレット幅、PC幅も見出し部分のレイアウトは変わりません。

変更があるのは、見出し（h2）のフォントサイズだけ。
それぞれのメディアクエリ内で、フォントサイズを上書きしましょう。

style.css - @media (min-width: 600px) { } 内

h2{
    font-size: 28px;
}

style.css - @media (min-width: 1024px) { } 内

h2{
    font-size: 32px;
}

ブラウザ幅を変更して、それぞれのCSSが効いているか確認してください。

イベント情報のカード作成

このセクションのメインである、イベント情報がそれぞれカードのようなデザインで表示されている部分を作っていきます。

1.配置のための大枠を考える

まず、それぞれの画面幅でどんな変更があるか確認してみましょう。

このデザインの場合、1つ1つのカードはどの画面幅でも同じです。
変更されるのはカードの並び方。
タブレット幅以上で横に並ぶので、flexコンテナで全体を囲っておくと良さそうですね。

さらに、タブレット幅以上でカードを横並べにする際、隣のカードとの間に余白が入ります。

余白を付ける方法はいくつかありますが、今回は簡単に余白をつけるための要素で囲もうと思います。
イメージは下図の、赤線で囲った「card-wrapper」クラスです。

ここまでを、HTMLとして書き起こします。
カードは出来あたったものをコピーしたほうが楽なので、とりあえず1つだけで良いです。

index.html

<section class="event">
  <div class="container section-padding">
    <h2 class="text-white text-center">
      楽しいイベントいっぱいだよ
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="404" height="5" alt="">
    </div>
    <p class="text-white text-center">
      いつ訪れても楽しいズーロッパ東京。
    </p>
    <!-- ここからカード並び -->
    <div class="flex-container">
      <artilce class="card-wrapper">
        <div class="card">

        </div>
      </artilce>

    </div>
  </div>
</section>

2.カードのベースを作る

イベント情報が載っているカード部分を作っていきましょう。

まずは、カードのベース部分。
必要なスタイル指定は、以下の3つです。

赤文字の“影をつける”は一旦置いておいて、簡単なところからCSSを書いてみます。

style.css

.card{
  background-color: #FFFFFF;
  padding: 10px;
}

●要素に影をつける box-shadowプロパティ

ドロップシャドウのような影は、CSSのbox-shadow プロパティを使うと表現できます。

box-shadow プロパティでは、影の位置、大きさ、色など6つの値を半角スペースで区切って設定できます。
必須の２つ以外は省略の可能。

値の設定に迷ったら、デザインデータを見てみましょう。
Illustratorの設定が、そのまま使えるところもあります。

影がついているアイテムを選択した状態で、アピアランスパネルを見てください。
「ドロップシャドウ」をクリックして、編集パネルを開きます。

以下の3つは、box-shadowプロパティの値にそのまま使えます。

style.css

.card{
  background-color: #FFFFFF;
  padding: 10px;
  box-shadow: 2px 3px 3px;
}

ブラウザで見てみましょう。

カードに影が付きました。

色の濃さが気になる方は、以下のように“影の色”を追加してください。
rgbaを使って透明度を記述すると、うっすら影がかかった見え方になります。

style.css

.card{
  background-color: #FFFFFF;
  padding: 10px;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

CSSでの色の指定方法については、下記講座で詳しく解説しています。

無料講座

基礎から学びたい人のためのHTML入門【動画で学ぼう】
- 2.CSSで使う色指定の種類、画像から色(カラーコード)を調べる方法を知ろう

3.カードの中身を作る①画像～概要まで

カード内は大きく5つのブロックに分かれています。
画像から概要まではシンプルなので、一気に作っていきましょう。

★に使われているオレンジ色は、詳細はこちらボタンの背景色と同じ。
Webサイトのキーカラーの可能性が高いので、他の場所でも使えるように「text-orange」クラスと命名しました。

概要はシンプルに「card-description」クラスとします。

index.html

<artilce class="card-wrapper">
  <div class="card">
    <img src="images/event1@2x-8.png" width="629" height="378" alt="猫パーク">
    <a href="#">
      <h3>猫パークに行こう</h3>
    </a>
    <div class="text-orange">
      ★★★
    </div>
    <p class="card-description">
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出
    </p>

  </div>
</artilce>

※img要素のwidthとheightは、画像サイズをそのまま使っています。

この段階で、ブラウザで表示すると以下のように表示されます。

作成したクラス以外に、タイトル（h3見出し）などのスタイル指定も要りますね。
一気にCSSを書いていきましょう。

style.css

.text-orange{
  color: #F15A24;
}

.card a{
  color: #0071BC;
}

.card h3{
  font-size: 24px;
  margin: 0.5rem 0 0 0;
}

.card-description{
  color: #808080;
  font-size: 14px;
}

4.カードの中身を作る②投稿者と日にち部分

カード最下部、投稿者と投稿日時が表示されている部分を書いていきましょう。
投稿者名・日にちはフォントサイズが12pxと小さいので、全体を囲うdivタグに「card-footer」クラスを新規追加します。

横並び配置はヘッダーで使った 「flex-container」+「flex-all-row」クラスが使えますね。
card-footerクラスをセレクタに、display:flexと指定しても構いません。

index.html

<artilce class="card-wrapper">
  <div class="card">
    <img src="images/event1@2x-8.png" width="629" height="378" alt="猫パーク">
    <a href="#">
      <h3>猫パークに行こう</h3>
    </a>
    <div class="text-orange">
      ★★★
    </div>
    <p class="card-description">
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出
    </p>
    <div class="card-footer flex-container flex-all-row">
      <div class="card-author">
        <img src="images/michan@2x-8.png" width="26" height="26" alt="michan">
        <a href="#" >
          michan
        </a> 
      </div>
      <div class="card-date">
        2023/05/16
      </div>
    </div>
  </div>
</artilce>

style.css

.card-footer{
  font-size: 12px;
}

.card-footer .card-date{
  margin-left: auto;
}

ブラウザで表示を確認します。

画像と名前がガタついてますね。

画像と文字を並べて表示する際、画像に対して、垂直方向の揃え方を指定するvertical-alignプロパティを設定すると、位置を揃えることが出来ます。
やってみましょう。

style.css

.card-author img{
  vertical-align: middle; 
}

見え方が、かなり良くなりました。

縦方向の揃え位置指定について

vertical-alignは、テキストや画像などの内容の垂直方向（上下方向）の揃え位置を指定するプロパティです。
適用できるのはインラインレベルの要素( img、span、aなど）とテーブルセルにのみな点に注意してください。

今回のカード下部はalign-itemsとjustify-contentプロパティを使って整えることも出来ます。
HTML&CSSでつくるWebサイト制作入門を先に受講されている方にとっては、こちらの方が設定しやすいかもしれません。どちらの方法でも間違いではありません。お好きな方で設定してください。

justify-contentプロパティでの指定例は、見本フォルダの中のindex-04-flex.html+style-04-flex.cssをご確認ください。

5.カードを4つにする

カード部分のレイアウトが整ったら、他３枚のカードも作っていきましょう。
<artilce class="card-wrapper"> ~ </artilce>までをコピー・アンド・ペーストして、画像とテキストを打ち替えてください。

カードを増やすと、下図のようにカード同士がくっついて表示されます。

カードがそれぞれ離れて表示されるよう、CSSで余白を加えます。

style.css

.card-wrapper{
  margin-top: 2rem;
}

これで、スマホ幅表示のコーディングは完成です。

カード配置をレスポンシブにする

タブレット幅、PC幅でのカード並びを設定していきます。

タブレット幅の表示

まず、最初に考えていた通りに、タブレット幅のCSSを書いてみましょう。

style.css - @media (min-width: 600px) { } 内

.card-wrapper{
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}

ブラウザで表示を確認してみましょう。
カードが２つ横並びにならず、折り返されているはずです。

これは.card-wrapperの横幅が、親要素の50%+15px+15pxと計算されているためです。
コンテナの半分以上のサイズになるので、flex-wrapで折り返されているんですね。

●box-sizingプロパティ

padding＝内側の余白なのに、widthと別計算されるとCSSを書くのが面倒。
そこで使うのが、CSSのbox-sizingプロパティです。

box-sizingプロパティは、borderとpaddingをwidthとheightに含めるか否かを指定します。
値はデフォルト値のcontent-box（含めない）、border-box（含める）の２つのみ。

「box-sizing: border-box;」を指定しておいたほうが、要素のレイアウトには便利ですね。

●全称セレクタで指定しよう

「box-sizing: border-box;」の指定は、使いたい要素、クラス毎に書くことも出来ます。
ですが、サイト全体でルールが共通していたほうが分かりやすいですよね。

こうした場合、HTMLのすべての種類の要素に適用できる全称セレクタ（ユニバーサルセレクタ）を使って書きます。
全称セレクタ（ユニバーサルセレクタ）は*。

CSSファイルの一番上に、以下のように書いてみてください。

style.css

*{
  box-sizing: border-box;
}

.card-wrapper部分にもCSSが効いて、カードが2枚横並びになります。

PC幅の表示

PC幅での表示は、カード4枚を横に並べます。
.card-wrapper の幅を25％に指定するだけでOKです。

style.css - @media (min-width: 1024px) { } 内

.card-wrapper{
  width: 25%;
}

これでイベントセクションのコーディングは終了です。
お疲れ様でした。