CSSで左に画像を右にはテキストを表示する横並びのレイアウトに挑戦して以下の画像のようにシンプルに作成しました。
CSSで「左に画像を表示」「右にはテキストを表示」する横並びのやり方は簡単なのですが、スマホ画面に合わせた画像のサイズやテキストの位置を調整するのが難しかったです。
親要素のボックスの中で左に画像、右にテキストを表示する横並びのやり方を、細かい調整に苦戦しながらもデザインした私のCSSの書き方を記事にまとめました。
CSSで左に画像 右にテキストを表示するHTML
CSSで左に画像 右にテキストを表示するためのHTMLをマークアップしていきます。シンプルなHTMLの構成にしました。
<div class="card-container">
<div class="card-img">
<a href="#"><img width="768" height="512" src="./images/smple.jpg" alt="" /></a>
</div>
<div class="card-text">
<a href="#"><h2>タイトル</h2></a>
<p>テキストが入る要素...</p>
</div>
</div>
HTMLのdivで画像とテキストをまとめておく親要素をマークアップして、子要素に画像とテキストをマークアップします。
親要素の中で子要素は2つ作成します。
画像を先にマークアップすることでCSSで横並びにしたときに親要素の中で左に画像が表示できます。上のHTMLの場合ならcard-imgのクラスを付与したdivが画像が入る子要素です。
画像を入れたcard-imgクラス付きのdiv子要素の下にはcard-textのようにクラスを付与したdivの子要素を記述します。この要素がCSSで左画像に対して右に表示するテキストの子要素になります。
画像はimgタグのsrc属性で表示したい画像パスを指定
テキスト内容はタイトルをh2タグ、文章をpタグでマークアップ
imgタグとh2タグはaタグで囲み、aタグのhref属性で指定するリンク先に飛べるようにします。
HTMLファイルを保存してブラウザで表示を確認すると上の画像のように画像の下に文字が配置された表示になります。
CSSで左に画像、右にテキストを横並びで表示する下準備の完成です。
CSSのflexboxで左に画像を右にテキストを横並び
HTMLでマークアップした画像とテキストの子要素を優しく包み込んでいる親要素のdiv(例：card-container)をCSSのセレクタにしてdisplay:flex:を指定します。
.card-container{
display:flex;
}
すると親要素をフレックスコンテナとして、コンテナ内にあるフレックスアイテムの画像とテキストの子要素がdisplay:flexの適用によって横並びになります。
左に画像が、そして右にテキストの配置で横並びになった表示結果は、継承する親要素の横サイズがなければブラウザの画面幅いっぱいに広がる横並びで表示します。
.card-container{
display:flex;
max-width: 750px;
height: 200px;
}
CSSで画像と文字を横に並べるときに、ブラウザ画面幅いっぱいにはあまり広げないかと思うのでCSSのmax-widthで750pxくらいの横幅、縦はheight: 200pxにしてみました。
この辺りからレイアウトの配置と表示の確認用にピンク色のボーダーを表示させて分かりやすくしています。
すると親要素のフレックスコンテナの縦横サイズを指定したため、画像とテキストは親要素から元気よくはみ出してしまいます。グレーとワインレッドの色したボーダー部分が親要素のボックス領域です。
はみ出したのは画像サイズが大きいためなので、CSSで親要素の左に画像が収まるように画像サイズの調整をします。
CSSでテキストの左に並べた画像サイズの調整
CSSでテキストの左に並べた画像サイズを調整するにはimgタグの親要素divに付与したcard-imgのクラスとimgを結合したCSSのセレクタにしてwidthの値を100%に、heightの値を100%で指定します。
.card-container{
display:flex;
max-width: 750px;
height: 200px;
margin: 20px auto;
}
.card-img img{
width:100%;
height:100%;
}
そしてCSSでテキストの左に並べた画像サイズの調整と共に、親要素のcard-containerのボックスにはマージンを縦20px、横をautoで指定します。
CSSファイルを保存してブラウザで表示確認すると、テキストの左に並べた画像のサイズが相対的に調整されimgタグを囲んでいるcard-img要素に収まります。
このときdisplay:flexで画像の右に並べたテキストもcard-text要素に収まります。
また親要素のセレクタ内にCSSのmargin: 20px auto;の指定も加えたため、左に画像を右にテキストを配置した親要素のボックスは、上下に20pxの余白を空けて横は中央寄せで横並びにすることができます。
右のテキストはCSSで画像との余白を作る
親要素内の左に表示した画像に対して、右に表示するテキストのボックス内では、HTMLでマークアップしたh2タグとpタグのテキストが右の画像寄りで配置されて見ずらくなってしまっています。
.card-container{
display:flex;
max-width: 750px;
height: 200px;
}
.card-img img{
width:100%;
height:100%;
}
.card-text{
width:100%;
margin: 20px;
}
そこで右のテキストを囲んでいる要素で付与しておいたcard-textクラスをCSSでセレクタにしてmargin: 20px;を記述して画像との余白を作ります。
ブラウザでの表示結果は上の画像のようにテキストのボックスに上下左右の20px分ずつのスペースができ、左に表示した画像との余白を作ることができます。
横並びで左に表示した画像のサイズをCSSで調整して、その画像に対して右のテキストのボックスもCSSで余白を持たせると、左に画像、右にテキストを構成する横並びのレイアウトは見栄えがよくなりす。
あとは好みや適宜で画像のボックスサイズを変えてみたり、テキストのボックスの背景色、aタグの下線を消す、リンクカラーを変更する、などをCSSでデザインします。
画像とテキストの横並びをCSSでレスポンシブ
CSSで左に画像、右にテキストを表示する横並びのレイアウトを組むことができてから、スマホでデザインの仕上がりを見ると右に表示したテキストが親要素のボックスからはみ出します。
テキストがはみ出してしまうのは、親要素のボックスの高さを絶対値のpx指定しているからです。
高さをauto指定にして見ると今度は文字数が異なる場合に不揃いのボックスサイズになってしまいます。
悩みましたが画像とテキストの横並びをCSSでレスポンシブにすることに挑戦しました。
挑戦とは言ってもフォントサイズをスマホ画面とPC画面の場合で切り替えるくらいです。
つまり「画像の横の文字をCSSでレスポンシブにする」のようなことです。
CSSで左に画像を右にテキストを配置した横並びレイアウトの基準フォントサイズをスマホサイズで記述していき、PC画面のサイズあたりからメディアクエリでフォントサイズのCSS適用を切り替えます。
そのためCSSでのメディアクエリの記述は@media screen and (min-width:600px)にしてみました。min-widthのサイズ600pxはだいたいで合わせています。
/*モバイルファースト*/
.card-container{
background: #333;
color: #fff;
display: flex;
margin: 20px auto;
width: 100%;
box-shadow: 0 12px 10px -6px rgba(0,0,0,.25);
}
.card-container a{
text-decoration: none;
color: #cddc39;
}
.card-text{
width:100%;
margin: 10px 20px;
}
.card-text h2{
padding-top: 10px;
font-size: 1em;
}
.card-text p{
font-size: 0.6em;
}
.card-img{
width: 80%;
}
img{
width:100%;
height:100%;
vertical-align:bottom;
}
/*PCサイズ*/
@media screen and (min-width:650px) {
.card-container{
max-width: 750px;
height: 200px;
}
.card-text h2{
font-size: 1.3em;
}
.card-text p{
font-size: 1em;
}
}上記のCSSが左に画像を右にテキストの横並びでレスポンシブにした今回の全ての記述です。またCSSとセットのHTMLが以下の記述です。
<div class="card-container">
<div class="card-img">
<a href="#"><img width="768" height="512" src="./images/smple.jpg" alt="" /></a>
</div>
<div class="card-text">
<a href="#"><h2>タイトル</h2></a>
<p>テキストが入る要素...</p>
</div>
</div>
レスポンシブにした左に画像、右にテキストの横並びのレイアウトで左側の画像だけはスマホ画面のときに上手く縮小できなくて少し間延びしてる感じがしてしまうので、もっと良いCSSの書き方を練習しておこうと思います。
