「楽しいイベントいっぱいだよ」のセクション、<section class="event"> 部分をレスポンシブにコーディングしていきます。
セクション見出しを作る
基本（スマホ幅の表示）
見出し部分は、今までに作ってきたクラスを使うだけでも、かなり形になります。
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での色の指定方法については、下記講座で詳しく解説しています。
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%;
}
これでイベントセクションのコーディングは終了です。 お疲れ様でした。