ウェブデザインにおいて、テキストと写真を交互に配置することで、ページの視覚的な魅力を高め、読者の関心を引きつけることができます。今回は、CSSを使ってこのレイアウトを実現する方法をご紹介します。以下では、FlexboxとGridを使用した方法を解説します。
Flexboxを使用した方法
Flexboxを使うと、柔軟かつ簡単にレイアウトを調整できます。ここでは、テキストと写真を交互に配置するための基本的なコード例を示します。
<!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;
gap: 10px;
}
.row {
display: flex;
justify-content: space-between;
gap: 10px;
}
.row:nth-child(odd) .text {
order: 1;
}
.row:nth-child(odd) .image {
order: 2;
}
.row:nth-child(even) .text {
order: 2;
}
.row:nth-child(even) .image {
order: 1;
}
.text, .image {
flex: 1;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="text">
<p>テキスト1</p>
</div>
<div class="image">
<img src="photo1.jpg" alt="写真1">
</div>
</div>
<div class="row">
<div class="text">
<p>テキスト2</p>
</div>
<div class="image">
<img src="photo2.jpg" alt="写真2">
</div>
</div>
<!-- さらに続ける -->
</div>
</body>
</html>サンプル
テキスト1
テキスト2
Gridを使用した方法
CSS Gridは、より複雑なレイアウトにも対応できる強力なツールです。以下は、Gridを使ってテキストと写真を交互に配置する例です。
<!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: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: center;
}
.item {
padding: 10px;
box-sizing: border-box;
}
.text-odd, .image-even {
grid-column: 1 / 2;
}
.image-odd, .text-even {
grid-column: 2 / 3;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item text-odd">
<p>テキスト1</p>
</div>
<div class="item image-odd">
<img src="photo1.jpg" alt="写真1">
</div>
<div class="item image-even">
<img src="photo2.jpg" alt="写真2">
</div>
<div class="item text-even">
<p>テキスト2</p>
</div>
<!-- さらに続ける -->
</div>
</body>
</html>サンプル
テキスト1
テキスト2
レスポンシブデザインへの対応
レスポンシブデザインに対応するために、メディアクエリを使用して画面サイズに応じたレイアウトを実現できます。以下は、Flexboxの例をレスポンシブ対応させたものです。
<!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;
gap: 10px;
}
.row {
display: flex;
justify-content: space-between;
gap: 10px;
}
.row:nth-child(odd) .text {
order: 1;
}
.row:nth-child(odd) .image {
order: 2;
}
.row:nth-child(even) .text {
order: 2;
}
.row:nth-child(even) .image {
order: 1;
}
.text, .image {
flex: 1;
}
img {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.text, .image {
order: unset;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="text">
<p>テキスト1</p>
</div>
<div class="image">
<img src="photo1.jpg" alt="写真1">
</div>
</div>
<div class="row">
<div class="text">
<p>テキスト2</p>
</div>
<div class="image">
<img src="photo2.jpg" alt="写真2">
</div>
</div>
<!-- さらに続ける -->
</div>
</body>
</html>このコードでは、画面幅が768px以下になると、各アイテムが100%の幅を取るように設定しています。
サンプル
テキスト1
テキスト2
まとめ
FlexboxとGridを使って、テキストと写真を交互に配置する方法をご紹介しました。どちらの方法も簡単に実装でき、デザインの自由度が高いです。ぜひ、お好みの方法で魅力的なウェブページを作成してみてください。
