制作工程ブログ
おいでよコードの森

メニューの両端に線を表示させない方法

  • 2014年05月20日|
  • 若林 遼|

参考サイト

・CSSだけでリストや横並びの区切り線を実現するパターン4つ
http://cappee.net/coding/css-separator-line#i-3
・隣接セレクタ
http://www.htmq.com/selector/adjacent.shtml

メニューの両端の枠線、borderを消すCSS

いきなり参考サイトを載せるというブログ初心者っぷりをさらけだしながら、
今回はサイトを作る上でほぼ必須といえるグローバルメニューに対するCSSについて書こうと思います。

結論から言うとCSSの「隣接セレクタ」を使うことで解決できます!
これで両端のいらん線、いらんライン、いラインを消すことができます。
コード例とデモは以下の通りになります。

隣接セレクタ

★html

<ul>
  <li>カレー</li>
  <li>ビーフカレー</li>
  <li>カツカレー</li>
  <li>ほうれん草カレー</li>
  <li>肉じゃがカレー</li>
</ul>

★CSS

ul{
  width:500px;
  border:1px solid #000000;
  list-style:none;
}
li {
  padding: 10px 5px;
}
li + li {
  border-top:1px solid #EDB802;
}

★デモ(見栄えのためのCSSをすこし加えています)

  • カレー
  • ビーフカレー
  • カツカレー
  • ほうれん草カレー
  • 肉じゃがカレー

隣接セレクタとは何か?

簡単に説明すると親要素からみて子要素となる並びあう要素同士に掛かるCSSです。
例のように隣接しあうliタグに掛けたければli + liと記述すれば親のulタグからみて隣り合う子要素のliタグに掛かります。
+という表記を使ってるのでCSSが掛かるのは左か右かと思うかもしれませんがA +B{}と書いた場合はBの方にCSSが掛かってきます。言葉にすれば、AとBが隣接しているときのBに適応されるCSS、になります。
つまり

p + ul{
  background:red;
}
ul + p{
  background:yellow;
}

と書くとpタグに隣接しているulの背景は赤くなりますが、pタグの方は赤くならずにulに隣接しているpタグに掛かるCSSで黄色になります。

まとめ

隣接クラスタはメニューの端と端のラインを消すだけでなく他にも応用が効き、なおかつコードがスッキリするのでネガティブマージンを使う以外の選択肢の一つとして覚えておいて損はないと思います。