今回は、CSSを使って画像の横に縦書きのテキストを表示する方法を解説します。
◆まずはデモページをご覧ください。
デモページを見る
テキストを右と左の交互に表示する形式にしています。
HTML
<div class="container">
<div class="image_text">
<div class="dog box">
<div class="image"><img src="img/01.jpg"></div>
</div>
<div class="cat box">
<div class="image"><img src="img/02.jpg"></div>
</div>
</div>
</div>
CSS
.container {
width: 900px;
text-align: center;
margin: 100px auto;
}
.image_text {
position: relative;
}
.image_text .image::before {
position: absolute;
color: #999;
font-size: 5.0rem;
writing-mode: vertical-rl;
}
.image_text .dog .image::before {
content: "いぬ";
}
.image_text .cat .image::before {
content: "ねこ";
}
.image_text .box:nth-child(2n+1) .image::before {
right: 0px;
}
.image_text .box:nth-child(2n) .image::before {
left: 0px;
}
「writing-mode: vertical-rl;」は縦書きの指定です。
「nth-child(2n+1)」は奇数を指定し、「nth-child(2n)」は偶数を指定しています。
奇数の項目は右に、偶数は左にテキストを表示する指定で、「px」で位置を調整できます。