HTML/CSS 画像の横に文字を並べる＆パターン2種
HTMLとCSSを使って画像の横に文字を並べる方法と並べ方を紹介します。
1. 画像＋テキスト
See the Pen
css image+text 01 by kura (@kuranopen)
on CodePen.
HTML
<div class="flex">
<figure class="image"><img src="https://picsum.photos/id/237/960/540" alt=""></figure>
<p class="text">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
</div>
CSS
/* 横並び */
.flex {
display: flex; /*横並び*/
}
.flex .image {
width: 640px; /*画像サイズ指定*/
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.flex .text {
margin: 0 0 0 20px;
padding: 0;
}
2. 画像＋タイトル＋テキスト
See the Pen
css image+text 01 by kura (@kuranopen)
on CodePen.
HTML
<div class="flex">
<figure class="image"><img src="https://picsum.photos/id/237/960/540" alt=""></figure>
<div class="right">
<p class="title">タイトルタイトルタイトル</p>
<p class="text">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
</div>
</div>
CSS
/* 横並び */
.flex {
display: flex; /*横並び*/
}
.flex .image {
width: 640px; /*画像サイズ指定*/
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.flex .right {
margin: 0 0 0 20px;
padding: 0;
}
.flex .title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 18px;
}
.flex .text {
margin: 10px 0 0;
padding: 0;
}
3. 画像＋タイトル＋テキスト（画像中央表示）
See the Pen
css image+text 01 by kura (@kuranopen)
on CodePen.
画像が縦に長い場合は画像が縦長に表示されてしまいますが、天地中央表示を行えば、比率を維持したまま画像を表示できます。
HTML
<div class="flex">
<figure class="image"><img src="https://picsum.photos/id/237/960/540" alt=""></figure>
<div class="right">
<p class="title">タイトルタイトルタイトル</p>
<p class="text">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
</div>
</div>
CSS
/* 横並び */
.flex {
display: flex; /*横並び*/
}
.flex .image {
width: 640px; /*画像サイズ指定*/
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.flex .right {
margin: 0 0 0 20px;
padding: 0;
}
.flex .title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 18px;
}
.flex .text {
margin: 10px 0 0;
padding: 0;
}
/* 画像を天地中央表示 */
.flex .image {
overflow: hidden;
position: relative;
}
.flex .image::before {
content: "";
display: block;
padding-top: 58%;
}
.flex .image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
画像の横に文字を並べる方法
1. 必要な要素を用意
必要なHTMLの要素を用意。
<div class="flex">
<figure class="image"><img src="https://picsum.photos/id/237/960/540" alt=""></figure>
<p class="text">ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります</p>
</div>2. 要素を横に並べる
要素を横に並べるdisplay: flexを指定。
.flex {
display: flex; /*横並び*/
}
3. レイアウト、サイズ調整
レイアウトとサイズを調整するためのCSSを追加します。
.flex {
display: flex; /*横並び*/
}
.flex .image {
width: 640px; /*画像サイズ指定*/
margin: 0;
padding: 0;
}
.flex .text {
margin: 0 0 0 20px;
padding: 0;
}
4. 画像を天地中央に表示
最後におまけで画像を天地表示するためのCSSを追加します。
/* 横並び */
.flex {
display: flex; /*横並び*/
}
.flex .image {
width: 640px; /*画像サイズ指定*/
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.flex .text {
margin: 0 0 0 20px;
padding: 0;
}
/* 画像を天地中央表示 */
.flex .image::before {
content: "";
display: block;
padding-top: 58%;
}
.flex .image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
