![見出し画像](https://assets.st-note.com/production/uploads/images/78416086/rectangle_large_type_2_f2611432ce2cc41b4fc6c0dd12ae7a3c.png?width=1200)
100日後にWebサイト作れるようになる納富 Vol.4
今日も仕事終わりに。
コインランドリーで洗濯物の乾燥を待ちながら。
残り90日。
課題:display: flex;を利用しても要素を横並びにできない
原因:親要素を設定していなかった。
解決策:横並びにしたい要素の1階層上に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>決死の3回払いにて念願の一眼カメラを手にする。<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>決死の3回払いにて念願の一眼カメラを手にする。<br>まだまだ練習中。</p>
</div>
<div class="profilephoto">
<img src="./images/IMG_3395.jpg">
</div>
</div>
![](https://assets.st-note.com/img/1652367469432-GFcIaZ5FEr.png?width=1200)
改行に<br>を使うというタブーを犯しているのは許してくれ….
要素の間はgapで調整。
gap: 0 80px;
2/4ページ完成!
この記事が気に入ったらサポートをしてみませんか?