Q&A
書いたコードを掲載すると回答を得られやすくなるかもしれません。
CSSについてなのですが、
ヘッダーの画像をプラウザビューにくっつけたいのですが、このようにくっつきません。
どうすれば上はプラウザビューにくっつきますか？
HTMLとCSSのコードはこんな感じです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<header> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"> 5 <h1 class="title">Hiro's site</h1> 6 <style type="text/css"><!-- 7body { margin:0px; } 8 --></style> 9</header> 10<section> 11<h2>このサイトについて<h2> 12 <p> 13</section> 14</html>
CSS
1@charset "UTF-8"; 2html { 3 background-image: url(SunBeams.png); 4 -webkit-background-size: cover; 5 -moz-background-size: cover; 6 -o-background-size: cover; 7 background-size: cover; 8 background-attachment: fixed; 9} 10.title { 11 color: orange; 12 background-image: url(HiroHeader.jpg); 13 width: 1350px; 14 height: 250px; 15 padding-top: 100px; 16 padding-left: 50px; 17 text-align: center;; 18 background-position: center; 19 background-image: url(HiroHeader.jpg); 20 21 22 23 24 25 26}
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、HTMLも追記ください。構造がわかりません。
回答2件
0
ベストアンサー
余分なmarginがかかっているせいだと思うので、以下のようにしてmarginを0にすればくっつくと思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; /* marginを0に設定 */ 9 } 10 11 html { 12 background-image: url(back.png); 13 -webkit-background-size: cover; 14 -moz-background-size: cover; 15 -o-background-size: cover; 16 background-size: cover; 17 background-attachment: fixed; 18 } 19 20 .title { 21 color: orange; 22 background-image: url(header.jpg); 23 width: 1350px; 24 height: 250px; 25 padding-top: 100px; 26 padding-left: 50px; 27 text-align: center; 28 background-position: center; 29 } 30 </style> 31</head> 32<body> 33<header class="title"> 34 <span>title</span> 35</header> 36</body> 37</html>
HTMLの追記を受けて
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"><!-- linkタグは原則headタグ内に書く。 --> 5 <title>タイトル</title><!-- タイトルタグは原則書く。 --> 6 <!-- styleタグは原則headタグ内に書く --> 7 <style type="text/css"> 8 * { 9 margin: 0; /* px指定は不要 */ 10 } 11 </style> 12</head> 13<header> 14 <h1 class="title">Hiro's site</h1> 15</header> 16<section> 17 <h2>このサイトについて 18 </h2><!-- h2タグを閉じるときは</h2>とする。 --> 19 <p><!-- pタグを閉じる。 --></p> 20</section> 21</html>
CSS
1@charset "UTF-8"; 2html { 3 background-image: url(back.png); 4 -webkit-background-size: cover; 5 -moz-background-size: cover; 6 -o-background-size: cover; 7 background-size: cover; 8 background-attachment: fixed; 9} 10 11.title { 12 color: orange; 13 background-image: url(header.jpg); 14 width: 1350px; 15 height: 250px; 16 padding-top: 100px; 17 padding-left: 50px; 18 text-align: center; /* セミコロンは一つだけ。*/ 19 background-position: center; 20 /* background-image: url(header.jpg); 2回も背景を指定しなくていい */ 21 22}
投稿2016/12/30 04:36
編集2016/12/30 04:52総合スコア14731
0
CSS
1.title { 2 margin: 0; 3}
追記：
link要素はtitle要素とともにhead要素内に入れるのが良いと思います。
HTML
1<head><link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"></head>
投稿2016/12/30 04:42
編集2016/12/30 04:45総合スコア69398
あなたの回答
tips
プレビュー
