忘れたときすぐ見れるよう自分用メモ
こういうよく見るレイアウト
HTMLはこんな感じ
<divid="businesses"><divclass="business"><imgsrc="imgges/picture_pc_0c274de1b76f4063c7ce088be3b57004.jpg"alt="ビジネス1"><divclass="desc"><h3>1.テキストテキストテキスト</h3><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div><divclass="business"><imgsrc="imgges/picture_pc_3d21e88b8ee49951e3c0931173a8f8ed.jpg"alt="ビジネス2"><divclass="desc"><h3>2.テキストテキストテキスト</h3><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div><divclass="business"><imgsrc="imgges/picture_pc_c61a50ca0b2335d65a46645b73a2a480.jpg"alt="ビジネス3"><divclass="desc"><h3>3.テキストテキストテキスト</h3><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div></div>CSSはこんな感じ
.business{display:-webkit-flex;display:-ms-flex;display:flex;}.business:nth-child(even){flex-direction:row-reverse;}/*これ以下は無視して*/.businessimg{width:50%;height:auto;}.business.desc{width:50%;padding:40px20px;background-color:#aaaaaa;color:#fff;}.business.desch3{font-size:20px;margin-bottom:30px;}.business.descp{width:80%;}ちょっと解説
今、HTMLの構造は以下の通り(descより下は無視)
まずbusinessの2つの子要素img、descを横並びにさせたいのでbusinessのdisplayをflexにする
.business{display:-webkit-flex;display:-ms-flex;display:flex;}display:flexは通常左から右に横並びさせるので、この場合2番目のbusinessの並び順を右から左に変えてやれば写真とテキストが互い違いに表示される
2番目のbusinessの並び順を右から左にするにはこう
.business:nth-child(even){flex-direction:row-reverse;}このコードは偶数個目のbussinesの並び順を逆転させることができるので、businessをあとから追加しても自動的に互い違いに表示される
最後に
【初心者向け】HTML+CSS練習用のサンプルコード
題材、画像はここからお借りしました
解説もあるので置いときます
初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その1
【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その2
【初心者向け】HTML+CSS練習用のサンプルコード 徹底解剖編その3
