m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2009年07月08日

何でもかんでもdivにしない:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:何でもかんでもdivにしない


CSSを覚え立ての方が、「CSSレイアウト=divタグで囲む!」と思いこんでしまうケースがあるようです。

確かにDivを多用するとスタイルの指定が容易になるため、とりあえず的に<div>でマークアップしてしまうこともあるかもしれません。

しかし、例えばこんなソースはどうでしょうか?
<div id="contents">
<div id="contents_header">
<h1>header</h1>
</div>
<div id="contents_text">
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div id="contents_list">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>

かなり極端ではありますが、<div>を使いすぎてしまった悪例です。<h1>や、<p>のみを<div>でマークアップしています。しかしこの例ではわざわざ<div>でマークアップしなくても、<h1>や、<p>は子孫セレクタをつかえばスタイルを適用することができます。

実は<div>というタグには明確な役割、意味はありません。囲んだ範囲をブロックにできるため、CSSのスタイルを適用するためによく使われます。ですが、便利だからといって使いすぎてしまうと、ソースが<div>だらけでゴチャゴチャになってしまい、可読性やメンテナンス性が著しく損なわれます。

では<div>を使う判断はどのようにすればいいかですが、「整理する必要があるかどうか」と考えると比較的簡単ではないでしょうか。

divタグで文書構造を整理する

物を整理するのと同じで、「役割上ひとまとめにしておきたいもの」を<div>でまとめています。収納用の引き出しや棚へ細かい物をしまうのと同じイメージです。

そう考えると、「何でもかんでも<div>」は防げそうな気がしませんか?

「デザインのためのブロック化」ではなく、「文書構造上整理するためのブロック化」と考えると、<div>を減らすことができるはずです。

少しずつ挑戦してみてください。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:38
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年06月30日

CSSでボタンのロールオーバーをデザインする【1】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSSでボタンのロールオーバーをデザインする【1】


マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。

:hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。

まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。

ポイントは、背景画像をずらす!です。

このようにします。
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
ul {
margin: 0px;
padding: 0px;
list-style:none;
}
ul li {
/* li要素を横に並べる */
float:left;
/* 1行の高さ=背景の高さにして文字を縦軸中央に */
line-height: 45px;
}
ul li a {
/* a要素をブロックに */
display: block;
/* 背景画像と同じ幅高さ指定 */
height: 45px;
width: 160px;
color: #666;
/* 文字を横軸中央に */
text-align: center;
text-decoration: none;
/* 背景画像指定 X:0 Y:0 繰り返し無し */
background: url(img/button_bg.png) 0 0 no-repeat;
}
ul li a:hover {
color:#FFF;
/* 背景画像指定 X:0 Y:-45px 繰り返し無し */
background: url(img/button_bg.png) 0 -45px no-repeat;
}


するとこうなります。

CSSでボタンのロールオーバーをデザインする

background-positionの-45pxが今回のポイントです。a:hoverの時はマイナスの値を指定して、上にずらしています。こうすれば1つの画像ファイルでノーマル時とロールオーバー時両方デザインすることができます。

メリットは、
  • 画像数が減るのでファイル・コードの管理が楽
  • ロールオーバー時に別画像を読み込まないので表示がはやい
などでしょうか。

今回つかった背景画像はこうなっています。

background-imageで指定したボタンの背景画像

これを応用すれば、こんなことができます。これはNTT DoCoMoの例。

NTT DoCoMoのサイトナビゲーションの仕組み

背景画像系のテクニックは応用がきいて楽しいですね。

では次回もお楽しみに。

CSSでボタンのロールオーバーをデザインする【2】

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:17
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年06月24日

Webページ制作に必須!のFirefox アドオンコレクション:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:Webページ制作に必須!のFirefox アドオンコレクション

今回はちょっと趣旨をかえて、Webページ制作の必須アイテム、Firefoxのアドオンをご紹介します。

Mozilla Firefox ブラウザ無料ダウンロード

※Firefoxのインストールがまだ!な方はコチラから。

フリーのブラウザ Mozilla Firefoxの便利な拡張機能、アドオンが大量に公開されています。

アドオンとは何ですか?

アドオンは、 Firefox に新たな機能を追加したり、デザインを変えるための小さなプログラムです。これまで Internet Explorer をお使いになっていた方なら、「Google ツールバー」や「Yahoo! ツールバー」といったアドオンをご存知かもしれませんが、Firefox ならもっとたくさんの種類のアドオンを、無料で、好きなだけ利用できます。

定番の検索ツールから、動画ダウンローダー、RSS リーダー、メモ帳、辞書、世界時計に至るまで、多彩な機能を追加できる 拡張機能、Firefox の背景やボタンのデザインを変えられる テーマ、各国語の スペルチェック辞書、検索エンジン をご利用いただけます。

自分好みにカスタマイズできるのが Firefox の人気の秘密です。仕事からプライベートまで、あなたのお気に入りのアドオンを見つけてみてください。

"Mozilla Japan - Firefox 用アドオン - よくある質問"


そして、つい先日アドオンのサイトにコレクションという機能が加わりました。このコレクションを使うと、お気に入りのアドオンをグループにまとめてオンラインで公開することができます。ということで早速つかってみました。

m-School的Web制作用アドオンコレクション
m-School的Web制作用アドオン

まだ数はあまり少ないですが、アドオン入れすぎもFirefoxの動作が重くなってしまうので厳選しています。今後も随時追加していく予定です。

このコレクション機能を使えば今回のように紹介したいときはもちろん、自分用のアドオンまとめとしても使えますね。職場と自宅で同じ環境を構築したい!とか、再インストールした、なんてときには便利そうです。

まだアドオンを使ったことがない方、ぜひ入れてみてください。

便利なアドオンの使い方はCSS講座でもご紹介しています!

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:14
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年06月17日

CSS3はここがすごい【セレクタ編2】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3はここがすごい【セレクタ編2】

前回に引き続き、W3C Working Draftの中から新しく定義される予定のCSS3新セレクタについてご紹介します。

疑似クラス

CSS3では新しい疑似クラスが多数定義される予定です。

E:root
/*
E…要素
*/

:rootはルートの要素、つまり最も上位の要素を指定します。HTMLなら<html>ですね。

E:nth-child(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中のn番目のE要素を指定します。ちょっとわかりづらい場合は「n番目のE要素」と考えてもいいかもしれません。括弧内のnで何番目かを整数で指定します。それ以外にこんな指定も可能。

E:nth-child(1)
/* 整数の場合は、そのままn番目 */

E:nth-child(2n+1)
/* nには0から順に整数が入り計算されるので、奇数番目指定 */

E:nth-child(odd)
/* 奇数番目指定、(2n+1)と同じ結果 */

E:nth-child(2n)
/* nには0から順に整数が入り計算されるので、偶数番目指定 */

E:nth-child(even)
/* 奇数番目指定、(2n)と同じ結果 */

なんて便利なんでしょう!

CSS3の新疑似クラス

こんな事をしたいときに、
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
<li>リスト項目5</li>
<li>リスト項目6</li>
</ul>

ul {
width: 300px;
}
ul li {
margin: 4px 0px;
}
ul li:nth-child(even) {
background: #D5F8B4;
}

これだけ書いておけばあとは<li>がいくつ増えてもOK!

ちなみにこの(n)の指定は、次のセレクタでも使用できます。

E:nth-last-child(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の後から数えてn番目のE要素を指定します。

E:nth-of-type(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の、E要素と兄弟かつ、同じ名前の要素のn番目のE要素を指定します。言葉だけだと意味不明ですね。こんな時に使います。

<div>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>

div {
width: 500px;
font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-child(odd) {
background: #A8AD80;
}
div h2:nth-child(even) {
background: #E6D4A7;
}

CSS3の新疑似クラス

この例では、先ほどのE:nth-child(n)を使って、奇数番目と偶数番目の<h2>のbackgroundを別の色にしています。しかし背景色は全て同じになってしまいます。これは、間に入っている<p>もカウント対象になってしまっていることが原因です。そこで、<h2>のみをカウントしてくれるように、E:nth-of-type(n)を使います。

div {
width: 500px;
font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-of-type(odd) {
background: #A8AD80;
}
div h2:nth-of-type(even) {
background: #E6D4A7;
}

CSS3の新疑似クラス

するとこの通り。複数種類の要素が並列しているときにはこっちのほうがいいですね。

E:nth-last-of-type(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の、E要素と兄弟かつ、同じ名前の要素の後から数えてn番目のE要素を指定します。E:nth-of-type(n)の対になります。

今回ご紹介した新セレクタが使えれば、独自のIDやクラスをぐっと減らすことができそうです。残念なのはブラウザーの実装がまだまだ追いついていないことですね。今回、サンプルではGoogle Chrome 2を使いましたが、Safari 4 beta、Opera 9でも同様の結果を得ることができました。

CSS3.infoで使っているブラウザーのセレクタ対応状況テストができるのでみてみるのもいいかもしれません。

CSS3ではほかにも疑似クラスが増える予定ですが、今回はこの辺で。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:41
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年06月09日

CSS3はここがすごい【セレクタ編1】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3はここがすごい【セレクタ編1】

今回はW3C Working Draftの中から新しく定義される予定のCSS3新セレクタについてご紹介します。続くかもしれません。

属性セレクタ


E[foo^="bar"]
/*
E…要素
foo…属性
bar…値
*/
「^(アクサンシルコンフレックス)」記号を使用することで、foo属性が"bar"という文字列から始まるE要素を指定することができます。たとえば、こんな使い方。
<a href="http:...">外部リンク</a>
a[href^="http:"]::before{
content: url(/img/link.gif);
margin-right: 4px;
}
href属性が"http:"という値で始まる場合に、ハイパーリンクの前にアイコンを表示することができます。セレクタ1つで一括でいけるのでとても楽ですね。

上のセレクタと逆がこれ。
E[foo$="bar"]
/*
E…要素
foo…属性
bar…値
*/
「$(ドル)」記号を使用することで、foo属性が"bar"という文字列で終わるE要素を指定することができます。たとえば、こんな使い方。さっきと逆なだけですが…。
<a href="info.pdf">PDFファイルを表示します</a>
a[href$=".pdf"]::before{
content: url(/img/pdf.gif);
margin-right: 4px;
}
href属性が".pdf"という値で終わる場合に、ハイパーリンクの前にアイコンを表示することができます。セレクタ1つで一括でいけるので(略

最後がこちら。
E[foo*="bar"]
/*
E…要素
foo…属性
bar…値
*/
「*(アスタリスク)」記号を使用することで、foo属性が"bar"という文字列を含むE要素を指定することができます。上の2つほどコレだ!という使い方はすぐに思い浮かびませんが、ID名やクラス名に一工夫いれたりすると多分とても便利だと思います。

疑似要素


E::selection
/*
E…要素
*/
マウスカーソルでドラッグして選択された範囲を指定することができます。…が、最新のW3C Working Draftからは消えてしまいました…。たとえば、こんな使い方。
<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
p::selection {
background:#F00;
color:#FFF;
}
選択するとこうなります。

CSS3 selection疑似要素

background-imageの指定は無視されるようです。また、今後::selectionがどうなるかはちょっと不明です。「段落の親要素の背景色との関係を考えた配色」を指定できたりすれば面白いと思うんですが、どうなるでしょう。

ちなみに、疑似要素はこれまで「:(コロン)」1つでOKでしたが、「::」2つで正式な記述方法になるようです。

次も、もう少しセレクタの話を続けたいと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 19:44
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年06月02日

CSS3はここがすごい【プロパティ編2】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSS3はここがすごい【プロパティ編2】


全2回で予定していましたが、もう少し続きます。

今回はCSS3から定義されたセレクタをご紹介する予定でしたが、もうちょっとプロパティについて取り扱います。

前回はこちら。

opacity

opacityプロパティは、不透明度を定めるプロパティです。値は、0で完全な透明、1で完全な不透明となります。対象は基本的になんでもOKです。(もちろん目に見える要素が対象です)

使い方はこんな感じ。
<div id="container">
<div id="box1">
box1
</div>
<div id="box2">
box2
</div>
<div id="box3">
box3
</div>
<div id="box4">
box4
</div>
</div>

#container {
background: url(bg.gif);
width: 400px;
height: 200px;
}
#box1,#box2,#box3,#box4 {
background: #333;
color:#FFF;
padding: 12px;
float: left;
width: 76px;
height: 76px;
}
#box1 {
opacity: 1;
}
#box2 {
opacity: .7;
}
#box3 {
opacity: .2;
}
#box4 {
opacity: 0;
}

Firefox 3でCSS3のopacityプロパティ
Google Chrome 2でCSS3のopacityプロパティ
Safari 4でCSS3のopacityプロパティ
IE8でCSS3のopacityプロパティ

4つのボックスを並べて見え方を比較しています。左から、100%不透明、70%、20%、0%です。中身のテキストも透明になっていることがわかります。画像さえも透明にすることができるので、これは使えれば透過pngなんていらなくなる!?のかも。Safariは4のパブリックβを使用していますが、3も対応しています。

text-shadow

text-shadowプロパティは、文字(テキスト)に影をつけることができるプロパティです。CSS2.1では一度廃止となりましたが、3で復活予定です。いわゆるドロップシャドウの効果が画像なしで実現できる、これまたとても便利そうなプロパティです。たとえばこんな風な使い方がアリガチですね。
<ul>
<li><a href="#">講座一覧</a></li>
<li><a href="#">おすすめ</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">問合わせ</a></li>
</ul>

ul li {
display: inline;
border-left: 3px double #333;
}
ul li:last-child {
border-right: 3px double #333;

}
ul li a {
padding: 10px;
color:#CCC;
text-decoration: none;
}
ul li a:hover {
text-shadow: #000 1px 1px 1px;
}

Google Chrome 2でCSS3のtext-shadowプロパティ
Safari 4でCSS3のtext-shadowプロパティ
a:hoverのみテキストに影をつけています。

さらにはこんな使い方も出来ます。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>

p {
width: 500px;
padding: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
background: #CCC;
color: #FFF;
text-shadow: #666 0px -1px, #666 1px 0px, #666 0px 1px, #666 -1px 0px;
}
p:first-letter {
font-size: 3em;
line-height: 1;
float: left;
margin: 0 .2em 0 0;
padding: .1em 0;
}

Google Chrome 2でCSS3のtext-shadowプロパティ
Safari 4でCSS3のtext-shadowプロパティ
内側に影をつけて縁取りされたようにしています。

使い方次第ではただのテキストがぐっと読みやすくできそうですね。工夫しがいのありそうなプロパティです。

次回こそCSS3の新セレクタについてご紹介します。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 14:38
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年05月27日

CSS3はここがすごい【プロパティ編1】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSS3はここがすごい【プロパティ編1】


CSS3がどう変わるかについて2回に渡ってご紹介したいと思います。

2010年に勧告される予定のCSS3では、現行の2.1から非常に多くの点が変更されます。
まだ先の話…と思っている方。もう来年です!地デジより近いんです!すでに一部の新しいブラウザーでは先行実装が始まっています。

ということで、CSS3のどこがすごいのかをご紹介いたします。

プロパティがすごい


CSS3では、プロパティの種類がぐっと増えます。すなわち、指定できるスタイルの幅が広がるということですね。

たとえば、下記の例では、borderの各辺の色と角丸の半径のプロパティを使っています。-moz-というのは、Mozilla、つまりFirefoxのみに有効になるような指定です。

p {
width: 450px;
padding: 5px;
border: 7px solid #000;
/* 左は外側、右に行くほど内側の色 7pxなので7色指定する */
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
/* 角丸の半径 */
-moz-border-radius: 5px;
}

これをFirefox 3で見てみると…

CSS3のborder系プロパティ

こうなります。いままで画像を使わなければできなかった表現が、CSSだけでできるようになります。この他にも
  • borderに画像を指定するborder-image
  • 文字に影をつけるtext-shadow
  • 色の透明度を指定するopacity
など、デザインの幅が大きく広がるプロパティが多数実装される予定です。

次回はCSS3のセレクタについてご紹介します。

では次回もお楽しみに。

6/3 第2回書きました。
CSS3はここがすごい【2】

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 12:15
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年05月18日

知らなきゃ損!Dreamweaverのスニペットを使おう!:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:知らなきゃ損!Dreamweaverのスニペットを使おう!


今回は少し趣向を変えて、知らなきゃ損!なDreamweaverの便利機能「スニペット」をご紹介します。

スニペット(snippet)とは、頻繁に使用するコード等をすぐに使えるように保存しておくことができる機能です。コードスニペットとも言われます。Dreamweaverだけではなく、コードを記述するようなソフトウェアにはよくある機能です。

Dreamweaverでコード編集するなら必須!といえるほど便利なので、知らなかった方は是非覚えてしまいましょう。

Dreamweaverスニペットの使い方

step1 スニペットパネルを開く
まずはスニペットが登録されているスニペットパネルを開きます。[ウィンドウ]メニューから[スニペット]をクリックします。

Dreamweaverコードスニペット
step2 スニペットを挿入する
スニペットパネルには、デフォルトで多数のスニペットが登録されています。コード内に挿入したいスニペットを選んで、ダブルクリック or ドラッグ&ドロップすると、該当するコードが挿入されます。

次からがスニペットの本領発揮です。
step3 スニペットを登録する
普段よく使うコードは新規に登録することができます。たとえばCSS用のコメントや、よく使うハックセレクタなどを登録すると便利でしょう。

Dreamweaverコードスニペット

まずは、わかりやすくフォルダを作ります。[新規スニペットフォルダ]をクリックし、フォルダ名を付けます。その後、[新規スニペット]をクリックし、編集ダイアログを開きます。

Dreamweaverコードスニペット
  • 名前
    • スニペットの名前をつけます。
  • 説明
    • どんなスニペットかわかりやすい説明を入れておくといいでしょう。
  • スニペットの種類
    • [選択範囲を囲む]の場合、選択範囲の前後にそれぞれ何を挿入するかを指定できます。選択範囲をタグで囲むような場合に使います。[ブロックの挿入]は、登録されたコードがそのまま挿入されます。
  • プレビュータイプ
    • スニペットパネルのプレビューペインに[デザイン]で表示するか、[コード]で表示するかを選択します。
すべて設定後[OK]をクリックすればオリジナルスニペットの完成です。

また、既に挿入されているコードを、スニペット化することも可能です。スニペットにしたい部分を選択し、右クリックして[新規スニペットの作成]をクリックします。あとは同様です。
step4 スニペットをキーボードショートカットで使う
さらにガッツリとスニペットを使いこなしたい場合には、キーボードショートカットを割り当てることもできます。スニペットパネルを右クリックし、[キーボードショートカットの編集]をクリックします。

キーボードショートカットを割り当てたいスニペットを選択して、実際に使いたいショートカットを押します。もしすでに使われているショートカットであれば警告がでるので安心です。

Dreamweaverのオンラインヘルプも参考にしてみてください。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 22:21
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年05月13日

CSSでリストをパンくずリストにする【2】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSSでリストをパンくずリストにする【2】


前回の続きでパンくずリストを取り扱っていきます。

前回はcontentプロパティbefore疑似要素を使って、要素の間に記号を入れる方法をご紹介しました。

ただこの方法はブラウザーのバージョンによりCSSの対応に問題があるのがすこしやっかいです。

ということで今回は背景画像、つまりbackground-imageを使って記号を入れていきます!テクニックは第1回「CSSでリストをデザインする」と同じですね。
<div class="topicpath">
<ol>
<li><a href="#">トップページ</a></li>
<li><a href="#">講座一覧</a></li>
<li><a href="#">Dreamweaver</a></li>
<li>CSS</li>
</ol>
</div>

XHTMLは前回と同じものと使います。

.topicpath ol li {
/* liを横並び&ブレットを消す */
display: inline;
list-style-type: none;
}
.topicpath ol li a {
/* aの背景画像に記号の画像を指定 */
background-image: url(../crumb.gif);
/* 右寄せ&リピート無し */
background-position: center right;
background-repeat: no-repeat;
padding-right: 10px;
}

パンくずリスト(トピックパス)

前回よりコードがだいぶすっきりしました。しかも画像なので、自由なデザインにすることができ、paddingで間隔調整も楽々です。

また、細かい点ですが、セレクターを.topicpath ol liではなく、.topicpath ol li aとしています。サンプルのXHTMLをみるとわかりますが、最後の"CSS"という文字列は<a>でマークアップされていないので、背景画像が入ることはありません。

これならわざわざfirst-childを使う必要もないのでカンタンですね。

ということで前回に続いてパンくずリストの作り方をご紹介しました。パンくずリストを作る方法は他にも数多くありますのでまた機会があればご紹介したいと思います。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 10:32
連載:CSS 3分コーディング | コメント(0) | トラックバック(0)
2009年04月27日

CSSでリストをパンくずリストにする【1】:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ:CSSでリストをパンくずリストにする【1】


前々回の応用編ということで再びリスト、<ol>と<li>を扱っていきます。

前々回は<li>を横並びに表示するテクニックをご紹介しましたが、これをちょっと応用すればパンくずリストがさくっと作れます。

パンくずリストとはトピックパスとも言われ、Webサイトの構造を表すリストのことで、今自分がサイト内のどこを閲覧しているかを簡単に確認できるというメリットがあります。
パンくずリスト(トピックパス)
こういうやつですね。

どの要素でマークアップするのが適当かという議論もありますが、ここでは<ol>と<li>でやってみたいと思います。
<div class="topicpath">
<ol>
<li><a href="#">トップページ</a></li>
<li><a href="#">講座一覧</a></li>
<li><a href="#">Dreamweaver</a></li>
<li>CSS</li>
</ol>
</div>

XHTMLの構造は前々回とほとんど同じですが、<ul>ではなく、<ol>を使っている点が少し違います。<ol>は、順番ありのリストです。サイトの構造を表すという意味では順番がないよりはあったほうがしっくりする気がします(やや弱気)。

横並びにするだけであればdisplayプロパティをinlineにするだけで解決ですが、今回はパンくずリストなので要素と要素の間に「 > 」こういう記号を入れたいわけです。

XHTML文書内に単純に記述してしまう方法もありますが、記号自体には何ら意味がないのでできればCSSで実現したほうがいいと思います。

ということで今回のポイントは、contentプロパティbefore疑似要素を使って、要素の間に記号を入れる!です。

contentプロパティは、要素の前か後に文字や画像(つまりコンテンツ)を追加する、という役割を持っており、beforeまたはafter疑似要素と組み合わせて使います。そのまんまですが、beforeであれば要素の前、afterであれば要素の後、となります。
パンくずリスト(トピックパス)
こうしたい場合、単純に考えると要素の後に「 > 」を加えてやればよさそうなのでやってみます。
.topicpath ol li {
/* liを横並び&ブレットを消す */
display: inline;
list-style-type: none;
}
.topicpath ol li:after {
/* liの後に記号追加 */
content:" > ";
}

パンくずリスト(トピックパス)
するとだいたいこんな感じになるはずです。問題は最後の要素にも「 > 」が入ってしまう点です。これはヘンなので消したいところですが、残念ながらCSS2.1のセレクタでは「最後の要素だけ」というのが指定できないのです。(CSS3ではできるようになります。)

しかし、「最初の要素だけ」というのはCSS2.1でも指定できるので、先ほどとは逆に要素の前に「 > 」を加えて、先頭のみ消す、という方法をやってみます。
.topicpath ol li {
/* liを横並び&ブレットを消す */
display: inline;
list-style-type: none;
}
.topicpath ol li:before {
/* liの前に記号追加 */
content: " > ";
}
.topicpath ol li:first-child:before {
/* 最初のliだけcontentを消す */
content: none;
}

このfirst-childというのは疑似クラスの1つで、ある要素内の最初の要素のみを指します。つまり今回は<ol>の中の一番最初の<li>を指しています。そしてcontentプロパティをnoneとして、「 > 」を消しているわけです。

が、一見スマートなこの方法、実は現状では問題だらけです。
  • before疑似要素はIE6およびIE7が未対応
  • first-child疑似クラスはIE6が未対応(IE7はOK)
  • contentプロパティnoneはFirefox3、IE8以外未対応
ということで「使えない!」という結論が出てしまいそうですが、とりあえず最新のブラウザーだけでも何とかするのであれば、
.topicpath ol li {
/* liを横並び&ブレットを消す */
display: inline;
list-style-type: none;
}
.topicpath ol li:before {
/* liの前に記号追加 */
content: " > ";
}
.topicpath ol li:first-child:before {
/* 最初のliだけcontentを消す */
content: "";
}

ちょっとかっこわるい?かもしれませんがこのように空白を入れてしまうのが手っ取り早いかもしれません。これで、下記のブラウザーは対応できます。
  • Firefox 3
  • Internet Explorer 8
  • Safari 3
  • Google Chrome
  • Opera 9
ただIE6とIE7が対象外なのはちょっと厳しいですね。ということで次回は他の方法をご紹介します。

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 17:05
連載:CSS 3分コーディング | コメント(2) | トラックバック(1)