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

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

ただいまの
回答率

90.52%

  • HTML

    8940questions

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

  • CSS

    5765questions

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

リンク画像がマウスオン時に固定ヘッダにはみ出てしまう

解決済

回答 3

投稿 編集

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

nala

score 4

スクロールしてもヘッダが常に固定されるページを作成しております。
コンテンツ内のリンク画像に半透明になるホバーエフェクトをかけているのですが、
画像にマウスを重ねた際に、下記のイメージのように
画像が固定ヘッダにはみ出した状態で半透明になってしまいます。

(ポインタが表示されていませんが、右上の画像にカーソルを合わせた状態です)
イメージ説明

ヘッダーにはz-indexで最前面になるよう設定はしているのですが…
各ソースコードは下記の通りです。

マウスホバーエフェクト

.alpha a:hover img{
    opacity:0.8;
    -moz-opacity:0.5;
    filter:alpha(opacity = 50);
    transition: 0.6s ;
}

固定ヘッダ

#hd_if {
    background: #F5F5F5;
    height: 100px;
}
#header{
    height: 50px;
    width:100%;
    background:#FFF;
    position:relative;
    overflow:hidden;
    border-top:#F4F4F4 1px solid;
    z-index: 10000;
    margin: 0;
}

h1 {
    padding:0;
    margin:0;
    display:inline;
}

h1 img {
    width:160px;
    position:absolute;
    top:40%;
    left:50%;
    margin-top:-10px;
    margin-left:-75px;
}

#wrap{
    background:#fff;
    z-index: 10000;
}

.logo {
margin: auto;
padding: 0;
background:#FFFFFF;
box-sizing: content-box;
position: fixed;
width: 100%;
border-bottom: 1px solid #CCCCCC;
height:auto; }
<div id="wrap">
 <div class="logo">
  <div id="header">
    <h1><a href="#"><img src="https://placehold.jp/40/ffffff/000000/260x60.png?text=LOGO" alt="LOGO"></a></h1>
  </div>
 </div>
</div>


なお、ホバーエフェクトは<div class="alpha">で囲んだ要素全体に適応させています。
なんとかして画像をヘッダにはみ出させずにホバーエフェクトを効かせたいです…
よろしくお願いいたします!

補足・追記

画像等のコンテンツのコードを追記いたします。
また、上記では記載していませんでしたが
レスポンシブ対応のためメディアクエリを設定しているので、
こちらも併せて記載します。

/* --------3つ並びテーブル-------- */
.sale_3 table{
    width:100%;
    max-width:900px;
    margin:0 auto;
}


@media screen and (max-width: 500px) {
  /* スマホ用のスタイル */

.sale_3 img{
    margin-bottom:0;
    vertical-align: bottom;
}

.sale_3 td {
    width: 33.3%;
}

}


@media screen and (min-width: 500px) {
   /* 表示領域が500px以上の場合に適用するスタイル */

.sale_3 img{
    margin-bottom:0;
    vertical-align: bottom;
}

.sale_3 td {
    width: 33.3%;
}

}      
<div style="margin:5px;" align="center">
<div class="sale_3">
<div class="alpha" align="center">
<table width="100%">
 <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>


 <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>

  <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>

  <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>

  <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>

  <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>

  <tr valign="top">
   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

   <td align="center">
    <a href="#"><img src="https://placehold.jp/500x500.png" width="100%"></a>
   </td>

 </tr>
</table>
</div>
</div>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • turbgraphics200

    2017/02/01 14:09

    画像のエレメントを含めたHTMLを掲載してください。

    キャンセル

  • nala

    2017/02/01 15:29

    追記依頼ありがとうございます、 画像等のHTMLを追記させて頂きました!

    キャンセル

  • kei344

    2017/02/02 00:57

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

  • nala

    2017/02/02 09:32

    ご指摘いただきありがとうございます!質問自体は解決したので、解決済にします!

    キャンセル

回答 3

checkベストアンサー

+4

.logoにz-index:1;でいけるはず!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 15:45

    回答いただいた通り、.logoにz-index:1;を追加したところ
    ヘッダにはみ出さずエフェクトが効きました!ありがとうございます!
    恥ずかしながら、z-indexの仕組みが良くわかっておらず…
    原因について補足いただいてもいいでしょうか??すみません!(><)

    キャンセル

  • 2017/02/01 16:31

    基準となる親要素にposition・z-indexプロパティを設定していないためです。
    なので、この場合#headerの直親にあたる.logoにpositionとz-indexを設定しないといけなかったのです。
    単純に、#wrap(お爺ちゃん)にpositionとz-indexを設定していれば、cssも明快で問題なかったのではないでしょうか。
    意図がおありなら仕方ないのですが、階層を深くしすぎて(要素で囲みすぎて)、ソースが複雑になったのが今回、ご自身で気づけなかった一番の原因かもカモ~♪

    ソースはシンプルが一番!

    キャンセル

  • 2017/02/01 19:32

    なるほど、分かりやすくありがとうございます!
    やっと理解しました!
    確かに、1つのヘッダを<div>で囲みすぎて、
    正直どのソースがどこに効いているのかごっちゃになっていました。
    これからシンプルなソースを心がけます!

    キャンセル

+2

z-indexを指定する場所が違うようです。
<div class="logo">が一番前面にこなければいけないところ、
その子要素の<div id="header">にしかz-indexが指定されていません。
細かいところまで確認していませんが、とりあえず以下のようにして頂ければヘッダーが最前面でてきます。

.logo {
    margin: auto;
    padding: 0;
    background:#FFFFFF;
    box-sizing: content-box;
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
    height:auto;
    z-index: 10000; /*←追加*/
}

#header {
    height: 50px;
    width:100%;
    background:#FFF;
    /*position:relative; ←z-index用であればいらないです*/
    overflow:hidden;
    border-top:#F4F4F4 1px solid;
    /*z-index: 10000; ←いらないです*/
    margin: 0;
}

記載されているソースを見る限りですが、
classやidの命名規則がバラバラだったり、CSSの記述順も不規則だったりと、
整理ができていない印象です。

コーディングをされる際、ラフでいいのでページの構造を紙などに書いてみてはいかがでしょう?
HTMLの設計図のようなものを作られると、自分でも整理できて便利でおすすめです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 19:07

    ありがとうございます。提示いただいたコードでちゃんとヘッダーが最前面に出てきました!
    なるほど、確かに、親要素である<div class="logo">にz-indexが設定されていないとダメですね。

    ≫classやidの命名規則がバラバラだったり、CSSの記述順も不規則だったりと、
    上記のように感じられたのはもっともだと思います。
    ですが、勉強不足なため自分でもどのように直したらいいのか分からず…(><)
    このように改善したらいいというのがあれば教えていただきたいです…!(丸投げですみません…)

    また提案ありがとうございます!コーディングの際にページ構成を一度紙にかいてみようと思います!

    キャンセル

0

header のz-indexを追加してもなりますか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 14:40 編集

    headerにもz-index: 10000; 設定しましたが現状変わらずです…

    キャンセル

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

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

関連した質問

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

  • HTML

    8940questions

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

  • CSS

    5765questions

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