二つの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;
}
