Re: フッターとかの区切り『 | 』のサンプル4種

こういうのをCSSでやると、私は「:before擬似要素使いてぇ。（未対応の）IE6うぜー」と思ってしまうのですが、border-leftプロパチを使って何とかしてるのがうまいと思いました。

text-decorationプロパチの代わりにborder-bottomプロパチを使うのはよくありますが、こんな風にborderプロパチって意外と想定外に使えるのですね。

例を挙げると、テストケースC「borderを使って区切っているように見せる」は次のように例が挙げられています。

HTMLソースコード

<ul id="sampleFooter_02">
<li class="sampleFooterHome"><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li>
<li><a href="/">Blog</a></li>
</ul>

これに対応するCSSはコチラ。

CSSソースコード

#main #sampleFooter_02 {
    text-align: center;}
 
#main #sampleFooter_02 li {
    display: inline;
    list-style-type: none;
    margin-right: 6px;
    padding-left: 10px;
    border-left: 1px solid #999;}
 
#main #sampleFooter_02 li.sampleFooterHome {
    border-left: 0px;
    padding-left: 0px;}

ただ、これについては”Home”を起点としたツリー構造になっていると考えられるので、まずは以下のようなXHTMLがより適切なのではと思います。

テストケースB

HTMLソースコード

<ul id="sampleFooter_02">
<li><a href="/">Home</a>
<ul>
    <li><a href="/">About</a></li>
    <li><a href="/">Gallery</a></li>
    <li><a href="/">Blog</a></li>
</ul>
</li>
</ul>

これに対応するCSSはコチラ。

CSSソースコード

#main #sampleFooter_02 {
    text-align: center;
}
 
#main #sampleFooter_02 ul {
    display: inline;
    padding: 0px 0px 0px 6px;
}
 
#main #sampleFooter_02 li{
    display: inline;
    list-style-type: none;
    margin-right: 6px;
    padding-left: 10px;
}
 
#main #sampleFooter_02 ul li {
    border-left: 1px solid #999;
}
 
#main #sampleFooter_02 li.sampleFooterHome {
    border-left: 0px;
    padding-left: 0px;
}

副作用として、最初のli要素にclass名つける手間も省けますね。

最後は定番ですが、初っぱなに愚痴ったように :before 擬似要素を使ったもの。IE7は:before擬似要素に対応していないので、使いずらいのですが便利です（テストケースBのXHTMLをベースにしてます）

テストケースC

CSSソースコード

#main #sampleFooter_02 {
    text-align: center;
}
 
#main #sampleFooter_02 ul {
    display: inline;
    padding: 0px 0px 0px 6px;
}
 
#main #sampleFooter_02 li{
    display: inline;
    list-style-type: none;
    margin-right: 6px;
}
 
#main #sampleFooter_02 ul li:before{
    content: "|";
    padding-right: 6px;
}
 
#main #sampleFooter_02 li.sampleFooterHome {
    border-left: 0px;
    padding-left: 0px;
}

Popularity: 2% [?]

キーワード：

ウェブ標準技術絡み

読者のコメント

お名前
Net
投稿日時
2007年02月26日
18時ごろ
Comment No
#1
はじめまして。私はWikis プロジェクトのNetと申します。

FirefoxまとめWikiのこのWikiの仕様についてのページから、ファイルパスを代えたりいろいろゴニョゴニョしながらここにたどりつきました。

私はWikisというPukiwikiの無料レンタルサービスを4月上旬より公開しサービスをしたいと考えています。

以前、Firefoxの拡張機能の情報を閲覧するに従ってFirefoxまとめWikiを拝見させて頂きました。
使いやすさ、見易さ、操作性などに惚れました。素晴らしいスキンです。ですので、このWikiの仕様よりデフォルトのスキンとして今後のWikisの利用者にWikiテンプレートとして提供させて頂こう（X11ライセンス）と考えました。

その点で、問題が発生したためご連絡させて頂いております。ご迷惑をおかけ致しまして申し訳ございません。

詳しくは下記をご覧ください。

1. FirefoxまとめWikiのスキンをデフォルトのスキンとして利用者にWikisのWikiテンプレートとして提供したいのですがよろしいでしょうか。

2. FirefoxまとめWikiのこのWikiの仕様よりファイル(X11ライセンス）をダウンロードさせて頂こうとしたのですが、ファイルパスがデッドリンクでしたのでfirefox.geckodev.org/res/へ変えると一部のファイルを除いて全てのファイルがダウンロード可能になりましたので、全てダウンロードさせて頂きました。
しかしながら、Pukiwiki Plus!のスキンのため、Pukiwikiに適応するにあたり、現在 http://wikis.jp/tmp/wikis/ このような状態です。
この状態を打開するため、お力を貸して頂けないでしょうか。

3. このWikiの仕様に関しては、情報が古いため、いくつか不足分のファイルがあると思います。ですので、まずはFirefoxまとめWikiで使用されているskins以下のファイルを、全て頂けないでしょうか。

4. FirefoxまとめWikiのテンプレートをWikisのテンプレートにするにあたって、協力をお願いしたいです。作業にあたり有償でも構いません。是非この素晴らしいテンプレートをWikisの利用者へデフォルトスキンとして提供したいのです。ご迷惑を承知ですが、よろしくお願いします。

Leva様に直接連絡が取れるお問い合わせフォーム、あるいはメールアドレスが不明のため、こちらのコメントフォームに書き込みさせて頂きました。
Eメールアドレスを記入致しましたので折り返しお手数ですが、メールをご送信ください。
（よろしければメッセンジャーのメールアドレスを通知頂くと便利です。）

本来こういった形でお願いするのは不本意なのは重々承知ですが、ぜひとも提供させて頂きたいので、なにとぞよろしくお願い申し上げます。

もし、Firefox まとめ Wiki スキン作成者のLeva様でなければ申し訳ございません。お許しください。

※少し文章がおかしくなってる気がします（汗）

以上、よろしくお願い申し上げます。

他サイトの関連記事

トラックバックはまだ寄せられていません

トラックバックとは: この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ: この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。

トラックバックを受け取るためのURI

Liner Note

検索