

ずらして重ねるレイアウトの作り方がわからない
そんな悩みにお答えします。
あえてレイアウトを崩すブロークングリッドなレイアウトのデザインってとても多いです。
だからコーディングする者としては要素をずらす、重ねる方法はいくつも手駒にしておく必要があります。
今回はpositionプロパティを使った方法を紹介します。
画像の上に要素をずらして重ねる
今回作るのはこちらです。
よくあるタイプのレイアウトです。
HTML
<div class="container">
<div class="picture">
<img src="img/husky02.jpg">
</div>
<p class="text">シベリアン・ハスキーは、スピッツ族に属する犬種で、エスキモー犬の一種。<br>黒、黒青色、茶褐色、白までさまざまな色があり、真っ白なシベリアン・ハスキーはホワイト・ハスキーと呼ばれています。<br>また、どの色もお腹だけは白いものが多いです。</p>
</div>
HTMLはごく普通に画像とテキストを並べただけです。
CSS
img {
width: 100%;
height: auto;
}
.container {
max-width: 900px;
width: 100%;
margin: 100px auto;
position: relative;
}
.picture {
width: 50%;
position: relative;
}
.picture::after {
content: " ";
position: absolute;
right: -30px;
bottom: -30px;
width: 100%;
height: 100%;
background-color: #C0C0C0;
z-index: -1;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 60%;
line-height: 1.8;
font-size: 20px;
color: #fff;
background: #00CC99;
padding: 30px;
}
今回ずらして重ねる箇所が2つあります。
1つは画像と背景色、もう1つは画像とテキストです。
まず画像と背景色をずらして配置しているのはpositionプロパティと疑似要素を使っています。
この方法は以前に記事にしていますのでご参照ください。
次に画像とテキストはpositionプロパティで配置しています。
テキストを画像の縦に対して中央に配置するため「top: 50%;」「transform: translateY(-50%);」と指定します。
また「right: 0;」「width: 60%;」と指定することで画像に重なるようになります。
今回はpositionプロパティでの方法を紹介しました。
positionプロパティが今いちよくわからないという方、「transform: translateY(-50%);」ってどういう意味?っていう方はこちらをご覧ください。
【初心者】position「relative」「absolute」を理解する方法
要素を重ねる方法は他にもネガティブマージンを使う方法やグリッドを使う方法などがあります。
いろんな方法を知っておきたいですね。
以上です。
投稿者 トシ
コメントを残す