画像を横幅いっぱいに広げる
D15で作成した「Dog Company」のページを画面全体に表示させます。
Brackets ➡ ファイル ➡ フォルダーを開く／16full-dog
01 containerをDelete
<body>の下にある<div class="container">を消します。
<script src="script.js"></script>の上にある</div>を消します。
HTML
<body>
<div class="container">
</div>
<script src="script.js"></script>
</body>
プレビューして見ると全体が画面全体に広がったのがわかります。
containerの再設定
ナビゲーションメニューや文章などを別々に「container」に入れて中央に再設定します。
02 headerの再設定
<header>内に「container」を入れて「header-inner」を囲みます。
HTML
<header>
<div class="container">
<div class="header-inner">
<h1>Dog Company</h1>
<button class="hamburger" id="mobile-menu"></button>
</div>
</div>
</header>
03 navの再設定
<nav>内に「container」を入れて「navbar」を囲みます。
<nav>の下へ<div class="container">
</nav>の上へ</div>
HTML
<nav>
<div class="container">
<ul class="navbar">
<li><a href="index.html">トップ</a></li>
<li><a href="second.html">会社案内</a></li>
<li><a href="second.html">製品案内</a></li>
<li><a href="second.html">サポート</a></li>
<li><a href="second.html">お問い合わせ</a></li>
</ul>
</div>
</nav>
04 画像を入れなおす
今回は画像を<main>の中に入れません。
</nav>の下へ<p>～</p>を消して画像を入れなおします。
width="100%" にしてください。
HTML
</nav>
<img src="images/topimg.jpg" width="100%" alt="dog company">
<main>
05 mainの再設定
<main>内に<div class="container">を入れます。
<main>の下へ<div class="container">
</main>の上へ</div>
HTML
<main>
<div class="container">
コンテンツ
</div>
</main>
06 CSSを変更
最後にbodyのbackground-colorを「white」変更して完成です。
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
background-color: white;
}