Home > XHTML CSS > CSS メニュー横並びボタン

CSS メニュー横並びボタン

  • Posted by: wu
  • 2005年8月24日 09:20
  • XHTML CSS

2009-02/26更新しました。

ボタン横並びナビゲーションメニューのサンプル

<ul id="globalNavi">
 <li><a href="./">List1</a></li>
 <li><a href="./">List2</a></li>
 <li><a href="./">List3</a></li>
 <li><a href="./">List4</a></li>
</ul>

class名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。

Comments:12

wu 2005年8月25日 17:45

こうして書いてみると思ってるより簡単なんだなぁ・・・。なんでいつもややこしく感じていたんだろ。

sen 2007年5月26日 17:10

検索していて、拝見しました。
このリンクですが、グレーの背景?のところは
色を変えることが出来ますか?

何度かやってみたのですが、うまくいきませんでした・・・
もしよろしければ、教えてください。

wu 2007年5月26日 17:17

もちろんできますよ。
ul#globalNavi li a {
.
.
background-color: #eee;
}
background-color: #eeeというところがグレーの指定です。

Anonymous 2007年8月29日 09:51

すごくためになります。ありがとうございます。
今なんとかメニューとタイトルの間のスペースを埋めようとしているのですが、中々うまくいきません。
のなかにいれているからでしょうか?

kon 2009年4月 9日 12:51

拝見させていただいて、大変勉強になっています。
少し質問なのですが、メニューに堺に入っている罫を、左右両側に1ピクセルの罫に設定すると内側が2ピクセルになってしまいます。右だけ左だけにすると右端、左端の罫がなくなってしまいます。
すべて1ピクセルの罫にするには、どうすればいいのでしょうか。

wu 2009年4月 9日 13:00

以下のように、最後(または最初)の要素にクラスをつけて、ボーダーを操作する方法がよいでしょう。

それぞれの左にボーダーを指定

  • 1

  • 1

  • 1

  • 1
  • .lastChild には、右のボーダーを指定。

    これは、:first-child 疑似クラスに対応するまでのノウハウとして良く使われています。

    kon 2009年4月 9日 14:10

    早速、教えていただきだりがとうございます。
    初心者のため、クラスの設定方法も分かりませんでしたが、調べて、なんとか思うようにできました。
    あきらめて画像でも入れるかと思っていただけに、助言いただけたおかげで、壁だと思っていたところの扉が開いたようでした。
    また、よろしくお願いします。

    wu 2009年4月 9日 16:24

    あれ、ごめんなさい。
    コメントで記述したHTMLが意図した表示になってませんでした。

    <li>1</li>
    <li>2</li>
    <li class="lastChild">3</li>

    kon 2009年4月 9日 20:00

    たびたびで、申し訳ないです。
    このメニューをbodyの中央に持ってきたいのですが、floatのleftが効いているためなのか、どうしてもうまくいきません。
    なにかいい方法があるのでしょうか。

    wu 2009年4月 9日 21:32

    それはCSS全般の質問になるので、調べてみてください。
    (このメニューのCSS関係ありません。

    CSS 中央寄せ

    kon 2009年4月10日 01:02

    ありがようございます。
    ここに書き込む前にいろいろ検索してみて試してみたのですが、うまく中央揃えにならなくて。もう少し探してみますね。

    mishimax 2009年4月14日 09:47

    はじめまして。
    サンプルのCSS(http://3ping.org/2005/08/24/sample_menu02/style.css)
    ul.globalNaviとなっておりますが、ul#globalNaviとかですよね。class ではなくid。
    ご確認後、このコメントは削除してくださいませ。

    Trackbacks:0

    TrackBack URL for this entry
    http://3ping.org/mt2/mt-tb.cgi/51
    Listed below are links to weblogs that reference
    CSS メニュー横並びボタン from 3.5ping.org

    Home > XHTML CSS > CSS メニュー横並びボタン

    Book

    実践 Web Standards Design

    「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

    Products
    Search
    Feeds

    Return to page top