0

現象
出張 - Airbnb のページを模写しておりますが、サイト全体の上下左右に余白ができてしまいます。

ご教授よろしくお願いいたします。

画像の説明をここに入力

期待値
サイト全体の上下左右の余白を無くしたいです。

再現手順
下記コードを実行すると再現できます。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="reset" href="reset.css">
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <header>
        <div class="header-upper-row">
            <a href=""><img src="" alt=""></a>
            <a href="">日本語(JP)</a>
            <a href="">¥JPY</a>
            <a href="">ホストをはじめる</a>
            <a href="">ヘルプ</a>
            <a href="">登録する</a>
            <a href="">ログイン</a>
        </div>
        <div class="header-lower-tier">
            <h1>世界の果てまで、アット<br>ホーム</h1>
            <a href="">Airbnbビジネスプログラムの動画を見る</a>
            <form action="#" method="POST">
                <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                <input type="email" name="mail">
                <input type="submit" value="メールアドレスを追加">
            </form>
            <p>出張管理をご担当ですか?</p>
            <a href="#">もっと詳しく</a>
            <a href="#">停止</a>
        </div>
    </header>

    <div class="main">

        <div class="middle-1">
            <h1>最高の仕事に必要なものすべてを完備</h1>
            <div class="middle-1-item">
                <img src="./mosha_1_img/top_rated_homes.594e0eb1.jpg" alt="高評価の宿泊先&デザイナーズホテル">
                <p>高評価の宿泊先&デザイナーズホテル</p>
            </div>
            <div>
                <img src="./mosha_1_img/team_building_experiences.3f19ab77.jpg" alt="チームビルディング体験">
                <p>チームビルディング体験</p>
            </div>
            <div>
                <img src="./mosha_1_img/collaborate.57a5ee7e.jpg" alt="コラボを育むスペース">
                <p>コラボを育むスペース</p>
            </div>
        </div>

        <div class="middle-2">
            <div class="middle-2-image">
                <img src="./mosha_1_img/comfort_home.59ad50c8.jpg" alt="出張先でも、アットホーム">
            </div>
            <div class="middle-2-text">
                <h1>出張先でも、アットホーム</h1>
                <p>出張のときも、新天地に移動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
                <a href="#">仕事用スペースを完備した宿泊先を検索</a>
            </div>
        </div>

        <div class="middle-3">
            <div class="middle-3-image">
                <img src="./mosha_1_img/team_building_made_easy.c9d2a84f.jpg" alt="チームの心をひとつに">
            </div>
            <div class="middle-3-text">
                <h1>チームの心をひとつに</h1>
                <p>ラーメン作り教室やカヌーレッスンに参加。普段オフィスでは目にできない同僚たちの意外な面に触れ、深いレベルでつながれます。</p>
                <a href="#">Airbnbの「体験」を検索</a>
            </div>
        </div>

        <div class="middle-4">
            <div class="middle-4-image">
                <img src="./mosha_1_img/creativity.739950af.jpg" alt="創造力をかきたてるスペース">
            </div>
            <div class="middle-4-text">
                <h1>創造力をかきたてるスペース</h1>
                <p>煮詰まったら1日オフサイトで気分を変えてみませんか?ひらめきが湧く環境で、チームの生産性を高めましょう。</p>
                <a href="#">Wi-Fi完備の宿泊先を見る</a>
            </div>
        </div>

        <div class="middle-5">
            <div class="middle-5-text">
                <h1>安全第一のシステム</h1>
                <p>セキュアな支払いシステムから経験者のレビューまで、Airbnbは安全中心のシステムです。</p>
                <a href="#">もっと詳しく</a>
            </div>
            <div class="middle-5-text">
                <h1>グローバルカスタマーサポート</h1>
                <p>専門スタッフが、年中無休で営業時間内に11言語でサポートいたします。</p>
                <a href="#">もっと詳しく</a>
            </div>
        </div>

        <div class="middle-6">
            <div class="middle-6-image">
                <img src="./mosha_1_img/quote_image.c1dba850.jpg" alt="自炊">
            </div>
            <div class="middle-6-text">
                <p>「Airbnbは自活できるのがいいですね。毎晩外食しなくても、みんなで好きなものを料理できるし、とても出張とは思えないほど現地に根を下ろせます」</p>
                <p>MARTA KUTT様</p>
                <p>Transferwise社マネージャー</p>
            </div>
        </div>

        <div class="middle-7">
            <div class="middle-7-title">
                <h1>働き方を変えたいなら、Airbnbです</h1>
            </div>
            <div>
                <form action="#" method="post">
                    <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                    <input type="email" name="mail">
                    <input type="submit" value="メールアドレスを追加">
                </form>
            </div>
            <div class="middle-7-text">
                <p>出張管理をご担当ですか?</p>
                <p>こんなにある、Airbnbビジネスプログラム法人企業様のメリット。</p>
                <a href="#">もっと詳しく</a>
            </div>
        </div>

        <footer>
            <div class="company-information">
                <p>企業情報</p>
                <a href="#">Airbnbのご利用方法</a>
                <a href="#">ニュースルーム</a>
                <a href="#">Airbnb Plus</a>
                <a href="#">Airbnb Luxe</a>
                <a href="#">HotelTonight</a>
                <a href="#">Airbnbビジネスプログラム</a>
                <a href="#">オリンピック</a>
                <a href="#">採用情報</a>
            </div>
            <div class="community">
                <a href="#">ダイバーシティ&ビロンギング</a>
                <a href="#">アクセシビリティ対応</a>
                <a href="#">Airbnbアソシエイト</a>
                <a href="#">お友達を招待</a>
            </div>
            <div class="host">
                <a href="#">お部屋を掲載</a>
                <a href="#">オンライン体験をホストする</a>
                <a href="#">体験をホストする</a>
                <a href="#">CEOブライアン・チェスキーからのメッセージ</a>
                <a href="#">責任あるホスティング</a>
                <a href="#">オープンホーム</a>
                <a href="#">リソースセンター</a>
                <a href="#">コミュニティセンター</a>
            </div>
            <div class="support">
                <a href="#">新型コロナウイルスに関する最新情報</a>
                <a href="#">ヘルプセンター</a>
                <a href="#">キャンセルオプション</a>
                <a href="#">近隣コミュニティサポート</a>
                <a href="#">信頼&安全</a>
            </div>

            <div class="copyright-etc">
                <p>Airbnb Global Services Limited</p>
                <p>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</p>
                <p>© 2020 Airbnb,Inc. All rights reserved</p>
                <p>・</p>
                <a href="#">プライバシー</a>
                <p>・</p>
                <a href="#">利用規約</a>
                <p>・</p>
                <a href="#">サイトマップ</a>
                <p>・</p>
                <a href="#">企業情報</a>
            </div>
            <div class="japanese-jpy">
                <a href="#">日本語(JP)</a>
                <a href="#">JPY</a>
            </div>
            <div class="SNS-icons">

            </div>
        </footer>

    </div>
</body>
</html>

stylesheet.css

header {
    padding: 0px;
    background-image: url(./mosha_1_img/68f5f594-985e-48dc-8c82-ec1e090c6b3a.jpg);
    background-size: cover;
}

reset.css

* {
    margin: 0px;
    padding: 0px;
}
2
  • 1
    "模写" と仰いますが、特にコピーライト周りなどの文言を複製してそのままネット上に載せるのは色々と問題がありそうな気がします。 / 質問自体は「デザイン」に関してなのでしょうから、テキストや画像は適当なものに差し替えた方がよいのかなと思います。
    – cubick
    Commented 2020年9月4日 4:57
  • @cubick さん 承知しました。適当なものに差し替えます。ありがとうございます。
    – atago_IT
    Commented 2020年9月6日 0:46

1 件の回答 1

3

reset.css ファイルを読み込んでいる link 要素の rel 属性へ設定している値が、 stylesheet ではなく reset となっていることが原因です。rel 属性へ stylesheet という値を指定していない状態では、 reset.css ファイルは装飾用の外部ファイルであると認識されず、読み込まれません。次のように修正を施すことで、問題を解決出来ます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <header>
        <div class="header-upper-row">
            <a href=""><img src="" alt=""></a>
            <a href="">日本語(JP)</a>
            <a href="">¥JPY</a>
            <a href="">ホストをはじめる</a>
            <a href="">ヘルプ</a>
            <a href="">登録する</a>
            <a href="">ログイン</a>
        </div>
        <div class="header-lower-tier">
            <h1>世界の果てまで、アット<br>ホーム</h1>
            <a href="">Airbnbビジネスプログラムの動画を見る</a>
            <form action="#" method="POST">
                <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                <input type="email" name="mail">
                <input type="submit" value="メールアドレスを追加">
            </form>
            <p>出張管理をご担当ですか?</p>
            <a href="#">もっと詳しく</a>
            <a href="#">停止</a>
        </div>
    </header>

    <div class="main">

        <div class="middle-1">
            <h1>最高の仕事に必要なものすべてを完備</h1>
            <div class="middle-1-item">
                <img src="./mosha_1_img/top_rated_homes.594e0eb1.jpg" alt="高評価の宿泊先&デザイナーズホテル">
                <p>高評価の宿泊先&デザイナーズホテル</p>
            </div>
            <div>
                <img src="./mosha_1_img/team_building_experiences.3f19ab77.jpg" alt="チームビルディング体験">
                <p>チームビルディング体験</p>
            </div>
            <div>
                <img src="./mosha_1_img/collaborate.57a5ee7e.jpg" alt="コラボを育むスペース">
                <p>コラボを育むスペース</p>
            </div>
        </div>

        <div class="middle-2">
            <div class="middle-2-image">
                <img src="./mosha_1_img/comfort_home.59ad50c8.jpg" alt="出張先でも、アットホーム">
            </div>
            <div class="middle-2-text">
                <h1>出張先でも、アットホーム</h1>
                <p>出張のときも、新天地に移動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
                <a href="#">仕事用スペースを完備した宿泊先を検索</a>
            </div>
        </div>

        <div class="middle-3">
            <div class="middle-3-image">
                <img src="./mosha_1_img/team_building_made_easy.c9d2a84f.jpg" alt="チームの心をひとつに">
            </div>
            <div class="middle-3-text">
                <h1>チームの心をひとつに</h1>
                <p>ラーメン作り教室やカヌーレッスンに参加。普段オフィスでは目にできない同僚たちの意外な面に触れ、深いレベルでつながれます。</p>
                <a href="#">Airbnbの「体験」を検索</a>
            </div>
        </div>

        <div class="middle-4">
            <div class="middle-4-image">
                <img src="./mosha_1_img/creativity.739950af.jpg" alt="創造力をかきたてるスペース">
            </div>
            <div class="middle-4-text">
                <h1>創造力をかきたてるスペース</h1>
                <p>煮詰まったら1日オフサイトで気分を変えてみませんか?ひらめきが湧く環境で、チームの生産性を高めましょう。</p>
                <a href="#">Wi-Fi完備の宿泊先を見る</a>
            </div>
        </div>

        <div class="middle-5">
            <div class="middle-5-text">
                <h1>安全第一のシステム</h1>
                <p>セキュアな支払いシステムから経験者のレビューまで、Airbnbは安全中心のシステムです。</p>
                <a href="#">もっと詳しく</a>
            </div>
            <div class="middle-5-text">
                <h1>グローバルカスタマーサポート</h1>
                <p>専門スタッフが、年中無休で営業時間内に11言語でサポートいたします。</p>
                <a href="#">もっと詳しく</a>
            </div>
        </div>

        <div class="middle-6">
            <div class="middle-6-image">
                <img src="./mosha_1_img/quote_image.c1dba850.jpg" alt="自炊">
            </div>
            <div class="middle-6-text">
                <p>「Airbnbは自活できるのがいいですね。毎晩外食しなくても、みんなで好きなものを料理できるし、とても出張とは思えないほど現地に根を下ろせます」</p>
                <p>MARTA KUTT様</p>
                <p>Transferwise社マネージャー</p>
            </div>
        </div>

        <div class="middle-7">
            <div class="middle-7-title">
                <h1>働き方を変えたいなら、Airbnbです</h1>
            </div>
            <div>
                <form action="#" method="post">
                    <label for="mail">まずは仕事用メールアドレスの入力から</label><br>
                    <input type="email" name="mail">
                    <input type="submit" value="メールアドレスを追加">
                </form>
            </div>
            <div class="middle-7-text">
                <p>出張管理をご担当ですか?</p>
                <p>こんなにある、Airbnbビジネスプログラム法人企業様のメリット。</p>
                <a href="#">もっと詳しく</a>
            </div>
        </div>

        <footer>
            <div class="company-information">
                <p>企業情報</p>
                <a href="#">Airbnbのご利用方法</a>
                <a href="#">ニュースルーム</a>
                <a href="#">Airbnb Plus</a>
                <a href="#">Airbnb Luxe</a>
                <a href="#">HotelTonight</a>
                <a href="#">Airbnbビジネスプログラム</a>
                <a href="#">オリンピック</a>
                <a href="#">採用情報</a>
            </div>
            <div class="community">
                <a href="#">ダイバーシティ&ビロンギング</a>
                <a href="#">アクセシビリティ対応</a>
                <a href="#">Airbnbアソシエイト</a>
                <a href="#">お友達を招待</a>
            </div>
            <div class="host">
                <a href="#">お部屋を掲載</a>
                <a href="#">オンライン体験をホストする</a>
                <a href="#">体験をホストする</a>
                <a href="#">CEOブライアン・チェスキーからのメッセージ</a>
                <a href="#">責任あるホスティング</a>
                <a href="#">オープンホーム</a>
                <a href="#">リソースセンター</a>
                <a href="#">コミュニティセンター</a>
            </div>
            <div class="support">
                <a href="#">新型コロナウイルスに関する最新情報</a>
                <a href="#">ヘルプセンター</a>
                <a href="#">キャンセルオプション</a>
                <a href="#">近隣コミュニティサポート</a>
                <a href="#">信頼&安全</a>
            </div>

            <div class="copyright-etc">
                <p>Airbnb Global Services Limited</p>
                <p>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</p>
                <p>© 2020 Airbnb,Inc. All rights reserved</p>
                <p>・</p>
                <a href="#">プライバシー</a>
                <p>・</p>
                <a href="#">利用規約</a>
                <p>・</p>
                <a href="#">サイトマップ</a>
                <p>・</p>
                <a href="#">企業情報</a>
            </div>
            <div class="japanese-jpy">
                <a href="#">日本語(JP)</a>
                <a href="#">JPY</a>
            </div>
            <div class="SNS-icons">

            </div>
        </footer>

    </div>
</body>
</html>
1
  • ありがとうございます。解決できました!
    – atago_IT
    Commented 2020年9月6日 0:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。