やったこと
試しに手探りでページを作っていました。
イメージでは、大きい画像が上にボンとあって、その下にコンテンツが広がってるようなのが作りたかったんです。
ざっくりいうとElectronのサイトみたいな感じです。
よくありますよねこういうの。。
#問題
そこで、
header { height: 900px; background-image: url(../img/header-bg.jpg); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; }
ヘッダーをこのようにして、この下にいろいろコンテンツを書いたのですが、画面サイズを変更してスクロールすると、画像がガタつきます。
その原因がわからず困っています。
ガタついてるのを撮影した動画です↓
https://vimeo.com/266161129
#該当のコード
index.html
html
1<html lang="ja"> 2 3<head> 4 <title>テスト</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1" /> 7 <meta name="description" content="Here is s3pt3mb3r home page." /> 8 <link rel="stylesheet" href="/css/index.css" /> 9 <!--Google Fontの読み込み--> 10 <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" /> 11 <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" /> 12 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" /> 13 <!--Font AwesomeのCDN読み込み--> 14 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous" /> 15</head> 16 17<body> 18 <header> 19 <h1 class="header-title">テストです!!</h1> 20 <p class="header-text">これは、テスト用に作ったページです。<br>テスト文字でございます!これはテスト文字でg</p> 21 </header> 22 <div class="contents"> 23 <h2>このサイトの含有物</h2> 24 <hr width="500"> 25 <div class="section-wrapper"> 26 <section class="calam1"> 27 <i class="fab fa-gripfire fa-5x fa-fw"></i> 28 <h3>これはテスト</h3> 29 <p>テラテイルにあげるように改変しています</p> 30 </section> 31 32 <section class="calam2"> 33 <i class="fas fa-images fa-5x fa-fw"></i> 34 <h3> テスト </h3> 35 <p>テラテイルにあげるように改変しています</p> 36 <a href="image.html" h class="button">テストボタン</a> 37 </section> 38 39 <section class="calam3"> 40 <i class="fas fa-envelope fa-5x fa-fw"></i> 41 <h3>  テスト  </h3> 42 <p>テラテイルにあげるように改変しています</p> 43 <a href="letter.html" class="button"> テストボタン</a> 44 </section> 45 </div> 46 </div> 47 <footer> 48 <p class="cp"><span class="cp-en">Copyright © 2018 </span>テスト<span class="cp-en"> All Rights Reserved.</span></p> 49 </footer> 50</body> 51 52</html>
css
1body { 2 min-width: 1419px; 3 margin: 0px; 4 /* スペース */ 5 padding: 0px; 6 /* 余白 */ 7 } 8 9 p { 10 font-family: "Mplus 1p"; 11 font-weight: 400; 12 } 13 14 header { 15 height: 900px; 16 background-image: url(../img/moss.jpg); 17 /* 画像を常に天地左右の中央に配置 */ 18 background-position: center center; 19 20 /* 画像をタイル状に繰り返し表示しない */ 21 background-repeat: no-repeat; 22 23 /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ 24 background-attachment: fixed; 25 26 /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ 27 background-size: cover; 28 } 29 30 .header-title { 31 color: white; 32 font-size: 50px; 33 position: absolute; 34 top: 320px; 35 left: 230px; 36 font-family: "Mplus 1p"; 37 font-weight: 500; 38 } 39 40 .header-text { 41 color: white; 42 position: absolute; 43 top: 400px; 44 left: 230px; 45 padding-top: 20px; 46 font-family: "Rounded Mplus 1c"; 47 font-weight: 200; 48 } 49 50 @media screen and ( max-width:1170px) { 51 .header-title { 52 left: 140px; 53 } 54 .header-text { 55 left: 140px; 56 } 57 } 58 59 @media screen and ( max-width:970px) { 60 .header-title { 61 left: 70px; 62 } 63 .header-text { 64 left: 70px; 65 } 66 } 67 68 @media screen and ( max-width:558px) { 69 .header-title, 70 .header-text { 71 margin-left: -60px; 72 } 73 .header-title { 74 font-size: 40px; 75 } 76 .header-text { 77 width: 300px; 78 line-height: 1.7; 79 margin-top: -10px; 80 81 } 82 } 83 84 .contents { 85 width: 1419px; 86 } 87 88 h2 { 89 font-family: "Mplus 1p"; 90 font-weight: 500; 91 margin-left: 570px; 92 font-size: 30px; 93 } 94 95 section { 96 margin-top: 30px; 97 width: 200px; 98 } 99 100 i { 101 color: #278ca3; 102 padding: 0px 50px 0px; 103 } 104 105 h3 { 106 padding-left: 45px; 107 color: #278ca3; 108 font-family: "Mplus 1p"; 109 font-weight: 400; 110 } 111 112 section p { 113 color: #3c5b58; 114 font-size: 13px; 115 } 116 117 .calam1 { 118 float: left; 119 margin-left: 204.75; 120 } 121 122 .calam2 { 123 float: left; 124 margin-left: 204.75; 125 } 126 127 .calam3 { 128 float: right; 129 margin-right: 204.75; 130 } 131 132 .button { 133 display: block; 134 text-decoration: none; 135 background-color: cornflowerblue; 136 color: black; 137 border-radius: 2px; 138 padding: 20px 20px 20px 50px; 139 } 140 141 .section-wrapper { 142 overflow: hidden; 143 } 144 145 footer { 146 margin-top: 40px; 147 } 148 149 footer .cp-en { 150 font-family: "Raleway" 151 } 152 153 .cp { 154 margin-left: 540px; 155 }
回答2件
あなたの回答
tips
プレビュー