その２では、パネルを横並びにするスタイル作るところまでやりました。
本記事はその続きです。
パネルを並べよう
さっそく作った2つのクラスを組み合わせてみましょう。
きれいに横並びできたでしょうか。
でも今はどのパネルもテキストの長さが同じだからたまたま高さが揃っているだけかもしれません。
パネル内のテキストを変えてみる
以下のようにパネルの中身を変えてみましょう。
| パネル1 | パネル2 | パネル3 |
|---|---|---|
| タイトル1 | タイトル2 | タイトル3 |
| テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 補足補足補足補足 補足補足 |
補足補足 | 補足補足補足 補足補足補足 補足補足 |
こうするとパネルの高さが不揃いになったのではないでしょうか（揃っている人はさすがです）。
どうすればパネルの高さを揃えることができるか考えてみてください。
できましたか？
以下は筆者だったらこう作る例です（追加分のみ）。
<li class="panels__item panel">
<div class="panel__header">
<div class="panel__header__icon">
<img src="dummy.png" alt="ダミー">
</div>
<div class="panel__header__text">タイトル1</div>
</div>
<div class="panel__content">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
<div class="panel__footer">
<ul>
<li>補足補足補足補足</li>
<li>補足補足</li>
</ul>
</div>
</li>
筆者の場合は.panels__item要素に.panelをつけることでパネルの高さを揃えています。
揃え方は他にもあるのでそれぞれのやり方で実現してください。
追加要求
さてこれで課題は完成、とはいきません。
要求者はいつだって気まぐれで、出来上がったものをみてから急に追加や変更を要求してきます。
今回はこんなことを言ってきました。
- パネルの数を増やしたい
- 青枠線のパネルを追加したい
- SP時にテキストの位置を移動したい
PC時
SP時
パネルの数を増やしたい
パネルを3つから4つに増やしたいと言われました。
1つのパネル幅は今のままで、4つ目は1段落として表示したいそうです。
うまくclassが作れていればタグをコピペして要素を増やすだけで対応できそうですが、場合によってはCSSを見直さないといけないかもしれません。
青枠線のパネルを追加したい
一部のパネルを強調したいので、枠線を太い青にしたい（border: 2px solid #3176d5）と言われました。
マルチクラスで対応してみましょう。
テキストの位置を移動したい
スマホ時に要素の高さを減らしたいということで、本文テキストの位置をタイトルの下(間隔10px)に移動したいと言われました。
場合によってはCSSだけでなくHTMLの構造を大幅に見直さないといけないかもしれません。
できましたか？
細かな変更点はコード例を見てください。
パネルの数を増やしたい(例)
筆者の場合は単純にコピペするだけでは実現することができず、
.panelsにflex-wrap: wrap;を追加する必要がありました。
あとは.panels__itemに下マージンを追加しています。
青枠線のパネルを追加したい(例)
筆者の場合は.panel--highlightというmodifierを用意しました。
テキストの位置を移動したい(例)
筆者の場合は.panelの中身を大幅に見直す必要がありました。
めんどうですね。できあがってから変更したいなんて簡単に言わないでほしいものです。
今度こそ課題が完成、とは残念ながらいかないです。
まだIE11で確認していません。
その４（IE11編）へ続く。