@akisasaposted at 2024-10-17

ファーストビューのレスポンシブについて

Q&A

Closed

HTML CSS

解決したいこと

ファーストビューのレスポンシブ対応で
うまくいい表現が思いつかないですが、
全体を表示したまま高さを拡大縮小する方法を教えていただきたいです。

例）
https://minoh-greenvilla.jp/
上記のサイトで検証ツールを用いると
全体を表示したまま、高さを拡大縮小できています。

自分で試したこと

width: auto;
height: 100vh;
で記述してみましたが、全体を表示したまま高さだけ縮小してくれません。

1Answer

@benjuwan posted at 2024-10-17

background-imageとbackground-size:coverとか使ってみては？と思いながら参考サイトを見に行くと、そのような記述になっていました。

※参考サイトではbackgroundショートハンドで記述していました。
当該場所のスタイルは以下のようになっています。

.top_mv_slide ._slide3 {
    background: url(../images/top_mv_slide3.jpg) no-repeat center right 20% / cover;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

// ブラウザ幅が768pxに至るまでは以下のスタイル（=スマホや一部のタブレットでの表示仕様）
@media (max-width: 768px) {
    .top_mv_slide ._slide3 {
        background: url(../images/top_mv_slide3_sp.jpg) no-repeat center / cover;
    }
}

「全体を表示したまま高さを拡大縮小する」方法のポイントは以下になると思います。

.top_mv_slide ._slide3のbackgroundで指定しているcover
.swiper-slideで指定しているwidth: 100%;, height: 100%;（ファーストビューの高さいっぱいを希望するならheight: 100%;はheight: 100vh;でも良いかも）

実際、参考サイトにある当該要素（スライダー画像3枚目）のclassはclass="_slide3 swiper-slide swiper-slide-visible swiper-slide-active"となっており、上記スタイルの._slide3と.swiper-slideが該当しているのが分かるかと思います。

余談ですがスライダーはswiperのverticalを使っているみたいですね。

3Like

Comments

@akisasa

Questioner

ありがとうございます。

アドバイスしていただいた事を参考にしたところ
想定していた通りの動作になりました。

以下参考を元に記述したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファーストビューのレスポンシブ対応</title>
    
    <style>
        body {
            margin: 0;
        }

        .container {
            width: auto;
            height: auto;
        }

        .main-visual {
            width: auto;
            height: auto;
        }

        .image{
            background: url(./images/main.png) no-repeat center / cover;
        }

        .catch-copy{
            flex-shrink: 0;
            width: 100vw;
            height: 100svh;
            position: relative;
        }

        .catch-copy h2 {
            width: auto;
            height: auto;

        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>ヘッダー</h1>
        </header>
        <div class="main">
            <div class="contents">
                <section class="main-visual">
                    <div class="image">
                        <div class="catch-copy">
                            <h2>
                                テキスト<br>
                                テキスト
                            </h2>
                        </div>
                    </div>
                </section>
                <section>
                    <h2>テキスト<h2>
                    <p>テキスト</p>
                </section>
            </div>
        </div>
        <footer>
            <p>フッダー</p>
        </footer>
    </div>
</body>
</html>

@benjuwan
@akisasa さん

無事に解決したようで何よりです。良かったです。
お手数ですが、他の回答者への配慮から解決した場合は質問をクローズしていただくようお願いいたします。
@akisasa
Questioner
分かりました。
質問をクローズさせて頂きます。

Are you sure you want to delete the question?