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

ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。

コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。
念じたら全部最近の書き方になおらないかな。

・・・

残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。

何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。
というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。

---- こっから続き

最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。
実際のサンプルも用意しました。

• サンプルサイトを見る

XHTMLはこんな感じ。

<div id="footer">
<ul>
<li><a href="/">トップページ</a></li
><li><a href="/homepage/">ホームページ制作</a></li
><li><a href="/result/">実績紹介</a></li
><li><a href="/faq/">よくありそうな質問</a></li
><li><a href="/profile/">プロフィール</a></li
><li><a href="/contact/">お問い合わせ</a></li>
</ul>
<!-- / #footer --></div>

どっかのサイトのフッター部分をほぼそのまま持ってきました。

「>」を改行してるのは、inlineにした時の余白埋めるためです。
コメント使ってやるのと同じですね。

して、CSSは以下のようになっております。

#footer {
	clear: both;
	width: 830px;
	margin-top: 20px;
	padding: 15px;
	background: #000;
}
#footer a {
	color: #fff;
}
#footer a:hover {
	color: #f0f;
}
#footer ul {
	margin-bottom: 10px;
	text-align: center;
}
#footer ul li {
	display: inline;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px dotted #fff;
}
#footer ul li:first-child,
#footer ul li.firstChild {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

デザイン指定部分も持ってきてるので若干ソースが長いですが、要はli要素に指定したのを、:first-child疑似クラスで一番最初のli要素だけ上書きします。
コレはIE6に対応していないので、対応させるためにjQuery使ってます。
最近常にjQueryは何らかの形で使うので。

では、IE6対応させるためのjQuery使ったやり方を。
まずは、head要素内でJSを読み込みます。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script src="./js/share.js" type="text/javascript" charset="utf-8"></script>

続いて、share.js（ファイル名は何でもいいですが）に以下を書き書きします。

$(document).ready(function() {
	$('#footer ul li:first-child').addClass('firstChild');
});

これで、firstChildってクラス名が付くので、先ほどのCSSソースの最後の部分の指定がIE6で適応されます。

#footer ul li:first-child,
#footer ul li.firstChild {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

ここの部分ですね。
当たり前ですが、JS使ってるので切ってる場合適用されませんが、IE6ユーザーでJS切っている人もレアだと思いますし、これから減っていくだけのブラウザですし、見た目としても有りえない崩れ方をする訳ではないので実用レベルかと思います。

まーコレも一つの「Progressive Enhancement」です。えぇ。
（横文字使ってみればイイと思ってるわけじゃないですよ）

とはいえ、どうしても嫌な場合普通にclass属性追加するしかないと思います。

各種SBMに追加

• 
• 
• 
• 
• 
• 
•