• ベストアンサー

CSSでドロップダウンにしたいのですが

ORUKA1951の回答

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

説明の追加です。 この方法だと、ウィンドウサイズいっぱい近くで表示されるため、ウィンドウ幅に依存しないはずです。=スマホのような小さい画面でも。 なお気づきですが *{font-size****;list-style***}のように、全称セレクタですべてのデフォルトのスタイルを消してしまうのはとてもまずいです。★これはオーサリングツール★が、しばしば利用している方法で、テンプレートをそのまま使用する場合は兎も角、すべての新しい要素が登場するたびに、スタイルを追加する必要があるため、スタイルシートがとてつもなく肥大化してしまいます。メンテナンス不能のサイトになってしまいます。 body#bodyのよな書き方もしません。一意セレクタは詳細度が高くて、後で修正できなくなります。単純に body{} でよいです。  不必要にIDをつけないようにすると、HTMLもスタイルシートも簡潔になります。

関連するQ&A

  • cssでのドロップダウンメニューについて

    いつもお世話になっております。 すみません。。。 下記URLのテンプレートを使用して、かつ、ヘッダーのタブメニューに、プルダウンメニュー (タブにマウスオーバーすると、ドロップダウンでメニューが表示)を導入をこころみて いますが、どうしても、IE系(6,7,8)とFireFox系(3)で、表示が大幅にづれてしまいます。 なんとか、ドロップダウンのメニューのサンプルをご教示いただけませんでしょうか。 http://matthewjamestaylor.com/blog/ultimate-1-column-full-page-pixels.htm

    • ベストアンサー
    • HTML
  • CSSのドロップダウンメニューが見出しで切れる

    CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ドロップダウンメニューに関する質問。超初心者です。

    ドロップダウンメニュー(親メニューだけgif画像で子メニューはcssで表示)を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m  

  • タブレットのドロップダウンメニューについて

    会社のWebの管理をしていますが、5年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。

  • CSSのドロップダウンメニューについて

    お世話になります。CSSについての質問です。 添付の写真のようなメインナビゲーションのドロップダウンメニューについてですが、 赤丸の下線の部分の白線の位置(ドロップダウンメニューのスタート位置)を下げるにはどう記述したらいいでしょうか? よろしくお願いします。 .main-navigation ul ul li a { background-color:#333!; border-top: 1px solid #fff; border-color: #fff; line-height: 1.5; padding-bottom: 14px; padding-top: 14px; }

    • ベストアンサー
    • CSS
  • 全てが展開するドロップダウンメニュー

    こんにちは。 サイトのメニューをドロップダウンメニューにしようかと 思っているのですが、MITSUBUSHIMOTORSのサイトの ような全てが展開するドロップダウンメニューがいいなと 思っているのですが、似たようなサンプルが見当たらず、 知っている方がいたらと思い投稿しました。 http://www.mitsubishi-motors.com/jp/index.html 似たようなものを知っている方がおりましたら 教えてください。 よろしくお願いします。

  • CSSだけでアニメーション・ドロップダウンメニュー

    CSSでアニメーション・ドロップダウンメニューを作りたいのですが http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/ ここを参考にしているのですが、 ホーム・会社案内・リクルート・お問い合わせ各ページがあるのですが 例えば、お問い合わせページを見ている時は そのページのボタンの背景が違うようにしたいのですが どうすればいいのでしょうか? ご教授頂けたらありがたいです。

  • CSSのドロップダウンメニューについて

    ドロップダウンメニューについての質問です。 長文になります。 現在、こちらのサイト(http://js.crap.jp/book/chapter2/drop-down-menu2.html)のものを改良して使わせていただいております。 今回、このドロップダウンメニューのサブメニューの中に以下のものを入れたいのです。 <div align="left" style="overflow-y:scroll;width:800px;height:250px;"> <ul> </ul> </div> 試行錯誤したのですが、うまくいきません。 以下のことをしたいです。 1.メインメニューのリンクを全てはずしたい。 2.上記参考サイトでのサンプルで言うところの、メインメニューの『webpark』と『スタイルシート』の部分のサブメニューにだけ上記のoverflow-y:scrollを入れたい。 3.overflow-y:scrollのなかにはリスト形式で文章を入れる予定なのですが、その文中の特定の文字にはリンクをつけたい。 4.上記参考サイトでのサンプルで言うところの、メインメニューの『お役立ちサイト』『javascript』『ウェブデザイン』の部分のサブメニューは既存のまま使いたい。 何とか実現させたいです。 分かる方ご協力お願いいたします。 なお当方、無知な初心者ゆえ、うまく質問できているかも分かりません。 質問の意図するところが分からないという場合は追記させていただきます。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ドロップダウンメニュー

    このようなドロップダウンメニューを作りたいのですが、サンプル等、参考になるURLをご存知の方、よろしくお願いいたします。 http://www.adenin.com/EnterprisePortal.html それと、HPビルダーに使うことは可能でしょうか?

  • ドロップダウンメニューについて

    javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。