問題19:【レスポンシブ】要素の順番を変えよう
【レスポンシブ】要素の順番を変えましょう。
PC時は、タイトル/img(赤背景)/テキスト
SP時はタイトル/テキスト/img(赤背景)
の順番で表示させてください。
見本動画を参考にして実装してください。
PC時は、タイトル/img(赤背景)/テキスト
SP時はタイトル/テキスト/img(赤背景)
の順番で表示させてください。
見本動画を参考にして実装してください。
あらかじめエディタに書くコード
<section class="card">
<h2>カードタイトル</h2>
<div class="card-img"></div>
<div class="card-sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</section>
¥HTML¥
期待する画面
解答ソースコード
<section class="card">
<h2>カードタイトル</h2>
<div class="card-img"></div>
<div class="card-sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</section>
¥HTML¥
.card {
width: 300px;
margin: auto;
border: 1px solid #8d8d8d;
padding: 8px;
}
h2 {
margin: 0;
text-align: center;
}
.card-img {
width: 100%;
height: 150px;
background: red;
margin: 24px 0;
}
.card-sentence {
width: 100%;
}
@media screen and (max-width: 768px) {
.card {
display: flex;
flex-wrap: wrap;
}
h2 {
margin: 0 auto 12px;
order: 1;
}
.card-img {
order: 3;
}
.card-sentence {
order: 2;
}
}
¥CSS¥
補足
初級四十参で実施した要素の順番の変え方を思い出しましょう。
orderプロパティを使用するには、フレックスコンテナ内に要素を入れる必要があります。
コンテナ内に入ったらorderの値に数字を入れて順番を指定すればOKです。
orderプロパティを使用するには、フレックスコンテナ内に要素を入れる必要があります。
コンテナ内に入ったらorderの値に数字を入れて順番を指定すればOKです。
#忍者CODE無料問題集で活動を記録しよう
完了にする!
1.HTMLの宣言をしてみよう
そこでorderを指定するようにしましょう。
実務でもカード内の順番を入れ替える事も多いので覚えましょう。