左に画像右にテキスト置く方法。要素を並べよう【html&css】
どうもYumaです。
現在webデザイン業務をインターン先で行なっています。
ある程度デザインの勉強を終えたので、現在はコーディング(html,css,jQuery...)の勉強をしています。
その中で、僕がとても苦戦した箇所をまとめます。(半分自分のために)
この記事では左に画像右にテキスト置く方法をご紹介します。
要素を横に並べる方法
親要素と子要素を決める
要素を横に並べるには親要素と子要素を決める必要があります。
まずは親要素と子要素についてご紹介します。
子要素は必ず親要素の中に入っています。そしてこれをhtmlで表すと
となります。
赤色の箇所が親要素で青色の箇所が青要素です。
横並びにしたい要素がある場合、まずは一つの<div></div>の中に要素達を入れましょう。
親要素の中に横並びにしたい要素を入れた後、cssを使用して横並びにします。
flexを使って横並びにする
この記事内では分かりやすくするために実際にコードを書いてみます。
上は僕が描いた絵です、小さいので見にくいですが、html内にimgタグを使うことで画像を表示することができます。
では二つの画像を横並びにするにはどうすれば良いのでしょうか。
横並びにするには親要素のcssに
display: flex;
と打ちます。(それだけで横並びにできる)
具体的にはこんな感じです。
css内にこれを打つだけで横並びになります。
【上級編】レスポンシブ対応にするために
ここは上級変なので必要のない方もいるかもです、もしレスポンシブに困っている方が入れば参考にしてください。
左に画像右にテキスト置くことは簡単です。しかし、その後レスポンシブ対応にするのは少し難しいです。
ゆっくり分かりやすく解説していきます。
横並びのレスポンシブで陥りやすいこと
横並びの要素をレスポンシブしようとした時、必ず陥るのがレスポンシブ対応にならないということ。
例えば
画像だけレスポンシブされない事件。これは本当によく起こります。
の対処法としては画像をimgタグではなくbackground-imageで読み込むということです。
解説します。
例えば先ほどの
この画像の場合、htmlは
と書きましたが、これではレスポンシブが難しくなります。
そのため、画像はbackground-imageとして取り込みます。
理由は親要素と子要素の関係を考えることで分かります。
親要素と子要素は通常このように並んでいます。
そして子要素が二つの場合は次のように並んでいます。
二つの子要素の比率が3:7の場合はこのように並んでいます。
子要素の背景として画像を入れると、この30%の中だけ画像が表示されるようになります。
そのため、imgタグではなく、background-imageで表示します。
cssでwidthとheight(要素が崩れてしまうからheightはあらかじめ決めておく)を決めることで、レスポンシブ対応の横並び要素を作ることができます。
まとめ
この記事ではいい感じに左に画像右にテキスト置く方法をご紹介しました。
独学の人はあらゆるエラーや問題が出てくると思います。
乗り越えることによって得られるスキルは教えてもらってる人の何倍にもなります。
頑張りましょう!!
では!
Discussion