フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife

フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp

[ku_marin]

bkmしわすれ。凄くよく使うのに忘れる

[junichi_ito]

css

[SATOSHI_A]

footerの | 区切り

[kanariia]

リストとリストの間に区切りを入れる場合のtips

[webmarksjp]

*参考

[mrnoon]

Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが）

[genzuk]

フッターなどで使う区切りをCSSでやる

[lockcole]

フッターの区切り方に関するTips。昔は｜を手書きで挟んでたなぁ・・。画像を使って区切るのも意外とかっこいい。隣接セレクタを用いた方法が新しめ。

[troussier_d]

隣接セレクタの使いどころ

[yoshitetsu]

隣接セレクタ

[p_chopin]

恥ずかしながら隣接セレクタ(+)なるものを知らなかった。。。サンプル：#main #sampleFooter_04 li+li

[nshash]

:before擬似要素の代わりにこうやって隣接セレクタ使うのも一つの手。最初にborder-left使うのは思いつかなかったなー。

[leva]

:before擬似要素の代わりにこうやって隣接セレクタ使うのも一つの手。最初にborder-left使うのは思いつかなかったなー。

[kyorecoba]

『隣接セレクタでやる』

[urajima]

IE7が対応、時機をみつつ参考に。

[kurobuchi]

「隣接セレクタ」知らなかった．使っていこ．

[k_ume75]

隣接セレクタで（IE6はダメですが）

[saladdays]

わかっててもやってないなぁ。。。

[wacky]

横並びのリンクの区切りに「|」を入れるマークアップ＆CSS例（4種類）。IE7やFirefoxで使える隣接セレクタがシンプルな解。

[shidho]

隣接セレクタってそういうことなのか。

[sonic3]

WAO!隣接セレクタ初めて知った

[honkaku]

フロートを用いた横並べリストの区切りについて

[sweetlove]

隣接セレクタ（+）で指定する事で、余計なclassを追加せずに済む

[ar0]

css.web

[webmugi]

　隣接セレクタの使い時

[lomo_lomo]

borderや画像で区切る

[akz]

隣接セレクタで。