HTMLとCSSで画像の横にテキストを縦並びにする3つの方法
2024-04-02
HTMLとCSSを使用して、画像の横にテキストを垂直方向に配置するにはいくつかの方法があります。ここでは、代表的な3つの方法を紹介します。
方法1: imgタグのalign属性
最も簡単な方法は、imgタグのalign属性を使用する方法です。align属性には、top、middle、bottomの3つの値を指定できます。
<img src="image.jpg" align="top">
<p>テキスト</p>
この例では、画像の上部にテキストが配置されます。
方法2: CSSのvertical-alignプロパティ
vertical-alignプロパティを使用すると、より細かい制御が可能です。vertical-alignプロパティには、以下の値を指定できます。
baseline: テキストのベースラインを基準に配置します。top: 要素の上端に配置します。middle: 要素の中央に配置します。
<img src="image.jpg" style="vertical-align: middle;">
<p>テキスト</p>
方法3: CSSのFlexbox
Flexboxは、要素を柔軟にレイアウトするためのCSSレイアウトシステムです。Flexboxを使用すると、画像とテキストを簡単に垂直方向に配置できます。
<div class="container">
<img src="image.jpg">
<p>テキスト</p>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
この例では、画像とテキストが垂直方向に中央揃えされます。
それぞれの方法のメリットとデメリット
| 方法 | メリット | デメリット |
|---|---|---|
imgタグのalign属性 | 簡単 | 詳細な制御ができない |
CSSのvertical-alignプロパティ | 詳細な制御が可能 | 古いブラウザではサポートされない |
| CSSのFlexbox | 柔軟なレイアウトが可能 | 他の方法より複雑 |
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像の横にテキストを垂直方向に配置</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg">
<p>テキスト</p>
</div>
</body>
</html>
CSS
.container {
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 200px;
}
実行結果
ポイント
imgタグのwidth属性で画像の幅を指定しています。.containerクラスのflex-directionプロパティで、Flexboxレイアウトの並び方を縦方向に設定しています。
応用
- 画像とテキストの間隔を調整したい場合は、
marginプロパティを使用します。 - 画像とテキストの配置を左右に反転したい場合は、
flex-directionプロパティをrowに設定します。 - 画像とテキストのレイアウトをもっと細かく制御したい場合は、Flexboxの他のプロパティも使用できます。
画像の横にテキストを垂直方向に配置するその他の方法
方法4: CSSのpositionプロパティとmarginプロパティ
positionプロパティとmarginプロパティを使用すると、画像とテキストを自由に配置できます。
<img src="image.jpg" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%);">テキスト</p>
img {
width: 200px;
}
この例では、画像とテキストをそれぞれ絶対配置し、transformプロパティで中央に配置しています。
方法5: CSS Grid
<div class="container">
<img src="image.jpg">
<p>テキスト</p>
</div>
.container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
img {
width: 200px;
}
この例では、画像とテキストをグリッドレイアウトに配置し、align-itemsプロパティで垂直方向に中央揃えしています。
| 方法 | メリット | デメリット |
|---|---|---|
CSSのpositionプロパティとmarginプロパティ | 自由な配置が可能 | 複雑 |
| CSS Grid | 簡単にレイアウトできる | 古いブラウザではサポートされない |
html css alignment
