スタイルシート・スタイルブックで毎日勉強中のBQです。
実践編までなんとか漕ぎ付けたのですが、そこでいつも参考にさせていただいてるサイトが紹介されていたので、エントリーしてみました。
実は以前に書いたカメレオンアイコン（勝手に名づけてましてTipでもなんでもなかったりしますが＾＾；）を参考にさせていただいたサイトだったりもするのですが、そのサイトは「Fast Company」というサイトです。
CSSと何気なテクニックを使っていてとても勉強になるサイトなんです。CSSのインポートやTABにリスト、アイコン背景やスタイルスウィッチなどなどCSSのテクニックが満載です。
いつかこんな風にCSSを使いこなしてサイトを作ってみたいなぁと思ったりしますが、今の私には到底ムリなので、かなり部分的になりますが、そのサイトで使われている見出し＋リストの作り方で参考になるかなと思ったところをエントリーしてみました。
余計な部分を削りながらCSSを抜き出したので、誤った部分も含まれているかも知れませんが、その辺はご愛嬌ってことでお願いします。リストの一つのパターンとして参考にでもしていただければと思います。
CSS例
#listsample h4 {
padding: 0;
margin: 0;
margin-bottom: 6px;
color: #c00;
font-size:100%;
font-weight: bold;
letter-spacing: .2em
}
#listsample h4 img {
vertical-align:bottom;
display: inline;
background: #c00
}
#listsample ul {
margin: 0;
padding: 0;
list-style: none
}
#listsample li {
background: url(../../listhead.gif) no-repeat 2px 1px;
padding: 0 0 6px 16px;
line-height: 1em
}
タグ部分
<div id="listsample">
<h4><img src="../../header.gif" /> Subheading</h4>
<ul>
<li><a href="">list 1</a></li>
<li><a href="">list 2</a></li>
<li><a href="">list 3</a></li>
</ul>
</div>
（下記サンプルは画像ですが、CSSの追加や調整だけでいろいろなパターンのリストを作成することができます）
*アイコン画像等は「Fast Company」さんのものを参考にさせていただいています。尚、サンプル中のheader.gifは背景を透過にしたものにCSSを適用しています（画像の説明）
ううむ。list-style-image プロパティを使わない理由は何でしょうか?
現行の(要件上の)ブラウザ実装を鑑みた結果、background-image プロパティで擬似的にリストマークに見せかけることは、確かにあります。しかしその場合は、想定している list-style-position プロパティのことも考えて、たとえば outside であれば、text-indent プロパティや padding プロパティなども合わせて設定する必要がありますよね。
また、background-image を使った場合は、no-repeat がうまく適用されない場合(バグですが、あります)、そのレンダリングは目も当てられない状態に陥るという、擬似的に何かを表現する tips のたぐいにはありがちな、ダメダメな状況が生まれてしまいます(そのリスクを背負う必要があります)。
こういう場合は、やはり素直に list-style-image プロパティを使ったほうが良いのではないでしょうか。ただしその場合、それだけでは、当然ながら何の tips にもならないでしょう。
しかし、リストマークのレンダリング位置はブラウザ間で微妙に違います。tips として紹介すべきは、リストマークのために用意する画像の右上に何ピクセルの余白をあらかじめ入れておくと、ブラウザ間での表示差が緩和されるであるとか、そういったことになるのではないでしょうか。また、それはとても貴重な tips になりえると思います。
yuuさん
ご指摘とアドバイスありがとうございます。サイトの紹介という形でCSSを書いてしまいましたが、こういったものを気付かないかなり初心者の私です。
yuuさんの有益なアドバイスのお陰でこのエントリーのCSSが含んだ問題を知ることができとても勉強になりました。
ご指摘をいただいた部分を含めいろいろな形でこれからも検証して行ければと思います。本当にありがとうございました。
僕もどちらかというとlist-style-imageよりbackgroundを使ってリストのマークを作っていますね。その理由としてはyuuさんが指摘しているとおりブラウザによって生じる微妙なズレにあると思います。素直に正しくかつ簡単な方法といえば間違いなくlist-style-imageなんですけどねぇ。
見た目のことを考えたら現時点ではbackgroundのほうが安全でしょうか？
list-style-imageプロパティを使っていない理由が不明なのはまあいいとしても、このエントリーで謎なのは、Subheadingの部分はimg要素なのに、ul/li要素ではbackground-imageプロパティを用いているところです。
なぜふたつの要素間でリストマークを表示させるやり方に差異が出ているのか、その意図がイマイチわかりません。
異なるやり方を例示することで、tipsの幅を広げようとしたのであれば、そのような説明を追記して欲しいです。
あと、
>アイコン画像等は「Fast Company」さんのものを参考にさせていただいています。
とありますが、“参考にしている”というのはどういう状態のことなのでしょうか。
単に“Fast Companyのアイコンをそのまま使用している”ようにも見えてしまうのですが、これは“Fast Companyの許可を得てそのアイコンを使用している”という意味ですか? しかしそうであればそう書けば良いのであって、“参考にしている”と表現するのは、許可を得ているのかどうかが判別し難く不適切だと思います。
要素部分に付いての説明の不足は私のCSSの認識や知識のなさから来ています。Tipというかたちではありませんが、CSSを表示するうえで不適切なものになってしまいました。ただ、ご指摘等をいただくことにより理解を深めるというい意味も含めエントリーをさせていただきました。
画像については、ほぼ同じものを作成しサイトでのリスト場所を特定しやすいような形でのサンプルになってしまったことの説明がたらず申し訳ありません。
Good Point. Anyways, this was where i met her. You can join for free as well www.redtricircle.com
