スタイルシートの達人を目指してCSS

テクニック

Blog デザインを ス マ ー ト にかっとばそう！
第5回

リストをデザインしてサイドバーを改造

by スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

サイドバーにリンク集、最新コメント、トラックバック一覧などを入れていくと、情報主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。通常のサイトとは別に『情報交換広場』というページも増設されました。Wiki で作られていて誰でも気軽に情報を書き足すことができます。あなたの CSS 情報もぜひ書き込んでみてください。

が増えれば増えるほどサイドバーがどんどん長くなっていきます。サイドバーを短くする方法の1つに、3カラムのレイアウトにしてサイドバーの情報を分割するというものがあります。しかし、単に分割するだけでなくサイドバーにある情報の見せ方も工夫するとより見やすくなります。サイドバーに載せる情報の多くは<ul>や<ol>というリスト（箇条書き）
タグを使っています。リストタグは情報を整理するうえで重要なタグで、上手に利用すればSEOやアクセシビリティー対策にもなります。今回はCSSを使ってリストをいろいろ装飾してみましょう。

今月のイケてるCSSデザインサイト

1

マウスオーバーで情報を伝える
world one web2

カッコいいデザインをたくさん見てセンスや技を学ぶのが、デザイン力アップの第一歩！

アイコンを効果的にFORGETFOO
http://www.forgetfoo.com/

http://www.worldoneweb.com/

オハイオ州在住のウェブデザイナーであるRyan Latham

ブログサイトはテキスト中心のサイトになりがちですが、こ氏のブログサイト。見やすい色使いやタイポグラフィーもスのサイトでは、アイコンを多数使うことにより、左側のナビテキですが、特筆すべきところは左側のナビゲーションリス

ゲーションリストと文章をより効果的に見せています。美しト。マウスオーバーすると日付、コメント数、エントリー数ないアイコンを付けるだけでもサイト全体のイメージが変わる

どの情報が見えるように工夫してあります。最初にユーザ好例ですね。また、このサイトの作者が制作した『FooBar』

ーに見せる情報を制限してスッキリ見せるには良いテクニはなかなか便利なウェブアプリケーションです。

ックだと思います。

ぱっと見はシンプルですが、サイドバーの項目にマウスカーソルを合わせると追加
情 報 が 表 示されます。

アイコンがサイドバー項目のアクセントになっています。引用部分などもグラフィックの使 い 方 が 凝っていますね。

イケイケデザイン＆テクニック募集中
あなたのイケてるブログサイトやCSSテクニックを募集しています。
「いいデザインができたかも」と思ったら、ガンガン応募してください。イケてるデザインやテクニックは、このコーナーで紹介します。みんなで参考にし合っておもしろいサイト作りましょう！ 応募先：im-ikeike-css@impress.co.jp（スタイルシート・スタイルブックのサイトでも募集しているよ）

140 +++ iNTERNET magazine 2004.09 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

リストの基本形をマスターする
1

箇条書きのマーカーをlist-style-typeやlist-style-imageで制御by 長谷川恭久<ul>を使ったリストは、多くの場合、文字Before

列の左隣に黒丸のマーカーが付いた箇条書きになり、入れ子にするとさらに変わりAfter
list-style-type: circle

list-style-type: squareます（連番の箇条書きで使う<ol>では「1.」list-style-image: url(pencil.gif)「2.」のような数字になります）。リストではこのマーカーを変えるのがいいアクセントになります。CSSを使わない従来の方法

list-style-type: lower-greek

list-style-type: decimal-leading-zero

では<ul type="square">のようにtype属

list-style-type: cjk-ideographic

性を使って黒丸とは別のマーカーを指定していました。CSS では、この type 属性
list-style-type: hiragana

list-style-type: hiragana-iroha

list-style-type: hebrewと同じ役目を果たすのは「list-style-type」
プロパティーです。CSSで一括管理が可能ということを考えると、毎回type属性をlist-style-type: upper-roman

使うよりもlist-style-typeを使うほうが効率がいいでしょう。また、CSSでしか出せなさまざまな箇条書きのスタイルを自在に指定できます。アイコン画像の指定も可能です。

CSいマーカーもあるので要チェックです。

S#list1 { list-style-type: circle; }#list6 { list-style-type: cjk-ideographic; }#list2 { list-style-type: square; }#list7 { list-style-type: hiragana; }#list3 { list-style-image: url(pencil.gif); }#list8 { list-style-type: hiragana-iroha; }#list4 { list-style-type: lower-greek; }#list9 { list-style-type: hebrew; }#list5 { list-style-type: decimal-leading-zero; }#list10 { list-style-type: upper-roman; }C S S

テ ク ニ ッ クのキ モ

最初の3つは<ul>（連番付けをしない箇条書

してください。たとえばウィンドウズ版IE 6だと、使うのではなく、自分で作った画像ファイルをき）で使うものです。エンピツのアイコンのもの

日本語、ヘブライ語、ギリシャ文字を使ったリマーカーに使いたい場合には、「list-style-は、マーカーに画像を指定するlist-style-image

ストは表示されませんし、Safari でも日本語リimage」プロパティーを使います。ただし、ここプロパティーを使っています（後述）。標準の黒ストが表示されません。正しく表示できない場で注意しておきたいのが、画像が表示される位丸はlist-style-type:discで指定できます。

合は、標準の黒丸や数字が代わりに表示され置がブラウザーによって若干異なる場合があ

これら以外のものは <ol>（連番付き箇条書るなど、ブラウザーによって解釈の仕方が違いることです。ウィンドウズ版IE 6とMozillaではき）
で使うもので、数字やギリシャ文字だけでます。とは言え、これらの指定はCSS2で規定文字とリスト画像の間隔が若干異なります。微なく、「イロハニ」のように日本語のマーカーもされているものなので、将来的にはどのブラウ

妙 な 違 いも 気 になる場 合 は「 l i s t - s t y l e -使えます。ただし、今回のようにすべてが『正しザーでも表示できるようになると期待してもいtype:none」にしてマーカーを非表示にして、リく』表示されるのは Mozilla や Firefox などのいかもしれません。

スト画像を背景画像として処理するなど別の方Mozilla 系のブラウザーのみだという点に注意

CSSであらかじめ用意されているマーカーを法で同じ効果を作り出すといいでしょう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.09 +++141リンクリストをコンパクトでオシャレにする2

float:leftによるリスト項目の詰め込み

by 長谷川恭久

Beforeブログを運営している人の多くは、自分が巡回しているサイトを紹介するなどのためAfterにBlogPeopleやMyBlogListのようなサービスを使ってサイドバーに一覧表示しているでしょう。巡回しているサイトが多くなれば当然リストも長くなってしまうのが問題です。また、リンクが延々と記述されているだけだと読み難いという問題もあります。そこで、今回はサイト名が短いものは1行に複数の項目を表示するようにして、リストの長さを少しでも短くしてみましょう。
また、個々のリンクが少しでも際立つように、CSSを使ってアイキャッチとなるアイ長さが短い項目は1行に複数表示されて、リスト全体がコンパクトになります。

HTM

コン画像を貼り付けてみましょう。

L<div id="bloglist"><ul><li><a href="http://……">DO THE
ROCK.COM</a></li>
Å……
</ul>
</div>

CS#bloglist li{
float: left;
margin-right: 10px;}#bloglist li a{
background: transparenturl(up.gif) no-repeat 0 0;
color: #336666;
padding: 3px 0px 3px 22px;
white-space: nowrap;}#bloglist li a:hover{background: transparenturl(up_hover.gif) no-repeat 0 0;
color: #663333;}

S#bloglist{
width: 24em;}#bloglist ul{
list-style: none;
margin: 0;}

C S Sテ ク ニ ッ クのキ モの間隔を空けておくようにしましょう。ここでて、個々のサイト名の間に間隔を空けておきプロパティーを使って自作のリストマーカーをは、リストの項目である<li> 要素の子要素にます。また、サイト名が途中で折り返されるの

配 置 し まし た が 、こ の テ ク ニ ック で はなる<a>にpaddingを指定しています。

を防ぐために「white-space: nowrap」を忘れ

前ページのテクニックでは list-style-imageずに記述しておきましょう。

backgroundプロパティーで、つまり背景とし今回のポイントは、通常の1行1項目の表示てアイコンを配置しています。これは、リンクではなく、1行に入る限り項目をどんどん詰めまた、今回のテクニックで忘れてはならないにマウスカーソルを重ねたときに別のアイコン込むところです。これには「float: left」を使いことが 2 点あります。1 つはブラウザーによっを表示させるためです。こういった場合はどうます。サイト名が短いものをこのように右に詰ては標準でリストの上下左に間隔を空けるよ

しても list-style-imageプロパティーを使っため込んでいくことでリストの長さは短くできるうになっているので、「margin」をゼロにしてお方法だと難しくなるのです。アイコンを背景とのですが、サイト名の間隔がある程度空いてくこと。もう1 つはアイコンを背景画像としてして配置しているので、paddingプロパティーいないとかえって読み難くなってしまいます。

処理するので「list-style: none」
としてリストのを指定して左側に最低でもアイコンの横幅分

そこで<li>に対して「margin-right」などを使っマーカーを非表示にしておくことです。

142 +++ iNTERNET magazine 2004.09 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

画像を使わずにオシャレなリストにする
3

borderの個別指定とdisplay:blockによるボックス表示by 長谷川恭久

Before画像を使うことによってリストに個性を出すことができますが、見た目がおもしろい

After

リストを作るのに画像が必須だというわけではありません。今回は、画像を一切使わずにCSSのプロパティーだけを使ってリストを装飾してみましょう。もちろんマウスオーバーの効果も加えてよりインタラクティブにもしてみます。CSSだけで作り出すため、色や枠線を変えるのも簡単なので、カスタマイズが柔軟にできます。ぜひ自分オリジナルのリストに挑戦してみてください。

ぱっと見は表組みのように見えますが、これでもれっきとしたリストです。

HTM

L<div id="navigation"><ul><li><a href="……"
title="デジカメ">デジカメ</a></li>……
</ul></div>

CS#navigation li a{
background: #B18B8B;
border-left: 1em solid #669999;
border-top: 1px solid #330033;
color: #ffffff;
display: block;
padding: 0.25em 0.25em 0.25em 0.5em;
text-decoration: none;
width: 15em;}

S#navigation ul{
list-style: none;
margin: 0;
padding: 0;
}

C S S

#navigation li a:hover{background: #C2C2A3;
border-left-color: #A3C2C2;
color: #000;}

テ ク ニ ッ クのキ モにマウスオーバーしても効果が現れるようにし

まず、一 見してリストに 見えないように、る表現ができる一例です。枠線を設定する<ul>に「margin: 0」と「list-style:none」を指定

CSS は、四方を同時に設定する「border」だてみましょう。こういった場合、リスト項目のリしておきましょう。これでリスト風のマーカーやけでなく、上下左右それぞれを設定できるンク（<a>）
に対して、「display:block」というス空きが表示されなくなります。また、リンクの「border-top」「border-bottom」「border-left」

タイルを設定します。リンク内には横幅も設下線を無効にする「text-decoration: none」も「border-right」というプロパティーがあるので、定してあるので、その横幅の範囲内であれば忘れずに記述しましょう。

今回のテクニックでは左側と下側の枠線のス

たとえ文字をクリックしなくてもリンクとして扱タイルをそれぞれ設定しています。

われるようになります。こうすることによって文字の左隣にアイコンのように見える緑色の四角形が配置されていますが、これはリストマウスカーソルを持っていくと枠線の色と背項目のリンク（<a>）の左側の枠線を1 文字分景色が変わる効果は「:hover」を使って実現しの太さ（1em）で表示してあるだけです。枠線ています。ただし、テキストにマウスオーバーの太さを変えるだけで、通常の枠線とは異なしたときだけでなく、リストボックス内ならどこ「:hover」のほうもリストボックス内であればどインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

こででも効果が出るようになります。

+++ iNTERNET magazine 2004.09 +++143

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.