ヘルセムからのお知らせ、の次の部分
これを横並びにする方法
①flexbox
②float
などなど
<dl class="flex">としましょう
→横並びにしたいが全部が横並びじゃ困る
→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;
}
つづく
