【CSS】画像に要素を重ねるレイアウトを複数縦に並べる方法

こんにちは、ジョージです！

今日は、画像に要素を重ねるレイアウトを複数縦に並べる方法をご紹介していきます！

もちろんレスポンシブ対応です！

複数ではなく1つだけのレイアウトについてはこちらの記事を参照ください。

複数縦に並べる場合

画像に要素を複数重ねた場合の見え方はこのページのようになります。

単純に同じ要素を縦に積んだだけでは要素の幅が小さくなった時に重なっている要素がさらに重なるという結果になってしまいます。

これは綺麗に表示できていませんね。

これをそれぞれの要素を離して表示させるためにはCSSの記述を少し変更する必要があります。

横幅を狭めた時に要素同士が重なってしまうので、横幅が狭くなった時に要素の大きさを変更してあげるか、要素同士を離して表示してあげれば解決できそうですよね。

今回の場合、以下の記述のようにboxクラスのついているsectionタグで画像とテキストの要素を囲んでいます。

<section class="box">
  <img src="images/450x300_1.jpg" alt="">
  <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</section>

このboxクラスのCSSを変更してあげればうまくいきそうですね。

というわけで、このboxクラスの高さを変更した場合とboxクラス同士を離した場合の記述を確認していきます。

boxクラスの高さを変更した場合

ではまず、boxクラスの高さを変更した場合の記述を書いていきます。

boxクラスには以下のようにCSSで記述をしています。

.content .box {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 400px;
}

これに、横幅が狭くなった時に高さを100px増やすような記述をしていきます。

@media only screen and (max-width: 600px){
    .content .box{
        position: relative;
        width: 100%;
        padding: 2%;
        box-sizing: border-box;
        height: 500px;
    }
}

上記の記述は、ブラウザの横幅が600px以下になった場合に適応するCSSとなります。boxクラスが1つだけのレイアウトの時と内容はほぼ同じです。ただ、heightが追加されていると言う点が異なります。

元々のheightの値が400pxでしたが、これを500pxにすることで、boxクラスの要素の高さが増え、boxクラス同士の重なりを回避することができます。

boxクラスの高さを変更した場合のサンプルページはこちらになります。

boxクラス同士を離した場合

次に、boxクラス同士を離した場合の記述を書いていきます。

boxクラス同士を離す為にはCSSのmarginプロパティを使っていきます。

先ほどと同じですが、boxクラスには以下のようにCSSで記述をしています。

.content .box {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 400px;
}

これに、横幅が狭くなった時にboxクラスにmarginが追加されるように以下の記述をCSSに追加します。

@media only screen and (max-width: 600px)
.content .box {
    position: relative;
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    margin: 100px auto 0;
}

上記の記述は先ほどと同じように、ブラウザの横幅が600px以下になった場合に適応するCSSとなります。boxクラスが1つだけのレイアウトの時と内容はほぼ同じで、marginが追加されていると言う点が異なります。

元々のheightの値が400pxでしたが、これを500pxにすることで、boxクラスの要素の高さが増え、boxクラス同士の重なりを回避することができます。

boxクラス同士を離した場合のサンプルページはこちらになります。