初心者のため、分かりづらい質問になると思いますがお許しください。
background-repeat:no-repeat;
background-position:right;
background-attachment:fixed;
上記のようなCSSで背景画像を固定しています。
画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。
画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。
画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか?
何か補足事項があればすぐに追記します。
よろしくお願いします。
No.3ベストアンサー
- 回答日時:
だいたいは飲み込めたと思います。
まず、backgroundの指定する要素は今回はbackground-attachment:fixed;を使うのでbodyに指定してください。
他の要素に指定するとたしか一部のIEのバグで一緒にスクロールされます。
それで、普通であればこの指定だけで右が切れることは無いのですが、もしかしてbodyに対してwidthを指定されていませんか?
widthを指定するのであればbody内を全部divで囲い、そのdivに対して指定すれば上手くいくと思います。
もしwidthの指定も問題ないようであれば他のプロパティが関係しているのかもしれません。それはさすがにソースを見ないとなんとも言えないです。
ちなみにヘッダー、フッター、メイン等に分けて管理するのは確かに仕事としての効率を考えると必要なのですが、それが常に最適な手法であるかと言えばそうではありません。
こういう管理をすると常にdivでのグループ化が必要になると思いますが、むしろ無駄なタグは最適化を考える上では排除するほうが好ましいです。
個人サイトならbodyの次にh1がすぐ来る方が良いぐらいです。
ただしヘッダー、フッター、メイン等の名称はid名として使って損はありません。
特にh1要素にid="HEADER"のような指定は意外と多いのではないでしょうか?
お返事が遅くなり申し訳ございません。
画面にwidthの指定は一切していませんでした。
この指定はそもそも必要なのでしょうか?
といいますのも、私がこのベースを作っていた参考書にはこういう指定がなかったので、そのまま作業を進めてきたのですが、
他の参考書はほとんどがボックス化されているので、
多分そういう風にしていく方がいいんだろうな...と修正を決意したわけなんです。
先日教えて頂いた、「横型のナビゲーションバーを画面いっぱいに伸ばしたい」というのもこのボックス化する事で、なんだかおかしな表示になっちゃうし、(どうしよー。。。)と困っていました。
もし、横幅を設定する場合はどうやってサイズを決めているのですか?
(私が試みた918pxというのはナビゲーションバーの長さでした。)
できれば、もうワイドの指定はしなくないです...ハマるのが嫌です。(;_;)
何度もすみません、よろしくお願いします。
No.2
- 回答日時:
よくのみこめてないのですが、
・画面の幅に合わせて背景画像が拡大縮小する
・画面の右(上?中?下?)に背景画像があり、画面の幅にに合わせて位置が移動する
・画面の中央に背景画像があり、918pxで固定されて幅に関係なく常に中央表示される
など、もう少し細かいビジョンが無いと説明し辛いのではないかと思います。
この回答への補足
ありがとうございます。
背景画像として使っているのは、大きなマークひとつです。
これを画面の右端に固定させるようなデザインにしています。
スクロールしても常に同じ位置で画像が表示されているデザインです。
今まではボックスを作らない(全体のワイドサイズを設定していない)で、作業を進めていました。
この時は画面を大きくしても常に固定した背景画像は一緒にくっついてくる感じで、希望通りの表示になっていました。
で、いろいろと進めていく中でヘッダー、メイン、フッター、などのボックスを設定している参考書書籍がかなり多く、
ふと今の設定(bodyの次にいきなりh1タグを設定している感じ)が
「間違っているかな?」と思い、ボックス化を試みたのです。
そのときに画面のワイド幅(918px)を設定し、
試しに918px以上に画面を横に伸ばしたときに、固定していた背景画像がどんどん右から切れていってしまったのです。
逆に画面幅を狭くする場合は問題ないです。
非常に分かりづらい説明で申し訳ないです。
No.1
- 回答日時:
発想が逆です。
画面幅の固定はは、そもそも避けるべきかと思います。
画面幅を固定して画像もno-repeatだと、幅の広いディスプレイでは切れてしまうし、狭いとはみ出るし。
HTMLの根幹に関わる最も重要な部分
「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 」
2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )より引用。
HTMLはDTP( http://ja.wikipedia.org/wiki/DTP )とは、まったく逆の発想で作られたものです。そのようなページを作るなら、PDFなどもっと優れた技術があります。
確かに初心者の最も間違う部分ではありますが・・・・。もちろんウェブに公開しないで自分だけで見るなら、そのままで良いとは思います。
紹介した仕様書のページをもう一度読み返してください。
それでも、HTMLの理念に逆らってまで画面幅を固定しますか?
早速ありがとうございます。
実は、画面幅はさっきまでは固定していなかったんです。
当方初心者のため、参考書籍を読みながらときにはソースを参考にしながら作業をしているのですが、私の解釈の仕方が間違っていなければ、それらの参考書の中でのレイアウトで、#containerで大枠を作り、その中に#header、#main、#sub、#footer...などの設定をしているものが多く、それまでに設定せずに作っていたのが間違っていたのかな?
と思うようになって今回の作業をしました。(#containerを作って全体幅を設定した)
今回こういう表示になってしまった事で、本来ならばもとの表示(画面幅に応じて背景画像が固定されたまま移動する)に戻したい気持ちがあります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
ロールオーバーで横に並べる方...
-
要素の幅をいろんな写真の幅に...
-
iframe内をクリックさせない方...
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
htmlかcssで背景の白い枠をなく...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
IMGタグで画像の繰り返し使用は…
-
ブラウザによって、画面表示の...
-
divで作成したボックスに背景画...
-
ページごとに背景画像を変更し...
-
ウインドウの幅に合わせて背景...
-
フルスクリーンのサイトについて
-
同じ画像 複数回使用
-
背景画像がずれる現象について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
IMGタグで画像の繰り返し使用は…
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
htmlかcssで背景の白い枠をなく...
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
LightBoxの矢印の出し方
-
コーディング中、右側に謎の余...
-
WEB上でディレクトリ内の画像を...
-
HP作成 作成した画像を動画の上...
-
ページごとに背景画像を変更し...
おすすめ情報