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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

Q&A

解決済

1回答

1477閲覧

ホームページのヘッダーのプルダウンメニューの背景色が上手く表示されない

KentaroOnoda

総合スコア17

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/09/08 23:34

編集2017/09/11 20:07

・ホームページのヘッダー部分(プルダウンメニュー)の背景色(background-color)が上手く表示できません。
現在の状況が以下の画像の通りです。
イメージ説明
理想は以下のようにしたいです。
イメージ説明
関連のHTMLファイル及びCSSのスクリーンショットは以下の通りになります。
ファイル名:index.php

<div id="hpb-container"> <!-- ヘッダー --> <?php //ヘッダーを表示する headershow($projectName); ?> <!-- inner --> <!-- content -->

ファイル名:style.css

#hpb-main-nav{ width: 100%; min-width: 900px; font-size: 1.4em; margin-top: 1.6em; background-color: #022e5b; overflow:auto; } #hpb-main-nav ul{ width: 900px; margin-left: auto; margin-right: auto; } #hpb-main-nav li{ white-space: nowrap; padding-left: 2px; padding-right: 2px; float: left; background-color: #022e5b; display: block; } #hpb-main-nav li a{ color: #FFFFFF; padding-bottom: 17px; padding-left: 10px; padding-right: 10px; padding-top: 16px; display: block; } #hpb-main-nav li a:hover, #hpb-main-nav li.current-menu-item a, #hpb-main-nav li.current-menu-ancestor a, #hpb-main-nav li.current-menu-item:hover a:hover, #hpb-main-nav li.current-menu-ancestor:hover a:hover{ background-image: url('img/nav-hover-back.png'); } #hpb-main-nav li:hover{ position: relative; }

ファイル名:header.php

* ヘッダーを表示する */ function headershow($projectName){ include 'pullDownMenu.php'; echo "<header id=hpb-grobal-header>"; echo "<hgroup id=hpb-header-main>"; echo "<div id=headlogo>ヒト、組織、会社を 資源を “生かし 活かす”</br>"; echo "<span class=headtitle>有限会社JPG(ジェイ・ピー・ジー)</span></br>"; echo "&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span class=cmpname>Just Profit Guide</span>"; echo "</hgroup>"; echo "<div id=hpb-header-extra1><span> TEL.</span>052-○○○-△△△△"; echo "<p class=address>〒○○○-△△△△ 愛知県名古屋市□□□□</p>"; echo "</div>"; echo "<nav id=hpb-main-nav>"; echo "<div class=menu-mainnav-container>"; //メニューを表示する menushow($projectName); echo "</div></nav></header>"; }//headershow() コード

ファイル名:pullDownMenu.php

* プルダウンのヘッダーメニューを表示する * */ function menuShow($projectName){ echo "<ul id=normal class=dropmenu>"; switch ($projectName){ case "jpg": //メインメニュータイトル $menuName = jpg_menu_title(); //サブメニューの配列 $submenu = jpg_submenu(); break; }//switch menuListShow($menuName,$projectName,$submenu); echo "</ul>"; }//menuListShow() /** * メニューリストを表示する */ function menuListShow($menuName,$projectName,$submenu){ foreach ($menuName as $key => $val){ //初期化 $cnt=0; for($i = 1; $i < count($submenu); $i++){ $row = count($submenu[$i]); //$i行目の要素を$rowにコピーする //メインメニュー名を表示するfor文の二重ループ for($j = 0; $j < $row; $j++){ //count($row)は列数となる。 $key1 = $submenu[$i-1][$j]; if($key == $key1 && $cnt<=0){ switch ($projectName){ //プロジェクトによって処理を分ける case "jpg": if ($key == "index") { //パスを取得する $filepath = PathReturn($key,$projectName); echo "<li><a href=". $filepath .">" . $val . "</a>"; echo "<ul>"; $cnt++; break; }else{ echo "<li><a href=#>" . $val . "</a>"; echo "<ul>"; $cnt++; break; }//if }//switch }elseif($j >= $row - 1 && $cnt <= 0){ //サブメニューがない場合 switch ($projectName){ //プロジェクトによって処理を分ける case "jpg": //パスを取得する $filepath = PathReturn($key,$projectName); echo "<li><a href=". $filepath .">" . $val . "</a>"; echo "<ul>"; break; }//switch }//if }//for }//for //}//foreach //foreach ($menuName as $key => $val){ for($i = 1; $i < count($submenu); $i++){ $row = count($submenu[$i]); //$i行目の要素を$rowにコピーする $cnt = 0;//キー数カウント //for文の二重ループ for($j = 0; $j < $row; $j++){ //count($row)は列数となる。 $key1 = $submenu[$i-1][$j]; if($key == $key1){ $page = $submenu[$i][$j]; //<li>属性を表示する listshow($page,$projectName); $cnt++; //echo "</ul></li>"; }//if }//for }//for echo "</ul></li>"; }//foreach }//menuListShow() /** * <li>属性を表示する */ function listshow($page,$projectName){ $filepath = PathReturn($page,$projectName); $path = basename($filepath); $title = titleShow($path,$projectName); if($filepath == $_SERVER['PHP_SELF']){ //現在いるページ echo "<li class=current-menu-item>"; }else{ echo "<li>"; }//if echo "<a href=" . $filepath . ">" . $title . "</a></li>"; }//listshow() コード

ファイル名:array.php

* ページのパスとページタイトルを返す * */ function jpg_page_array(){ $pageArray = array("index.php"=>"トップページ","concept.php"=>"会社方針","company.php"=>"企業概要","reuse_recycle.php"=>"リユース・リサイクル","lubricant.php"=>"特殊潤滑油", "contact.php"=>"お問い合わせ","contactsure.php"=>"お問い合わせ内容確認","newsContent.php"=>"更新情報内容" ,"newsList.php"=>"更新情報一覧","informationTreat.php"=>"個人情報の取り扱いについて","productInf.php"=>"引取可能商品について","lubproductInf.php"=>"Tacbecon取り扱い商品について" ,"productDetail.php"=>"引取可能商品詳細","lubproductDetail.php" => "取り扱い商品詳細","itsolution.php"=>"ITソリューション事業" ); return $pageArray; }//jpg_page_array() /** * メニュータイトルを返す */ function jpg_menu_title(){ $pageArray = array("index"=>"トップページ","jpg"=>"ジェイ・ピー・ジーについて","jigyou"=>"事業内容","contact"=>"お問い合わせ"); return $pageArray; }//jpg_menu_title() /** *プルダウンメニュー表示用 */ function jpg_submenu(){ $mainmenu = array("index","jpg","jpg","jigyou","jigyou","jigyou","jigyou","jigyou"); $submenu = array("newsList","concept","company","reuse_recycle","productInf","lubricant","lubproductInf","itsolution"); $pageArray = array($mainmenu,$submenu); return $pageArray; }//jpg_submenu() コード

自分でいろいろ原因を探ってみたところ、
CSSの#hpb-main-nav liで「float:left;」と設定していると
現在の状況になってしまうことが分かりました。

そこで、解決策をいろいろ調べたところCSSの410行目で「overflow:auto;」と設定すると、
理想通りに表示されました。しかし、今度は以下のようにプルダウンメニューが
上手く表示されなくなってしまったのです。
イメージ説明

どうすればこの問題を解決できるでしょうか?お力添えを頂けると幸甚に存じます。
恐れ入りますが、よろしくお願い申し上げます。

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

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

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

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

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

motuo

2017/09/09 00:38

出来ればスクリーンショットではなく、ソースコードをそのまま記載して頂けませんか?記載する時には、```で囲うと見易くなり、回答も付きやすくなると思います。
s8_chu

2017/09/09 08:29

画像ではなくコードを追記してください。
KentaroOnoda

2017/09/11 19:41

ご指摘頂きありがとうございます。修正しましたので、ご教示頂けると幸いです。よろしくお願いします。
guest

回答1

0

ベストアンサー

CSSのclearfixというのはご存知でしょうか?

float:left, float:rightなどを行うと、指定の要素のレイヤーが浮き上がってしまい、すべての外側の要素の高さがゼロになってしまう現象を防ぐために一般的に使われているCSSクラスです。

質問のコードでは、メニューの<li>float:leftになっているので、外側の<ul id="normal" class="dropmenu">や、更に外側の<div id="hpb-main-nav">の高さがゼロになってしまっています。

css

1#hpb-main-nav { 2 width: 100%; 3 font-size: 1.4em; 4 margin-top: 1.6em; 5 background-color: #022e5b; 6} 7 #hpb-main-nav #normal.dropmenu:before, 8 #hpb-main-nav #normal.dropmenu:after { 9 content: ' '; 10 display: table; 11 } 12 #hpb-main-nav #normal.dropmenu:after { 13 clear: both; 14 } 15...

CSSにclearfixクラスを追加しておくといつでも使うことができます。下記はBootstapというCSSフレームワークでの例です。

css

1.clearfix:before, 2.clearfix:after { 3 content: ' '; 4 display: table; 5} 6.clearfix:after { 7 clear: both; 8}

上記のようなCSS以外にも、実際に試されたoverflow:autoでもfloatを解除できます(下記CSSコード)。しかし、今回はCSSののなんらかの影響でoverflowが影響していたため、メニュー表示に影響があったのかと思います。

css

1#hpb-main-nav { 2 width: 100%; 3 font-size: 1.4em; 4 margin-top: 1.6em; 5 overflow: auto; /*← ここ*/ 6 7 background-color: #022e5b; 8}

投稿2017/09/09 10:28

Tomak

総合スコア1652

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

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

KentaroOnoda

2017/09/11 20:13

ご教示頂きありがとうございます。ご指摘頂いた内容を試したところ修正できました。本当に感謝しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問