top画像が画面を大幅に超える大きさで表示されてしまう。

Bootstrap5を使ってポートフォリオを作っています。

navの下に置いたtop画像が大幅にはみ出てしまいます。
これは何が原因なのでしょうか。
スクショして添付しようとしたのですが、ファイルサイズが大きすぎるとのことで一旦なしにしました。

<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>ポートフォリオ</title>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-white">
            <div class="container">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Welcome</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">About me</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Service</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Skill</a>
                            </li>                            
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Work</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Contact</a>
                            </li>                            
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <section class="top">
        <img src="daniil-silantev-sN4u56baSB0-unsplash.jpg" alt="top">
    </section>

    <section class="about me"></section>
    <section class="service"></section>
    <section class="skill"></section>
    <section class="work"></section>
    <section class="contact"></section>
    <footer></footer>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
</body>

</html>

@charset "UTF-8";

.top {
    background-size: cover;
}

それともこれはコード云々より、画像サイズが大きすぎるせいなのでしょうか。
初歩的なことをお聞きして見苦しいかと思いますが、何かアドバイスをいただけるとありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

恐らく勘違いしておられます。
background-size: cover;は背景に当てるCSSです。
※背景画像をCSSで指定した際に使用することがほとんど※

下のように記述してあげると多少マシになると思います。

CSS
1.top img {
2 width: 100%;
3 max-width: 100vw;
4}

画像追加、上手く当たっていないし数値も適当だけども※teratailのCSSが複雑？

投稿2021/03/24 01:11

編集2021/03/24 02:02

退会済みユーザー

総合スコア0

Katy6879

2021/03/24 01:20

amiya-seさん、アドバイスいただきありがとうございます！早速HTMLは触らずにCSSを上記されていた通りに書き換えてみましたが、変化なしでした。スペルミスがあるのか、もう少し調べてみます。

Katy6879

2021/03/24 01:22

調べてると、「サイトで使う画像は必ず圧縮してから」と言う記載を見つけました。圧縮して試してみます！

退会済みユーザー

2021/03/24 01:25 編集

＠muku877様 <img src="daniil-silantev-sN4u56baSB0-unsplash.jpg" alt="top"> 検証ツールで上記要素にどんなCSSが当たっているのか？確認してみてください。 chromeですとF12で検証ツールが開きます。追記です圧縮するのはページを開く際に速度がアップするので良いことなのですが、 CSSで指定できない原因とは考えにくいため、優先度の高いCSSの記述が適用されていないかどうか確認してみてくださいね。

Katy6879

2021/03/24 01:34

早速検証ツールでみてみたところ、こうなっていました。 img, svg { vertical-align: middle; } *, ::after, ::before { box-sizing: border-box; } 圧縮はそうゆう効果があるのですね、確かに試しても変化なしでした。ちなみに画像サイズが4000✖️3000ほどあるのですが、原因に関係ありそうでしょうか？

退会済みユーザー

2021/03/24 01:39

＠muku877様上のコメントにも追記いたしましたが、「CSSで指定できない原因とは考えにくい」です。検証ツールでimgにmax-width:100vw;を当てることはできますか？要素の最大幅を画面と同じ大きさまでと指定する記述になります ※注意点としてスクロールバー含みます。

Katy6879

2021/03/24 01:47

同じことを何度も言わせてしまって申し訳ありません！原因になり難いと言うことはわかったと思います。検証ツールでおっしゃるように入力したらすっぽり収まりました！！これを自分のコードでも反映させるには、 img, svg { vertical-align: middle; } *, ::after, ::before { box-sizing: border-box; } ここをCSSに記載すれば良いのでしょうか。

Katy6879

2021/03/24 01:57

このまま載せてもうまくいきませんでした。今更ですが、基本が理解できてないのだと思います。もう一度よく調べてみます。それでもダメだったら、再度コメントさせていただけると嬉しいです。大変勉強になりました！お忙しい中、ありがとうございました＾＾

退会済みユーザー

2021/03/24 02:05 編集

element.styleという文字を探していただいて、その中に記述してください。回答に画像追加しておきますね～追記です行き違いですっ htmlのタグの中に直接styleを書く方法や、強制的にCSSを効かせる!importantなんていうのもありますので、探してみて下さいね。ふぁいとぉー午後３時以降にまたチェックさせていただきますね～ではではっ

Katy6879

2021/03/24 05:29

添付いただいた画像をもとに、何とか理想の形にできました！ amiya-seさんのおっしゃったように、htmlのタグの中に直接styleを書く方法を試しました。 top画像は１枚のみですし、本当はCSSに入れる方がいいのだとは思うのですが、今回はひとまずこれで進もうと思います。本当に助かりました！＾＾

Katy6879

2021/03/24 05:30

フォローまでありがとうございます！！！

K_3578

2021/03/24 05:38

横槍失礼します。 <style>タグを使って直接書き込む方法にはメリット・デメリットがあります。これについては過去質問の回答にとても参考になるものがあったので記載しておきます。 https://teratail.com/questions/4394#reply-6032 !importantに関しては優先順位を無視して効かせる事が出来ますがその結果別の場所でstyleが適用されない等のデメリットがありますので基本的には使わないことをおすすめします。

退会済みユーザー

2021/03/24 09:03

K_3578様が注意喚起してくれているので僕の見解を補足しておきますね。貼っていただいた参考URLによると3つデメリットがあるとのことですが、「TOPのFVだけに絞る」のであれば気にしなくて良いかなと。 !importantに関しては、bootstrapの中で良く記述を見かけたので、 bootstrap使いながらCSSをカスタムするにはほぼ必須になるのかなぁと。以下蛇足です。※僕感想チラシ裏 bootstrapのclass足しながら使い始めてみたけど、正直使わない方が組むの早い。経験値が貯まってどこかで効率が逆転することを期待しているけども、デザインの段階でbootstrapをかなり意識してくれていないと無駄が多いかなという印象です。

K_3578

2021/03/24 09:11

@amiya-seさん補足助かります。私はBootstrapというか、フロントエンド部分テキトー人間なので精々こういう当然の注意喚起ぐらいしかできないのです。(じゃあバックエンド部分こだわってるかというとそうでもないんですが)

退会済みユーザー

2021/03/24 09:17

＠K_3578様注意喚起助かります。テキトーで問題無いのですっ、動けば正義ですよー

K_3578

2021/03/24 09:19

@amiya-seさん因みにテキトーなコードを生み出すと大体後にコードを見直した自分に返ってきて「なんだこのクソコードは･･･。」ってなります

退会済みユーザー

2021/03/24 09:36

@K_3578様あるあるですね～、まぁそれも成長を実感できてよろしいかと？さてさて、そろそろ自重しますよーではではっ

Katy6879

2021/03/25 12:17

amiya-seさん、K_3578さん、コメントの確認が遅くなってしまい、申し訳ありません！お二方とも、参考資料のご提供と実践的なアドバイスを、本当にありがとうございます。少し訳を話しますと、このポートフォリオ作りは今受講中の課題でして、HTML/CSS、Bootstrapを使うことというものなのです＾＾講師の方も、Bootstrapをフルに使って仕事をするのはあまり実践的ではなく、Gridだけ使うなど一部の機能を使う機会の方が多いと話していました。 styleタグ。使わない前提の心構えでいき、もし直接書き込むときはメリットとデメリットを踏まえて活用していこうと思います。コーディング自体はまだ楽しめている段階なので、早くひよっこを脱出できるように、努力します！

行動規範の内容に同意します