TearsSwitch

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

コーダーblog
若林 遼 若林 遼
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で黄色になります。

まとめ

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

1987年5月7日生まれ、大阪出身。東京電機大学理工学部 平成25年卒。

大学卒業後、生きる目的を見失っていたところ救世主・米田氏と創造主・赤坂氏と出会う。
アルバイトをしながら職業訓練校に通い卒業後、TearsSwitchに入社。
一人暮らしを始め、実家にて生卵を隠れて食べる生活から脱却。
新しいことに抵抗がなく、便利そうなら取り入れるのが強み。

お客様の笑顔を妄想しつつ、日々仕事に励みます。