ヘルセムからのお知らせ、の次の部分
これを横並びにする方法
①flexbox
②float
など
横並びにしたいが全部が横並びじゃ困る
2行にしたい
横幅を指定してやればいい
<dt>と<dd>を足した分で計算したい
main .news dl.flex dt{
flex-basis:25%;
}
main .news dl.flex dd{
flex-basis:75%;
}
>flex-basisプロパティは、フレックスアイテムの基本の幅を指定します
でもまだやっぱり横並び
flexboxはなにがなんでも横に並べようとする
折り返さない設定が必要になる
何も設定しないと横幅をこえてもむりやり並べる
横幅を超えたら折り返しと指定する
main .news dl.flex{
flex-wrap: wrap;/*折り返し設定*/
}
さらにこの部分全体を調整
main .news{
width: 60%;
margin: 0 auto;/*中央揃え*/
}
ここまで
main .news{
width: 60%;
margin: 5rem auto;/*中央揃え 上下にmargin*/
}
main .news h3{
font-size: 2.5rem;
text-align: center;
}
main .news dl.flex{
flex-wrap: wrap;/*折り返し設定*/
}
main .news dl.flex dt{
flex-basis:25%;
}
main .news dl.flex dd{
flex-basis:75%;
}
画面幅をせばめたときに、ddの行間がぴちぴちなので、
main .news dl.flex dd{
flex-basis:75%;
margin-bottom: 1.5rem;
line-height: 2;
}
微妙に高さが合わなくなった
これを解決するにはdlにも同じ行間設定を加える
main .news dl.flex dt{
flex-basis:25%;
line-height: 2;/*こっちにもこれをつけないと高さがずれる*/
}
line-heightにはremをつけないで生身の2とか1.5にするのが普通
なぜか
フォントサイズが変わったときに文字行間も自動で倍率が維持されるので
行間は上・下両方向にのびる
ただしadobeソフトのフォトショやイラレは行間の概念が違うらしい。下に伸びるらしい
ddがブロック
dtがインライン系
横に並べるだけならfloatはあまり使わないらしい
インラインのものは領域を持っていない
領域はないけど見えないわけではないらしい
<a>とか<span>とかもインライン系らしい
ここでdtとddが横並びになっているのは、
「flexがかかっているから」であって、dtがインライン要素だからではない
reset.cssをかけなければわかるが、普通にデフォルトでdtとddは改行される
「いますぐ問い合わせる」の部分
1.classを付与
<p class="btn"><!--ボタンの要素もたせたい-->
<a href="#">いますぐ問い合わせてみる</a>
</p>
ボタンが複数あるなら専用のクラスを切ってそれをhtmlに当てはめてもいい
今回はmain .btn a{}で
main .btn a{
font-size: 2rem;
background-color: #1b5901;
}
つづく
