html, cssで画像と文を横並びにする方法がわからん！
私も初めの頃は苦戦しました。
模写とかしていても本当にこの作りしょっちゅうでてくるんですよ。
でも安心してください。これ結構簡単なんです!
今回の記事みてもらえればそれがわかるはずですし今回を機にマスター出来ます。
displayの使い方もわかるし、その他重要な要素もあるのでぜひご覧ください！
※トップの画像が実行結果になります。
(こちらが今回のベースとなるHTMLです。)
<body> <div class="wrapper"> <img src="bread.jpg" alt="パンの写真"> <p> 文章 </p> </div> </body>
全体を中央に揃えよう（この中央揃えのテクもめちゃ重要！）
これこそ初心者がぶち当たる壁かも知れませんので説明しておきます。
まず元々の状態では左揃えになってしまっています。
これを次のたった2つコードで中央寄せします。
widthとmargin: 0 auto
の組み合わせなんですね。
特にwidthの設定はお忘れなく。
中央揃えの方法に関する説明はこれだけです。
案外簡単なんですよ。
.wrapper{
width: 70%;
margin: 0 auto;
}
要となるのはdisplay:flex
まずdisplay未設定の状態が上の写真です👆。
ここが問題なんですよね。そうです。
この画像と文を横並びにします。
その魔法の言葉がdisplay:flexです。
あと言っておきたいのが、display:flexは普通親要素に書く！ということです。
親要素に設定をし、子要素に変化をもたらします。それをふまえると…
これで完了ですね。
最後に
.wrapper{
/*全体の中央揃え*/
width: 70%;
margin: 0 auto;
/*写真と文を並べる*/
display: flex;
align-items: center;/*垂直方向揃え*/
}
以上のCSSコードをまとめると上のようになります。
こちらも案外簡単でしたよね。
それでもこの「画像と文の横並び」という作りは本当によくあるのでぜひマスターしてください！
もし面倒な時はとりあえずここにあるコードをコピペしちゃって、そこから微調整していくっていうやり方でも時間短縮に繋がりますね。
実は今回触れなかったのですが、レスポンシブ対応を考慮すると画面サイズに合わせて、「flexの方向」すなわち”flex-direction”を設定するべきなんです。
しかし今回は焦点を絞ってそこついては言及しませんでした。
レスポンシブ対応についてはこちらの記事で解説しています👇。
