二つのsectionを囲っているdivにクラスを付ける
<div class="column">
<section><!--1つめのセクション-->
それぞれのセクションにも
<section class="col_01"><!--1つめのセクション-->
<section class="col_02"><!--2つめのセクション-->
セクションの中のimgとテキストもdivに名前を付ける
セクション全体の姿はこの通り
（これはcol_02だがcol_01も同じようにする）
・<figure>を囲っているdivが<div class="col_img">
・<h3><h4><p>を囲っているdivが<div class="col_text">
section部分
<section class="col_02"><!--2つめのセクション-->
<div class="col_img">
<figure>
<img src="images/hm-Content-Images-02.jpg" alt="コラムイメージ02">
<figcaption>面倒なカロリー計算もおまかせ</figcaption>
</figure>
</div>
<div class="col_text">
<h3>個人でのご利用、組織でのご利用も</h3>
<h4>働き盛りのアナタをサポート</h4>
<p>
ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
</p>
</div>
</section>
もうすこしclass名を付けていく
flexを追加して、このように変更
<section class="col_01 flex">
<section class="col_02 flex">
今こんな感じ
flexをつけたから横並びになっている
marginの話
上下のmarginは相殺しあう
つまりブロックAとBが上下にあるとして、Aのmargin-bottomが3rem、
Bのmarginが上下に8remあったら、
11remにはならず、相殺されて「大きいほうが」適用される
よって8remの隙間になる
左右に関しては足されるらしい
注意！
main .column .col_02{
}
この記述で、.の位置を間違えたらもちろん動かない
main. columnになっていた
『mainの、子要素であるクラスcolumnの、子要素であるクラスcol_02』という記述なので、
「子要素で」というところが「半角スペース」
「クラスの」というところが「.」
すなわち記述が
main .column .col_02{
}
となる
つづき
main .columnの幅を整える
main .column{
width: 80%;
margin: auto;
}
ふたつめの要素を左右反転（写真が右に）
main .column .col_02{
flex-direction: row-reverse;
}
横並びになった2つの要素の幅を決める
main .column section .col_img{
flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
}
main .column section .col_text{
flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
}
だけど変わらない？
画像サイズが大きいから
全画像イメージの設定をする
img{
max-width: 100%;
/*自分自身のもっているサイズを最大とする。
また小さくなる時は親要素にあわせて小さくなる*/
}
これはbody{}の次に早々に記述する↑
余白も欲しいので、paddingを追加
main .column section .col_img{
flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
padding: 3%;
}
main .column section .col_text{
flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
padding: 3%;
}
さて、横幅の合計が100％を超えた。106％になっている
要素を包む玉ねぎの皮のように、
要素の幅 width:100pxとすると、
padding 3
border 3
margin 3
などと外側に皮をつける形になるので、
その全体は109になる
これでまずいときは、（コミコミで100にしたい）
box-sizingを使う
box-sizing: border-box;
内側余白やボーダーも含めて
これはhtml{}でもだめで、さらに上で全称セレクタで指定する
リセットCSSで記述してもいいレベルらしい
@charset "UTF-8";
*{
box-sizing: border-box;/*borderまでコミコミでサイズを計算*/
}
参照
ただしflexに関しては無理やり押し込めてくれる
でも無茶苦茶に押し込めたとき表示がどんどん小さくなってまずくなるらしい
そういう時はflex:wrapを使う
これをすると、親要素より子要素が大きくなったら勝手に折り返されるらしい
今回は折り返されたら困るのでbox-sizingを指定する
さくさく成型します
main .column section{
align-items: center;/*縦方向を中央に揃える なんでここにdisplay:flex;は必要ないのか*/
}
main .column section .col_img figcaption{
padding-top: 1rem;
}
main .column section .col_text h3{
border-bottom: 1px solid #333;/*文字に下線*/
line-height: 1.5;
}
main .column section .col_text h4{
font-size: 2.2rem;
margin-top: 2em;
}
main .column section .col_text p{
font-size: 1.8rem;
line-height: 1.5;
margin-top: 2em;
}
