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

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

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

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1373閲覧

cssで、background-attachment:fixed;にしてスクロールするとガタつきます

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML5

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

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/04/23 17:34

編集2018/04/24 02:08

やったこと

試しに手探りでページを作っていました。
イメージでは、大きい画像が上にボンとあって、その下にコンテンツが広がってるようなのが作りたかったんです。
ざっくりいうと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>&emsp;テスト&emsp;</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>&emsp;&emsp;テスト&emsp;&emsp;</h3> 42 <p>テラテイルにあげるように改変しています</p> 43 <a href="letter.html" class="button">&emsp;テストボタン</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 }

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

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

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

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

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

m.ts10806

2018/04/23 22:07

index.js にはレイアウトに関するイベントは記述していないのでしょうか?もし記述しているようであればindex.jsの内容もご提示ください。
退会済みユーザー

退会済みユーザー

2018/04/24 02:07

こんにちは!すみません、jsには何も記述していません!誤解を生む記述をしていました。修正いたします!
guest

回答2

0

ベストアンサー

-webkit-ベンダープレフィックスをつけることで解消されました

投稿2018/04/24 06:31

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ブラウザは何を使って表示させているでしょうか?
background-attachment: fixedで調べたところ、
IEとIOSで不具合が確認されているそうです。

IEでは「画面をスクロールした際に背景がガタガタと動いてしまいます。」と
でています。

https://cunelwork.co.jp/blog/web/bugs-bg-attachment/

投稿2018/04/24 03:16

DaisukeMori

総合スコア217

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

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

退会済みユーザー

退会済みユーザー

2018/04/24 04:51

Google chromeです。なのでそれは当てはまらないと思われます
DaisukeMori

2018/04/24 05:32

スクロールしたとき画像が遅れて処理しているのかも。 確かにchromeだとこういう現象が起きました。 Firefoxならスムーズにいくみたいです。 ブラウザの違い? 一応こういう対応をされている方もおられましたので 載せておきます。 https://qiita.com/mimoe/items/07486fa85fbfc6f80315 おもうような解決法が見つからず申訳ありません。
退会済みユーザー

退会済みユーザー

2018/04/24 06:25

記事にしたがってみましたが、効果はありませんでした。 そもそもposition:fixed;のガタつきに関する対処法なので本件とは無関係ですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問