こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSで二つ並んだ要素の一部を重ねて表示する方法をご紹介しています。

具体的には下記のデモのような表示となります。左に表示されている画像に重なる形で、右のテキストを内包するボックスが重なって表示されているかと思います。

DEMO

See the Pen
WNbLVoM by ryohei (@intotheprogram)
on CodePen.

いかがでしょうか。

デモでは画像とテキストを重ねて表示していますが、画像と画像、テキストと図など様々なコンテンツに応用できます。汎用的に使えるデザインですので覚えておいて損はないかと思います。

では、解説していきます。

二つ並んだ要素の一部を重ねる

まずはHTMLから作成していきます。ボックスの中に重ねて表示するための二つの要素を設置するイメージで記述します。

HTML

<div class="box">
    <div class="box-left">
        <img src="https://picsum.photos/400/400" alt="">
    </div>
    
    <div class="box-right">
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
</div>

以上でHTMLは準備完了です。

続いてCSSでスタイルを定義していきます。重ねる要素の親となる「box」に対して「position: relative」を定義し、上に重ねる要素に「position: absolute」を定義します。そうすることで要素同士を重ねることができます。

SCSS

.box {
    position: relative;
    width: 600px;
    height: auto;
    margin: 0 auto;
    
    .box-left {
        width: 400px;
        height: 400px;
    }
    
    .box-right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 300px;
        height: auto;
        line-height: 1.5;
        padding: 20px;
    }
}

最後に

いかがでしたでしょうか。

二つ並んだ要素を重ねて表示する方法はサイトのジャンル問わずに使用することができます。実装も簡単ですし、本記事でご紹介した内容に少しスクリプトを追加してフェードインで表示、なんていう表現も方法もありますので、サイトの制作の際にぜひ活用してくださいね。

以上、CSSで二つ並んだ要素の一部を重ねて表示するテクニックのご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら