下記サンプルのTOPPAGEという所をCSSでドロップダウンにしたいのですが、うまくいきません。
http://sample1.digi2.jp/
何が足りないのでしょうか?
お教えください。
No.2ベストアンサー
- 回答日時:
説明の追加です。
この方法だと、ウィンドウサイズいっぱい近くで表示されるため、ウィンドウ幅に依存しないはずです。=スマホのような小さい画面でも。
なお気づきですが
*{font-size****;list-style***}のように、全称セレクタですべてのデフォルトのスタイルを消してしまうのはとてもまずいです。★これはオーサリングツール★が、しばしば利用している方法で、テンプレートをそのまま使用する場合は兎も角、すべての新しい要素が登場するたびに、スタイルを追加する必要があるため、スタイルシートがとてつもなく肥大化してしまいます。メンテナンス不能のサイトになってしまいます。
body#bodyのよな書き方もしません。一意セレクタは詳細度が高くて、後で修正できなくなります。単純に
body{}
でよいです。
不必要にIDをつけないようにすると、HTMLもスタイルシートも簡潔になります。
No.1
- 回答日時:
動的な疑似クラス (
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )で指定します。HTMLが、
<div class="nav" id="siteMap">
<ol>
<li><a href="/">Top</a></li>
<li><a href="/Product">Product</a>
<ol>
<li><a href="/Product/1">製品1</a></li>
<li><a href="/Product/2">製品2</a></li>
<li><a href="/Product/3">製品3</a></li>
</ol>
</li>
<li><a href="/Books/1">Books</a>
<ol>
<li><a href="/Books/1">書籍1</a></li>
<li><a href="/Books/2">書籍2</a></li>
<li><a href="/Books/3">書籍2</a></li>
</ol>
</li>
<li><a href="/Profile">Profile</a></li>
<li><a href="/Contact">Contact</a></li>
</ol>
</div>
だとします。
きちんと順序だてて説明しますから、きちんと理解してください。わからない用語は、面倒臭くても、上記仕様書やそれぞれのリンク先で調べるほうが身に付くでしょう。
class名のnavは、文書構造を補完するために付けてあります。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
『HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
ここは、idを使ってスタイルを書きます。
#siteMap{
position:absolute;/* 絶対配置で位置を指定する */
top:0;left:0;/* 位置 */
width:100%;/* 幅を親コンテナブロックいっぱい */
/* 以下は継承されるプロパティなので一番親に書いておく */
line-height:30px;/* 一行の高さ(リンクが中央に表示されるように) */
text-align:center;/* ボタンやリンクが中央に表示されるように */
}
#siteMap ol,#siteMap ol li{/* (子孫セレクタ) */
list-style:none;/* 継承されないのできちんと指定する */
margin:0;padding:0;/* ブラウザごとに差があるので消しておく */
}
#siteMap ol{
display:block; /* ブロックに変更 */
width:100%;/* 幅は#siteMapの幅まで */
}
#siteMap ol li{
display:inline-block; /* CSS2.1の指定、後方互換ならfloat:left */
width:18%;/* これでウィンドウ幅の18%になる */
position:relative;/* 内包ブロックの位置やサイズの基準とするため */
border:solid 1px red; /* わかりやすくするためとりあえず枠をつけておく */
}
#siteMap ol li ol{
position:absolute;/* 他と切り離すため、位置やサイズの基準は↑position:relative; */
top:100%;left:0;
}
#siteMap ol li ol li{
width:100%; /* 先に指定したwidth:18%を直しておく */
display:block;/* たてに配置するのでblock */
}
/* プルダウンにするため、隠す */
#siteMap ol li ol{/* 詳細度が [0 1 0 3] */
display:none;/* 存在そのものを消す */
}
/* 動的な擬似クラスで見せる。 */
#siteMap ol li:hover ol{/* 詳細度が[0 1 1 3]なので上書き */
display:block;
}
/* デザインを指定する */
#siteMap ol li{
background-color:fuchsia;
border:solid red 1px;/* 背景画像とか */
}
#siteMap ol li:hover{
background-color:yellow;/* 色名のキーワードは16色 */
}
/* ボタン全体でリンクが働くようにblockにしておく */
#siteMap ol li a{
display:block;
width:100%;height:100%;/* 基準は最も近い、static以外の親コンテナ */
text-decoration:none;
}
ここまでを、一つ一つの宣言を追加しては表示を確認して、なにをしているのか理解すること。
最後に整理して置きます。
#siteMap{position:absolute;top:0;left:0;width:100%;line-height:30px;text-align:center;}
#siteMap ol,#siteMap ol li{list-style:none;margin:0;padding:0;}
#siteMap ol{display:block;width:100%;}
#siteMap ol li{display:inline-block;width:18%;position:relative;background-color:fuchsia;}
#siteMap ol li ol{position:absolute;top:100%;left:0;display:none;}
#siteMap ol li ol li{width:100%;display:block;}
#siteMap ol li:hover ol{display:block;}
#siteMap ol li:hover{background-color:yellow;}
#siteMap ol li a{display:block;width:100%;height:100%;text-decoration:none;}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Excel(エクセル) 関数の質問です 3 2022/03/24 12:41
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS ワードプレスで太字が反映されません PC(MacBook)の画面上には、太字は反映されるのに、スマホ 3 2022/12/18 18:56
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- 教育・ドキュメンタリー どう言うことですか?OKWAVE 2 2022/04/20 18:41
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS「table-cell」で横並びにし...
-
liタグの中に<p>タグやら<dl>を...
-
CSS質問:大手サイトを見ると何...
-
リセットCSSについて
-
円形の配置にするコーディング...
-
【至急】ul li 行間調整ができ...
-
HPを作成していますが、適切な...
-
ol、liをスタイルシートで中央寄せ
-
ol li の回り込みの避け方について
-
divタグ内のコンテンツが重なっ...
-
親ページ側からインラインフレ...
-
jQueryの導入方法について
-
CSSで、親要素にだけ中央揃えを...
-
画像にリンクを張ると画像がず...
-
「・」(黒い点)を非表示にした...
-
表の文字サイズ変更ボタンにつ...
-
HTMLで組織図を作成する方法
-
文字をテーブルで囲ったような...
-
リストマーカーをボックス内に...
-
リストの左余白の削除方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
<ul><li></li></ul>にするメリ...
-
html/cssの、navを2段にする...
-
divタグ内のコンテンツが重なっ...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
リストを2つに分割して、それぞ...
-
ページを開いているときのリン...
おすすめ情報