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

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

ただいまの
回答率

88.59%

ヘッダーメニューにpositon:fixed;を設定すると、下にあるキービジュアルの画像の上のほうが隠れてしまう

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,119

harachan

score 18

bodyのwidthを100%にしたいが、100%にするとmargin:0 auto;が効かない。 100%でも中央寄せにする方法が分かりません。 試したことは、ボディの余白がないと中央寄せにならないという記事をみつけたので、95%に幅を設定してみたら、中央寄席にはできましたが、横に余白を作りたくありません。 どういった方法があるか、調べてもわかりませんでした。教えてください。

ご指摘を受けて、bodyのwidthを100%にしてみたら、問題なくできました。
何度やっても駄目だったのですが、なぜか出来ました。申し訳ありません。
以下の質問とさせていただいてもよろしいでしょうか?

それから、ヘッダーのメニューにposition:fixed;を入れた瞬間、キービジュアルの画像の上のほうが隠れて見えなくなってしまう点についても理由と原因がわかりません。

よろしくお願いします。

コード
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>テキストテキスト</title>
        <link rel="stylesheet" href="main.css">    
    </head>
    <body>
<!-- ========== header ========== -->
<header>
          <div class="container">
            <div class="header-left clearfix">
                <img src="image/logo.jpg" class="header-logo" width="40" height="40" alt="ヘッダーロゴ">
                <h1>テキストテキスト</h1>
           </div>
<!-- ========== header nav ========== -->         
            <div class="header-right clearfix">
                <nav>
                    <ul>
                        <li><a href="#">HOME<br>Home</a></li>
                        <li><a href="#">会社案内<br>Company</a></li>
                       <li><a href="#">製品情報<br>Products</a></li>
                       <li><a href="#">音楽教室<br>Music shool</a></li>
                       <li><a href="#">採用情報<br>Recruit</a></li>
                       <li><a href="#">お問い合わせ<br>Contact</a></li>
                   </ul>
               </nav>
           </div>
    </div>

        </header>
<! -- ========== /header ========== -->
<! -- ========== main ========== -->
<main>
            <div class="top">
                <img src="image/key-visual.png" width="1300" alt="">
            </div>
    <div class="container">  
            <div class="maincopy">
                <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

            </div>
    </div>
        <div class="container">
         <div class="contents-top clearfix">
            <div class="content-1">
                <h2 class="title">会社案内</h2>
                <img src="image/kaisya.jpg" width="358" height="239" alt="">
                <p>テキストテキストについてのご案内です。</p>
                <p class="btn"><a href="#">詳しくはこちら</a></p>
            </div>
             <div class="content-1">
                 <h2 class="title">代表挨拶</h2>
                 <img src="image/daihyoaisatsu.jpg" width="358" height="239" alt="">
                 <p>テキストテキスト代表よりご挨拶です。</p>
                 <p class="btn"><a href="#">詳しくはこちら</a></p>
             </div>
             <div class="content-1">
                 <h2 class="title">製品紹介</h2>
                 <img src="image/#" width="358" height="239" alt="">
                 <p>テキストテキストテキストテキストテキストテキストテキストテキストなど</p>
                 <p class="btn"><a href="#">詳しくはこちら</a></p>
             </div>

         </div>
          <div class="news clearfix">
              <h2>NEWS お知らせ</h2>
              <dl>
                  <dt><img src="image/#.jpg" width="89" alt=""></dt>
                  <dd><a href="#">テキストテキストテキストテキストセミナー開催のお知らせ</a></dd>
                      <dd class="day">2018年10月25日</dd>
              </dl>
              <dl>
                  <dt><img src="image/#.jpg" width="89" alt=""></dt>
                  <dd><a href="#">テキストテキストテキストテキストセミナー開催のお知らせ</a></dd>
                  <dd class="day">2018年5月18日</dd>
              </dl>
              <dl>
                  <dt><img src="image/#.jpg" width="89" alt=""></dt>
                  <dd><a href="#">テキストテキストテキストテキスト説明会開催のお知らせ</a></dd>
                  <dd class="day">2018年5月7日</dd>
              </dl>
          </div>
            </div>
    <div class="solution clearfix">
          <h2>PICK UP(導入事例)</h2>
        <div class="container">
              <div class="case">
                  <h3 class="title">導入事例1</h3>
                  <img src="image/#.png" width="357" alt="">
                  <p>テキストテキストテキストテキスト導入事例をご紹介しています。</p>
                  <p class="btn"><a href="#">詳しくはこちら</a></p>
              </div>
              <div class="case">
                  <h3 class="title">導入事例2</h3>
                  <img src="image/#.png" width="357" alt="">
                  <p>テキストテキストテキストテキスト対策導入事例をご紹介しています。</p>
                  <p class="btn"><a href="#">詳しくはこちら</a></p>
              </div>
              <div class="case">
                  <h3 class="title">導入事例3</h3>
                  <img src="image/#.png" width="357" alt="">
                  <p>テキストテキストテキストテキスト導入事例をご紹介しています。</p>
                  <p class="btn"><a href="#">詳しくはこちら</a></p>
              </div>
        </div>
        </div>
     <footer>
</footer>


</body>
</html>
コード
@charset "utf-8";
body {
    font-family: メイリオ, Meiryo, "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 18px;
    width: 95%;
    margin: 0 auto;


}
.container {
    padding: 0 55px 0 55px;
}
ul {
    list-style: none;
}
.title {
    border-bottom: 1px solid lightgray;
    position: relative;

}
.title:after {
    content: '';
    position: absolute;
    display: block;
    width: 80px;
    bottom: -2px;
    border-bottom: 1px solid black;
    left: 0%;

}
.btn a {
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    color: black;
}
.btn a:hover {
    background-color: #424140;
    color: white;
    text-decoration: none;
}


/* ========== header ========== */
header {
    height: 68px;
    width: 100%;
    border-bottom: solid 1px #ccc;
    padding-bottom: 15px;
    position: fixed;
    margin-top: 0;
    background-color: white;
    z-index: 10;

}

.header-left {
    float: left;
    padding: 18px;

}
.header-left h1 {
    font-size: 12px;
    float: right;
    font-weight: normal;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}
.header-right {
    float: right;
}

.clearfix::after {
        display: block;
        content: "";
        clear: both;





}
.header-right li a {
    text-decoration: none;
    color: black;
    display: block;
} 


.header-right li {
    display: inline-block;
    font-size: 14px;
    padding: 10px;
}
.header-right li:hover {
    border-bottom: 1px solid gray;
}
.header-right li br {
    font-size: 6px;

}
/* ========== main top ========== */
.top {
    width: 100%;




}

/* ========== main maincopy ========== */
.maincopy {

    margin-top: 50px;
    border: solid 1px black;
    border-radius: 14px;

}
.maincopy p {
    border: solid 1 blck;
    border-radius: 10px;
    text-align: center;
}
.maincopy:hover {
    background-color: #424140;
    color: white;
}
/* ========== main contents-top ========== */
.content-1 {
    float: left;
    width: 340px;
    height: 388px;
    margin: 50px 40px 0 0;

}
.content-1 h2 {
    font-weight: normal;
    font-size: 18px;
}
.content-1 p {
    font-size: 14px;
}
.content-1 a {
    font-size: 12px;
    margin-bottom: 50px;

}
.contents-top {
    margin-bottom: 30px;

}
.content-1 img {
    border: 1px solid lightgray;
}

/* ========== main news ========== */
.news {
    width: 100%;

    margin-top: 80px;
}

.news h2 {
    font-size: 24px;
    color: #333;
    font-weight: normal;
    background-color: #f5f5f5;
    border-top: solid 2px black;
    height: 65px;
    line-height: 3;
    padding-left: 15px;

}
.day {
    color: #d44950;
    font-size: 14px;
}
.news a {
    font-size: 14px;
    color: #464646;

}
dl {
    width: 1136px;
   height: 118px;
    border-bottom: dotted 1px gray;

}
dt {
    float: left;
    width: 78px;
    clear:left;
    margin-bottom: 10px;

}
dd {
    float: left;
    width: 1000px;


}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;

}

/* ========== main solution ========== */
.solution h2 {
    height: 136px;
    background-color: #f1f1f1;
    font-size: 32px;
    text-align: center;
    font-weight: normal;
    line-height: 4.5;

}
.case {
    float: left;
    width: 360px;
    margin-right: 20px;

}
.case h3 {
    font-weight: normal;

}
.case p {
    font-size: 14px;
}
.case a {
    font-size: 12px;
    margin-bottom: 50px;

}
.case img {
    border: 1px solid lightgray;
}


/* ==========contents-bottom ========== */
.contents-bottom img {
    border-radius: 50%;
    text-align: center;
    height: 127px;

}
.contents-2 h2 {
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}
.contents-2 p {
    font-size: 14px;
    width: 366px;
}
.contents-2 {
    width: 363px;
    float: left;
    margin-right: 15px;
    margin-top: 30px;
    text-align: center;

}
.contents-bottom {
    margin: 50px 0;

}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2018/12/06 10:02

    「100%でも中央寄せにする方法が分かりません。」とありますが、100%であればブラウザ幅ぴったりに表示されて、寄せもへったくれもないかと思います。具体的に何が問題なのでしょうか。

    キャンセル

  • harachan

    2018/12/06 10:47

    具体的には、paddingを設定していない要素が左にぴったりとくっついて、真ん中に寄ってくれなかったことに困っていたのですが、ご指摘後に再度設定したところ出来てしまいました。もう1つの質問の回答もお願いできますでしょうか?

    キャンセル

  • madoka9393

    2018/12/06 10:54

    質問内容を訂正するだけでなく、質問タイトルも訂正してあげた方がよいのでは…。

    キャンセル

  • harachan

    2018/12/06 10:59

    訂正しましたので、よろしくお願いします。

    キャンセル

回答 1

checkベストアンサー

+3

ヘッダーに position: fixed; (absoluteでも同じ)を指定すると、
その要素は本来配置されていた領域から切り取られて上のレイヤーに移動するような状態となります。その際、もともと存在していた領域は無くなってしまいますので、後続要素がその領域に詰めて表示されます。position:fixed/absoluteはそういう仕様です。

fixedして上のレイヤーに重ねられたヘッダーの下にキービジュアルが潜り込んでしまっている状態なので、解消するにはヘッダーの高さ分だけ余白を追加してやる必要があります。
ヘッダーの高さが固定であれば、そのpx分だけ body もしくは main あたりに padding-top を追加してみてください。

ちなみにレスポンシブなどでヘッダーの高さが変わる場合は、JSでリサイズ時に都度ヘッダーの高さを取得して、動的に余白の数値を切り替えるなどの対策が必要となるかと思われます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/12/06 13:40

    いつも丁寧に教えてくださり、ありがとうございます。
    とても分かりやすくて助かります。
    教えていただいたとおりmainにpadding-topにヘッダーの高さ分設定したところ、思うようになりました。

    キャンセル

  • 2018/12/06 14:04

    あとからすみません。。。
    mainにpadding-topを設定した後、気づいたら、container設定が聞かなくなり、左端によった状態になりました。なぜでしょうか?

    キャンセル

  • 2018/12/06 17:17

    左に寄っているように見えましたが、検証で確認するとcontainerの左のpaddingには、設定している数値が入っていましたので、大丈夫のようです。すみません。

    キャンセル

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

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • トップ
  • CSS3に関する質問
  • ヘッダーメニューにpositon:fixed;を設定すると、下にあるキービジュアルの画像の上のほうが隠れてしまう