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

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

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

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

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

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

HTML

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

CSS

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

Q&A

2回答

1446閲覧

HPのヘッダー画像の余白

PYPP

総合スコア51

CSS3

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

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/02/21 11:40

編集2022/01/12 10:55

###前提・実現したいこと
HTMLとCSSを使いフルスクラッチでwebサイトを制作しています。そこで、ヘッダー画像を設定しようとしたのですがうまくいきません。

###発生している問題・エラーメッセージ
何もしない状態でウィンドウの大きさを変えても横幅一杯にヘッダー画像が表示されるのですが、スクロールすると白い空白に移動してしまいます。

①通常時
イメージ説明
②右スクロール
イメージ説明

###該当のソースコード
html

<div class="boxB"> <div class="box4"> <div class="picture"></div> </div> </div>

css

@charset "UTF-8"; .wrap { overflow: hidden; width:100%; } body { font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; margin: 0px; } p { line-height: 1.5 } .boxB { margin: 0px; } .boxB .box4 { float: right; /*padding: -5px;*/ width: 100%; } .picture { height: 300px; background-image: url("") //urlは長いので割愛 min-width: 480px; }

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

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

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

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

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

gin

2017/02/21 13:49

単純な話、上記のコードだけでは再現しませんが質問者さんのところでは再現しているのですか?
PYPP

2017/02/21 14:12

上記のコードは、検証してヘッダー画像を表示させているhtml部分を抜粋したものです。上記のコードだけでは再現しません。紛らわしく申し訳ありません。
gin

2017/02/21 14:37

何も起こらない箇所を抜粋したところで意味はありません。抜粋するにしても再現するレベルのものを張ったほうがよいと思いますが。
guest

回答2

0

headerを横幅いっぱいに設定して、背景も横幅いっぱいに繰り返しで配置したい。ということでしょうか?
それでしたら、

html,body{ width:100%; } .boxB .box4 { float: right;/*これ要りますか?*/ /*padding: -5px;*/ width: 100%; } .picture { height: 300px; width:100%; background-image: url("") //urlは長いので割愛 min-width: 480px;/*背景のサイズをコントロールしたいのでしょうか?*/ width:100%; background-repeat:repeat-x; background-size:480px auto; background-position:0 0 ; }

それでは、これで上手く行きませんか?
最終的にどうなるのが目的かいまいちわかりませんが、ヘッダーの高さを固定し、幅はwindow幅に追随、背景を横方向にリピートしたいならこれで出来るはずなんですが。
縦にもリピートするのであれば、

background-repeat:repeat-x;

の部分が

background-repeat:repeat;

になります。

投稿2017/02/21 13:12

編集2017/02/21 13:23
shaak

総合スコア607

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

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

PYPP

2017/02/21 13:18

ご回答ありがとうございます。実際に試して見ましたが、上手くいきませんでした。
guest

0

ブラウザ100%まで表示させて、右スクロールが出なければ良いんだと解釈。

全体を包んでいる、Wrapperなりに、overflow:hidden;で直るかと。

追記:

そっかそっか、.pictureってなんか画像を入れるんだとばかり思いこんでおりました(笑)。
だったら、.box4.pictureも要らないですね…

CSS

1.boxB { 2 backgroung:url("") center top; 3 width:100%; 4 height:300px; 5 overflow:hidden; 6}

投稿2017/02/21 12:14

編集2017/02/21 13:36
LibertyBell3

総合スコア1084

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

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

PYPP

2017/02/21 12:50

ご回答いただきありがとうございます。記載が漏れておりましたが、.wrap { overflow: hidden; }がcssの一行目にて書かれておりますが、ダメな状況です。
LibertyBell3

2017/02/21 12:59

あらら… 念のため、wrap{width:100%;}と追記しても駄目でしょうか?
PYPP

2017/02/21 13:06

やって見ましたがダメでした…。何かhtml、cssで問題のある記述でもあるんでしょうか…。
LibertyBell3

2017/02/21 13:16

上記ソースだけでは、気になるところは、.box4が100%なのにfloatされているとか、 コメントアウトされていますが、paddingにはマイナスは付けられないよ~とか…
PYPP

2017/02/21 13:34

なるほど…。他のソースコードが影響している可能性はありますでしょうか?
PYPP

2017/02/21 13:40

追記ありがとうございます。試させていただきましたが、それでも上手くいきませんでした。
LibertyBell3

2017/02/21 14:04

提示されたソースだと、これ以上思いつくところはありませんので、その外側に問題があると思います。 リセットされているのか、どこかしらにマージンやパディングが入っていないのか、 CSS記述に全角が混じっている、サイズ指定の単位を間違っているなどなど… 一つ一つ潰していくしかありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問