100日後にWebサイト作れるようになる納富 Vol.4

今日も仕事終わりに。
コインランドリーで洗濯物の乾燥を待ちながら。
残り90日。

課題：display: flex;を利用しても要素を横並びにできない
原因：親要素を設定していなかった。
解決策：横並びにしたい要素の１階層上にdivを作り、そこにdisplay: flex; を設定。
参照元：https://calendar.google.com/calendar/u/0/r?tab=rc

flexboxは、親要素をフレックスコンテナ。
その影響を受ける子要素をフレックスアイテムと呼ぶ。
だから横並びにしたい時は1つ上の親要素でdisplay: flex; を設定する。

修正前）

<div class="profiletext">
   <p><span>プロフィール</span><br><br>東京生まれ東京育ち。ちょこっと茨城。<br>カメラは2022年の1月末から。<br>愛用機は、Sony α7Ⅲ。<br><br> 錦糸町のヨドバシカメラにて必死の値段交渉。<br>決死の３回払いにて念願の一眼カメラを手にする。<br>まだまだ練習中。</p>
</div>
<div class="profilephoto">
   <img src="./images/IMG_3395.jpg">
</div>

修正後）

<div class="profile">
    <div class="profiletext">
        <p><span>プロフィール</span><br><br>東京生まれ東京育ち。ちょこっと茨城。<br>カメラは2022年の1月末から。<br>愛用機は、Sony α7Ⅲ。<br><br> 錦糸町のヨドバシカメラにて必死の値段交渉。<br>決死の３回払いにて念願の一眼カメラを手にする。<br>まだまだ練習中。</p>
    </div>
    <div class="profilephoto">
        <img src="./images/IMG_3395.jpg">
    </div>
</div>

改行に<br>を使うというタブーを犯しているのは許してくれ….
要素の間はgapで調整。

    gap: 0 80px;

2/4ページ完成！