質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

250閲覧

背景画像とブラウザの間に隙間ができる

ryoji-1811

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2018/09/30 08:34

今、リンク内容このサイトの模写を行なっているのですが、ブラウザと背景画像の周りに小さな隙間ができてしまいます。隙間を消すためにはどうすれば良いでしょうか?

それと、右にあるメニューを見本通りに配置するにはどうすれば良いでしょうか?合わせてご回答お願いいたします。

<html> <head> <meta chaset="utf-8"> <title>PAS_POL</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="header-logo"> <img src="img/siteLogo-pc@2x.png" class="logo"> </div> <div class="header-list"> <ul> <a href="#"><li>TOP</li></a> <a href="#"><li>PRODUCT</li></a> <a href="#"><li>ABOUT</li></a> <a href="#"><li>NEWS</li></a> <a href="#"><li>CONTACT</li></a> </ul> </div> </header> <main> <div class="travel-container"> <div class="text"> </div> </div> <div class="product"></div> <div class="news"></div> <div class="share"></div> <div class="footer-buttom"></div> </main> <footer></footer> </body> </html> コード
body{ list-style: none; } .header{ height:790px; background-image: url("../img/main_visual_7-0x0.jpg"); width:100%; } .logo{ width:226px; height:72px; margin:50px 336px 0 100px; float:left; } .header-list{ float:right; } .header-list li{ color:white; float:left; margin-right: 25px; list-style: none; font-size:14px; } .travel-container{ height:916px; background-color:rgb(157, 56, 26) ; } .product{ height:1257px; background-color: rgb(21, 167, 35); } .news{ height:2193px; background-color:rgb(40, 49, 175) ; } .share{ height:116px; background-color:rgb(227, 22, 139) ; } .footer-buttom{ height:87px; background-color:rgb(51, 20, 9) ; } footer{ height:159px; background-color:rgba(26, 66, 51, 0.63) ; } コード

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

メニューも質問にありましたね・・見落としてました
模写元のサイトを見ると、marginで制御している様です

.header-list{
float:right;
margin-top: 75px;  /* 追加 /
margin-right: 7%; /
追加 */
}

詳しく見ていないので、同じになるかどうかわかりませんが・・

投稿2018/09/30 10:30

miyakichi

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

CSSのbody部にmarginのリセットを追加してみてはどうでしょうか?

body{
list-style: none;
margin:0; /* margin:0 を追加 */
}

投稿2018/09/30 08:44

miyakichi

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoji-1811

2018/09/30 08:51

隙間が無くなりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問