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

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

ただいまの
回答率

90.51%

  • HTML

    10700questions

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

  • CSS

    6990questions

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

  • HTML5

    4795questions

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

  • CSS3

    2466questions

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

CSS レイアウト崩れと余白について

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 943

Susanoo2442

score 139

WEBページ制作をしている途中なのですが
以下の様なコードでヘッダを作ろうと試みたところ
次のような、問題点が発生しました。

1つ目は、“baki4”で指定しているブロック要素なのですが
これが、いくらpxを大きく指定してもページの端まで行き渡りません。
必ず、ページ右に余白ができてしまいます。また、その際にそれ以上pxを指定すると
今度は、“baki4”のブロックが“baki3”や“baki2”などのブロック要素の下に回り込んでしまいます。

2つ目ですが、これはページを縮めるとレイアウトが崩れてしまいます。

不具合は、以上なのですが
自分なりに、思考錯誤しみても
原因が全くl掴めません。

不甲斐ないですが、ご教示して頂きたく存じあげます。

<style>
    body{
      background-color:#FFFFFF;
      margin:0px;
      max-width:2000px;
    }
    header{
      max-width:2000px;
    }
    .baki1{
      float:left;
      border-top-style:solid;
      border-top-color:gold;
      background-color:#000000;
      text-align:left;
      color:gold;
      padding-top:50px;
      padding-bottom:50px;
      padding-right:30px;
      padding-left:30px;
    }
    .baki1:hover{
      background-color:gold;
      color:grey;
      transition:1s;
    }
    .baki2{
      float:left;
      border-top-color:gold;
      border-top-style:solid;
      background-color:#000000;
      text-align:left;
      color:gold;
      padding-top:50px;
      padding-bottom:50px;
      padding-right:30px;
      padding-left:30px;
    }
    .baki2:hover{
      background-color:gold;
      color:grey;
      transition:1s;
    }
    .baki3{
      float:left;
      border-top-style:solid;
      border-top-color:gold;
      background-color:#000000;
      text-align:left;
      color:gold;
      padding-top:50px;
      padding-bottom:50px;
      padding-right:30px;
      padding-left:30px;
    }
    .baki3:hover{
      background-color:gold;
      color:grey;
      transition:1s;
    }
    .baki4{
      width:1500px;
      height:124px;
      float:left;
      border-top-style:solid;
      border-top-color:gold;
      background-color:#000000;
      </style>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
<title>AAA</title>
  </head>
  <body>
   <hearder>
    <div class="baki1">ITJoBs</div>
    <div class="baki2">MeNu</div>
    <div class="baki3">お問い合わせ</div>
    <div class="baki4"></div>
  </header>
  </body>
</html>

ご回答お待ちしております。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

body{
background-color:#FFFFFF;
margin:0px;
max-width:2000px;
}
header{
height:124px;
border-top-style:solid;
border-top-color:gold;
background-color:#000000;
}

header>.baki{
float:left;
background-color:#000000;
text-align:left;
color:gold;
height: 124px;
padding-right:30px;
padding-left:30px;
line-height: 124px;
}

.baki:hover{
background-color:gold;
color:grey;
transition:1s;
}
<header>
<div class="baki baki1">ITJoBs</div>
<div class="baki baki2">MeNu</div>
<div class="baki baki3">お問い合わせ</div>
</header>

こんな感じであってるでしょうか。

.baki1 .baki2 .baki3に対して同じ指定がされていたので、共通のclass.bakiを指定してcssの指定をまとめています。

div.bakiに対してfloat:leftが指定されていますが子要素全てにfloatを指定した場合、親要素のheaderは高さが0になってしまいますので、今回の場合は子要素div.bakiと親要素のheaderheight:124pxと同じ高さを指定することで回避しています。

その他の方法としてはclearfixと呼ばれるテクニックが一般的です。(これは種類も沢山あり、ここで説明すると長くなるので調べてみてください。)

headerの横幅は特に指定しない限り画面一杯になるので.baki4は削除してheaderに背景色等の指定をつけたほうがいいかと思います。

それとhtmlの方のheaderの開始タグが間違っていたのでここも注意が必要です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

.beki1.beki2.beki3 に左右のpadding30がついているためではないでしょうか。
ブラウザの「ボックスモデル」の解釈は文字より図解の方が理解しやすいですが、横並びに置くとき、
隣にくる要素との距離がmargin
paddingは、当のボックス(この場合.beki1.beki2.beki3)の内側にできる余白です。

全体を100%フル幅にしたい場合、たとえば25%幅の人間が4人まで並ぶことができると思いがちですが、それは素っ裸の場合。
.beki1.beki2.beki3は、左右に30px、合計60px、着膨れする服を着ている、25%+60pxの幅のある人、となります。
その結果、4人めの人(箱)がはみ出して下に行ってしまいます。

ブラウザ、ボックスモデル、などの検索で図解付きの記事がいくつもヒットすると思いますが
http://creator.aainc.co.jp/archives/5952
など参考に。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

.baki4{
      width:1500px;
      height:124px;
      float:left;
      border-top-style:solid;
      border-top-color:gold;
      background-color:#000000;
}/* ←ここの閉じタグが抜けている */
      </style>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    10700questions

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

  • CSS

    6990questions

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

  • HTML5

    4795questions

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

  • CSS3

    2466questions

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