ナビゲーションボタンの幅をページの幅に合わせる方法について
- ナビゲーションボタンの幅をページの幅に合わせる方法について教えてください。
- 現在、ナビゲーションボタンの幅をCSSで調整していますが、より汎用的にページ幅に合わせる方法があるのでしょうか？
- サンプルソースのようなドロップダウンを備えたナビゲーションを実装したいですが、CSSの知識が不足しており困っています。アドバイスをお願いします。
- ベストアンサー
ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。
ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。 例えば、ページの幅を800pxとってあり、8個のナビゲーションボタンを設置する場合は、1つ辺り100px。10個の場合ですと、80pxと、均一の幅で、かつページの幅一杯まで占めるような表示をしたいと考えています。 http://solidstate.jp/Navigation/DropdownMenu/script_50.html そこで、上記サイトよりサンプルとして配布されているソースを試しているのですが、widthなりpaddingなりでcss側で調整している状況となっています。 そこで質問なのですが、上記のよなサンプルソースの場合、widthは指定しなくても、ボタンの数に合わせて汎用的にページ幅に沿うようなものは出来ないのでしょうか？ サンプルソースのように、多階層が可能なドロップダウンを備えたナビゲーションが欲しく、やっと探し得たのですが、CSSの知識が乏しく困っている状態です。 お忙しいなか恐縮ですが、アドバイスなど頂戴出来れば幸いです。宜しくお願い申し上げます。
- a4_chapp
- お礼率85% (89/104)
- HTML
- 回答数3
- ありがとう数10
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
言葉足らずで申し訳ありません。 jQueryを利用したサンプルとなっておりますので、先ほど提示した ソース以外にjQuery(最新版だとjquery-1.4.2.min.js)が必要となります。 http://jquery.com/から最新版をダウンロードし、 先ほどのソースの下記箇所(jquery.min.js)を適宜書き換えてください。 <script src="jquery.min.js"></script> 例：jquery-1.4.2.min.jsをダウンロードし使用する場合 <script src="jquery-1.4.2.min.js"></script> また、リンク先にあるサンプルソースに適用する場合には、 liの下にも<ul>要素を作成されているようですので、 var li = jQuery("#menu li"); ↓ var li = jQuery("#menu > li"); に変更が必要です。 最終的なJavaScript部分は下記のようになります。 <script src="jquery.min.js"></script> <script> jQuery(document).ready(function(){ var width = jQuery("#menu").width(); var li = jQuery("#menu>li"); li.each(function(){ jQuery(this).css("width",Math.floor(width/li.length)+"px"); }); }); </script>
その他の回答 (2)
- nekomikekamo
- ベストアンサー率73% (71/97)
javaScriptを利用すれば比較的簡単に実装できるのではないでしょうか。 CSSだけではできないような気がします。 jQueryを利用した実装例を示します。 <ul id="menu">以下にli要素を増やせば自動的に幅調整してくれます。 javaScriptがOFFの場合の表示なども考慮してデザインされることを お勧めします。 <html> <head> <script src="jquery.min.js"></script> <script> jQuery(document).ready(function(){ var width = jQuery("#menu").width(); var li = jQuery("#menu li"); li.each(function(){ jQuery(this).css("width",Math.floor(width/li.length)+"px"); }); }); </script> <style> #main_nav {width:800px;} ul{padding:0;margin:0;} ul li{display:inline;float:left;} li a {display:block;} </style> </head> <body> <div id="main_nav"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </div> </body> </html>
お礼
こんばんは。ご親切にソースまで提示して頂き、ありがとうございます。 早速とばかり、ソースを拝借して試しているのですが、指定した幅（ソースでいうwidth:800px）に反映してくれません。 当方が考えているのは、下層部のリンク先も表示するようなドロップダウンを考えているので、そのままのソースが利用出来ると甘く考えていませんが、ヒントに繋がればと考えているので、今一度アドバイスのほど頂戴出来れば幸いです。 お忙しいなか恐縮ですが宜しくお願い致します。
そこで質問なのですが、上記のよなサンプルソースの場合、widthは指定しなくても、ボタンの数に合わせて汎用的にページ幅に沿うようなものは出来ないのでしょうか？ >>ないです。 サンプルソースのように、多階層が可能なドロップダウンを備えたナビゲーションが欲しく、やっと探し得たのですが、CSSの知識が乏しく困っている状態です。 >>CSSで幅を指定できるから便利なんです。Javascriptでやると大変複雑になるでしょう。 お忙しいなか恐縮ですが、アドバイスなど頂戴出来れば幸いです。宜しくお願い申し上げます。 >>CSSでできるから楽にサイズ設定ができるのです。
お礼
こんばんは。早々のアドバイスをありがとうございます。 すぐに解決できそうにありませんが貴重なアドバイスとしてお受けいたします。 ありがとうございました。
関連するQ&A
- ウインドウ幅に合わせて幅の変わるボタン
ホームページ作成のcssについて質問です。 このページのような、 http://xn--up-gd4a8cufa0d4zb5h.com/ ウインドウ幅に合わせて幅の変わるボタンは、どうやって作ったらいいですか？ まだ勉強しはじめたばかりで、よくわかりません。 cssでボタンを作るのは、自分でも調べてみて、こんな感じだとわかりました。 .sample { width:200px; font-size:24px; font-weight:bold; text-decoration:none; display:block; text-align:center; padding:8px 0 10px; color:#333; border:1px solid #333; } でも、これだと画面の幅を変えても、ボタンの幅が変わりません。 cssに詳しい方、教えていただけると助かります。
- ベストアンサー
- CSS
- ナビゲーションボタンについて
どうぞ、よろしくおねがいします。 ホームページを作る際に、 「TOP」ですとか「Q&A」といったページなどに誘導する ナビゲーションボタンがありますが、 これは、普通にボタン用の画像を貼り付けて、 それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか？ 色々なサイトのソースを見て調べているのですが、 このようなやり方で記述されているサイトがなく、 質問させていただきました。
- 締切済み
- HTML
- スタイルシートの記述方法に関して。
スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。
- ベストアンサー
- CSS
- ナビゲーションを作りたい
サイトによくあるナビゲーションを作りたいと思っています。 以下のようなものです。 ホーム ＞ ページ1 静的に一個ずつ毎ページだと階層が変わったときに作業が大変なので、なんとかスクリプトで出来ないかとgoogleで検索してみたものの、javascriptで出来るみたいなのはあったのですが、実際のソースがなく、いかがなものかと思い、ご存知の方のお知恵をお借りしたく存じます。 どうぞヨロシクお願いします。
- 締切済み
- JavaScript
- ページ全体をセンタリングできません
フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。
- ベストアンサー
- CSS
- CSSのレイアウトについて
CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }
- 締切済み
- CSS
- cssを使って分割したページのレイアウトが崩れてしまいます
はじめまして。 見よう見真似でcssでページの分割を始めたのですが、ウインドウのサイズを変えるとレイアウトが崩れてしまって、何度手直ししても直らず暗礁に乗り上げてしまった為、質問させて下さい。 幅780で設計しているページ内にコンテンツ(左)とサイドバー(右)で左右に分割表示している部分があります。 コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。 ブラウザのウインドウ幅を小さくするとサイドバーがコンテンツの下に回り込んでしまうのでサイドバーをposition:absoluteで固定してみたのですが、今度はウインドウ幅を大きくすると下段のテーブルや最下段に自動でくっついてくる広告がサイドバーに重なってしまうことになり、解決策が見出せずにいます。 ウインドウのサイズを変更してもレイアウトが崩れないようになる手段をご存知の方がおりましたらご教授頂ければと思います。 また、本来やりたかったレイアウトがありまして、コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めることは可能でしょうか？ こちらも手段をご存知の方がおりましたら合わせてご教授下さい。 以下ソース抜粋 htmlファイル↓ <body> 割愛 <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> </body> 読み込んでいる外部cssファイル↓ <style type="text/css"> #container{width:780px;text-align:left;margin:0px auto;} #header{width:780px;margin:0px 0px 15px 0px;} #content{float:left;width:500px;padding:10px 2px 2px 8px;} #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} #footer{clear:both;width:770px;margin:15px 5px 15px 5px;} </style> div{ font-size: 10pt; margin: 1%; padding: 2%; line-height: 120%; border-style: double; border-color: #F5F5F5; background-image:url("背景画像") }
- ベストアンサー
- HTML
- Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 締切済み
- HTML
- cssでimgのpaddingを個々に設定
初歩的なことだと思いますが、つまづいてしまっているので教えてください。 同じページ内のimgのpaddingを個々に設定したい場合はどうすればよろしいのでしょうか。 現在cssには img { padding-left: 5px; padding-top: 5px; とだけ記述してあり、HTMLで <img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"> と記述すると、もちろんのことimgはすべて上記のcssが反映されますよね。 かなり単純なことだと思いますが、よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
発送のお返事、ご親切な対応をありがとうございます。 悲しいかな、設置しただけで解決するまでには至りませんでしたが、このヒントを基に取り組んでみたいと思います。 取り急ぎご挨拶とお礼まで。 ありがとうございました。