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