質問: 以下のようにHTML、CSSを書きましたが、WEB上でグローバルナビゲーションが表示されません。 何が原因でしょうか? 対処方法も含めて、教えて頂きたいです。 HTML ``` フェイバリット・ビュー HOME おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ あなたの「お気に入りの景色」フェイバリット・ビューを見つけてください もっと詳しく おすすめ特集 「フェイバリット・ビュー」がおすすめする格安海外旅行です。気になったプランがあればすぐご予約を! 夢心地のプーケット! ¥36,800~¥122,000 お得な欲ばり2ヵ国周遊スペシャル!マレーシア&プーケット島5日 スピリチュアルタイ! ¥52,800~¥123,800 アユタヤ遺跡& バンパイン離宮観光付き!マンダリンセンターポイント2泊4日 憧れのサントリーニ島! ¥169,800~¥245,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 ヨセミテで大自然満喫! ¥41,029~¥159,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 もっと見る 海外ツアーを探す ヨーロッパ 北アメリカ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア 出発地 東京 羽田 成田 大阪(関空+伊丹) 関西国際 伊丹 名古屋(中部+名古屋駅) 中部(セントレア) 名古屋駅 福岡(福岡+博多港) 福岡 博多港 札幌 出発希望日 行き先 選択してください ヨーロッパ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア キーワードで探す スタッフの海外旅行記 パリ・ルーブル パリは歩いているだけで本当に楽しかったです。 (ヨーロッパ担当スタッフA) アンテロープキャニオン うっとりするような曲線とやわらかな色に差し込む陽の光が幻想的でした! (アメリカ担当スタッフH) アイスランド セリャランスフォス滝は、透けるような滝でまさに絶景でした。 (ヨーロッパ担当スタッフK) タイ・サムイ島 海がキレイ!プーケットより断然サムイ島です! (アジア担当スタッフM) イタリア・ヴェネチア さよならサン・マルコ。一生に一度は行っておきたい場所。 (ヨーロッパ担当スタッフA) ノイシュバンシュタイン城 初めて見るノイシュバンシュタイン城にちょっとテンションが高くなります。 (ヨーロッパ担当スタッフS) もっと見る 〒151-0051 東京都渋谷区千駄ヶ谷 2-15-62 03-5690-98422 favo_view@co.jp おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ トラベルサポート 海外旅行保険 保険募集に関する勧誘方針及び販売方針 外務省海外安全情報 厚生労働省感染情報 個人情報保護方針 2018 Favorite view. All Rights Reserved. ``` CSS ``` @charset "utf-8"; /* CSS Document */ body{ font-size: 14px; } header{ height: 200px; backgound-color: yellow; } /*ロゴ*/ header .logo img{ float: center; display: block; height: 20px auto; } /*トップ画像*/ #kv { top: 20%; position: relative; } #kv :after{ display: block; width: 100%; background: rgba(0,0,0,.4); } #kv img{ width: 100%; } #kv .catch{ position: absolute; z-index: 2; top: 50%; text-align: center; width: 100%; font-size: 200%; color: #fff; left: -3px; } .filter { background: #000; } .filter-img { display: block; opacity: .6; } #recommend h1{ text-align: center; font-size: 200%; color: #CC6B29; } /*検索窓*/ header i{ float: right; } /*グローバルナビ*/ .global ul{ display: inline-block; list-style: none; overflow: hidden; } .global li{ font-family: 游ゴシック; width: 15% auto; text-align: center; float: right; height: 60px; line-height: 50px; margin-right: 2px; background-color: pink; } .global li a{ vertical-align: middle; text-decoration: none; color: #fff; font-weight: bold; padding: 20px; } ```
回答: `.menu` クラスを持つ `div` 要素 (グローバルナビゲーション) 内の子要素で高さを持つ要素は `.header-menu` クラスを持つ要素のみです。そして、この要素は `hide` メソッドによりページ読み込み完了時に非表示にされているため、**グローバルナビゲーションは高さを持たず、表示されない**ことになります。 これを解決するための方法には、 `hide` メソッドを削除する方法があります。 ``` $(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-280px'); var showFlag = false; $(window).scroll(function() { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({ 'bottom': '40px' }, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({ 'bottom': '-280px' }, 200); } } }); topBtn.click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); // $('.acc').hide(); $('.trigger').on('click', function() { $(this).toggleClass('active'); $(this).next().slideToggle(); }); }); ``` ``` @charset "utf-8"; /* CSS Document */ body { font-size: 14px; } header { height: 200px; background-color: yellow; } /*ロゴ*/ header .logo img { float: center; display: block; height: 20px auto; } /*トップ画像*/ #kv { top: 20%; position: relative; } #kv :after { display: block; width: 100%; background: rgba(0, 0, 0, .4); } #kv img { width: 100%; } #kv .catch { position: absolute; z-index: 2; top: 50%; text-align: center; width: 100%; font-size: 200%; color: #fff; left: -3px; } .filter { background: #000; } .filter-img { display: block; opacity: .6; } #recommend h1 { text-align: center; font-size: 200%; color: #CC6B29; } /*検索窓*/ header i { float: right; } /*グローバルナビ*/ .global ul { display: inline-block; list-style: none; overflow: hidden; } .global li { font-family: 游ゴシック; width: 15% auto; text-align: center; float: right; height: 60px; line-height: 50px; margin-right: 2px; background-color: pink; } .global li a { vertical-align: middle; text-decoration: none; color: #fff; font-weight: bold; padding: 20px; } ``` ``` フェイバリット・ビュー HOME おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ あなたの「お気に入りの景色」フェイバリット・ビュー を見つけてください もっと詳しく おすすめ特集 「フェイバリット・ビュー」がおすすめする格安海外旅行です。気になったプランがあればすぐご予約を! 夢心地のプーケット! ¥36,800~¥122,000 お得な欲ばり2ヵ国周遊スペシャル!マレーシア&プーケット島5日 スピリチュアルタイ! ¥52,800~¥123,800 アユタヤ遺跡& バンパイン離宮観光付き!マンダリンセンターポイント2泊4日 憧れのサントリーニ島! ¥169,800~¥245,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 ヨセミテで大自然満喫! ¥41,029~¥159,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 もっと見る 海外ツアーを探す ヨーロッパ 北アメリカ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア 出発地 東京 羽田 成田 大阪(関空+伊丹) 関西国際 伊丹 名古屋(中部+名古屋駅) 中部(セントレア) 名古屋駅 福岡(福岡+博多港) 福岡 博多港 札幌 出発希望日 行き先 選択してください ヨーロッパ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア キーワードで探す スタッフの海外旅行記 パリ・ルーブル パリは歩いているだけで本当に楽しかったです。 (ヨーロッパ担当スタッフA) アンテロープキャニオン うっとりするような曲線とやわらかな色に差し込む陽の光が幻想的でした! (アメリカ担当スタッフH) アイスランド セリャランスフォス滝は、透けるような滝でまさに絶景でした。 (ヨーロッパ担当スタッフK) タイ・サムイ島 海がキレイ!プーケットより断然サムイ島です! (アジア担当スタッフM) イタリア・ヴェネチア さよならサン・マルコ。一生に一度は行っておきたい場所。 (ヨーロッパ担当スタッフA) ノイシュバンシュタイン城 初めて見るノイシュバンシュタイン城にちょっとテンションが高くなります。 (ヨーロッパ担当スタッフS) もっと見る 〒151-0051 東京都渋谷区千駄ヶ谷 2-15-62 03-5690-98422 favo_view@co.jp おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ トラベルサポート 海外旅行保険 保険募集に関する勧誘方針及び販売方針 外務省海外安全情報 厚生労働省感染情報 個人情報保護方針 2018 Favorite view. All Rights Reserved. ``` もしくは、 `.btn-menu` クラスを持つ要素に対して高さを持たせることでも実質的に問題を解消出来ます。 ``` $(function() { var showFlag = false; var topBtn = $('#page-top'); topBtn.css('bottom', '-280px'); var showFlag = false; $(window).scroll(function() { if ($(this).scrollTop() > 100) { if (showFlag == false) { showFlag = true; topBtn.stop().animate({ 'bottom': '40px' }, 200); } } else { if (showFlag) { showFlag = false; topBtn.stop().animate({ 'bottom': '-280px' }, 200); } } }); topBtn.click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); $('.acc').hide(); $('.trigger').on('click', function() { $(this).toggleClass('active'); $(this).next().slideToggle(); }); }); ``` ``` @charset "utf-8"; /* CSS Document */ body { font-size: 14px; } header { height: 200px; background-color: yellow; } /*ロゴ*/ header .logo img { float: center; display: block; height: 20px auto; } /*トップ画像*/ #kv { top: 20%; position: relative; } #kv :after { display: block; width: 100%; background: rgba(0, 0, 0, .4); } #kv img { width: 100%; } #kv .catch { position: absolute; z-index: 2; top: 50%; text-align: center; width: 100%; font-size: 200%; color: #fff; left: -3px; } .filter { background: #000; } .filter-img { display: block; opacity: .6; } #recommend h1 { text-align: center; font-size: 200%; color: #CC6B29; } /*検索窓*/ header i { float: right; } /*グローバルナビ*/ .global ul { display: inline-block; list-style: none; overflow: hidden; } .global li { font-family: 游ゴシック; width: 15% auto; text-align: center; float: right; height: 60px; line-height: 50px; margin-right: 2px; background-color: pink; } .global li a { vertical-align: middle; text-decoration: none; color: #fff; font-weight: bold; padding: 20px; } .btn-menu { /* 追記 */ height: 20px; background: red; } ``` ``` フェイバリット・ビュー HOME おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ あなたの「お気に入りの景色」フェイバリット・ビューを見つけてください もっと詳しく おすすめ特集 「フェイバリット・ビュー」がおすすめする格安海外旅行です。気になったプランがあればすぐご予約を! 夢心地のプーケット! ¥36,800~¥122,000 お得な欲ばり2ヵ国周遊スペシャル!マレーシア&プーケット島5日 スピリチュアルタイ! ¥52,800~¥123,800 アユタヤ遺跡& バンパイン離宮観光付き!マンダリンセンターポイント2泊4日 憧れのサントリーニ島! ¥169,800~¥245,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 ヨセミテで大自然満喫! ¥41,029~¥159,800 世界遺産ヨセミテ国立公園、西海岸人気都市を訪ねる5日間 もっと見る 海外ツアーを探す ヨーロッパ 北アメリカ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア 出発地 東京 羽田 成田 大阪(関空+伊丹) 関西国際 伊丹 名古屋(中部+名古屋駅) 中部(セントレア) 名古屋駅 福岡(福岡+博多港) 福岡 博多港 札幌 出発希望日 行き先 選択してください ヨーロッパ アジア アフリカ・中東 ミクロネシア 中南米 オセアニア キーワードで探す スタッフの海外旅行記 パリ・ルーブル パリは歩いているだけで本当に楽しかったです。 (ヨーロッパ担当スタッフA) アンテロープキャニオン うっとりするような曲線とやわらかな色に差し込む陽の光が幻想的でした! (アメリカ担当スタッフH) アイスランド セリャランスフォス滝は、透けるような滝でまさに絶景でした。 (ヨーロッパ担当スタッフK) タイ・サムイ島 海がキレイ!プーケットより断然サムイ島です! (アジア担当スタッフM) イタリア・ヴェネチア さよならサン・マルコ。一生に一度は行っておきたい場所。 (ヨーロッパ担当スタッフA) ノイシュバンシュタイン城 初めて見るノイシュバンシュタイン城にちょっとテンションが高くなります。 (ヨーロッパ担当スタッフS) もっと見る 〒151-0051 東京都渋谷区千駄ヶ谷 2-15-62 03-5690-98422 favo_view@co.jp おすすめ特集 スタッフの海外旅行記 特典・サービス お問い合わせ トラベルサポート 海外旅行保険 保険募集に関する勧誘方針及び販売方針 外務省海外安全情報 厚生労働省感染情報 個人情報保護方針 2018 Favorite view. All Rights Reserved. ```