本日は、ちょっぴり便利かな～っと思うCSS Tipsをいろいろご紹介。

既に、ご存知のものも多いかもしれませんが・・・

1. Image map for detailed information

FlickrみたいなImageMapが作れます。

2. How to Create Flick Animations with CSS

JavaScriptを使わずに、CSSと画像でアニメーションが作れます。

3. FACE: Faruk’s Animated CSS Enhancements

JavaScript と CSSを使って、とってもきれいなアニメーションが作れます。

4. CSS Gradient Text Effect

コリスさんの記事でも紹介されていた、テキストにグラデーション効果をつけるスタイルシートです。

5. css: add a loading icon to your larger images

重たい画像を貼り付けるときは、ローディングイメージを背景に設定しておくと便利かも。

6. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Eggで使われているような、ひとつのカラムを強調したように見せるチュートリアル。

7. How to make sexy buttons with CSS

とってもセクシーなボタンが作れます。

8. Checkmark Your Visited Links with Pure CSS

訪問済みリンクにチェックマークがつきます。IE6ではサポートされていませんが・・・

9. footerStick

フッターを常にページの最下部にくっつけることができます。

10. CSS Dock Menu

jQueryとCSSを使って、MacのDockMenuっぽい効果が出せます。

11. Create a Lightbox effect only with CSS – no javascript needed

JavaScriptを使わずにLightboxっぽいエフェクトが出せます。

気に入ったものがあれば、お試しください～。

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

margin:0; padding:0;

margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最初に0にしてます。。（デザインにもよりますが。。）

line-height:1.4;

これは、行間設定ですわ。1.4はモニタで文章を読むときに、人間が一番読みやすいと言われている行間設定です。。

color:#333;

文字の色ですね。これも、デザインによりけりですが。。真っ黒な文字色よりも、濃いグレーくらいのほうが目にやさしい？（好みの問題ですが。。。）

font-family:Arial, sans-serif;

フォントの設定ですね。こちらはお好みのフォントで良いかと思われますが。。

font-size:0.9em;

フォントサイズは、わたくし最近は、0.9emに設定するようにしてます。12pxとか14pxとかpxで指定される方も多いかと思われますが。。。1emに設定しておくと、ブラウザの標準設定では、実際には16pxで表示されるようです。

日本語のような2バイト文字では、16pxちょっと大きすぎるかなぁ。。って感じなので、0.9emに設定。16×0.9=14.4なので、ブラウザの設定を変更していないユーザーさんには、実際には14.4pxで表示されてるはず。ちなみに0.875emって設定すると14pxで表示されます。

ブラウザの設定でフォントのサイズを大きめに変更してるユーザーさんには大きく表示されるので、pxで設定するよりも、親切設定って事ですね。。

っちゅうわけで、まとめてみると。。

body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}

これは、あくまでも参考ということで。。デザインによっても設定は微妙に変わってくると思いますが。。一般的にはこの辺の設定は使いまわせるのではないでしょうか？？

デザインblogランキング

「言及リンクのないトラックバックはお断りします。」的なブログが多いような気がする。

まぁ、大半がSEOを目的として、関連性のない記事に一方的にトラックバックを送信してくるような、ブログが多くなってきたための対処ということなのでしょう。。。

しかし。。。なかなか言及リンクって言われてもねぇ。。

要は、トラックバック元の記事にトラックバック送信先のリンクがあればいいわけですが・・・
それだけじゃぁ味気ないので・・・

どうせなら、大々的に引用したろう。っちゅう結論に達しました。。

例えば→のように書いてしまえば、このブログの文章ではなく、リンク先の文章っちゅうことが一目で分かりますよねぇ。。

しかし、すごいですなぁ。。。長島氏。。。神いわゆるゴッドですな。。←（あ。。これも引用せなあかん？）

とにかく・・・こんな風に書いておけば、読者にも、引用された文章を書いた筆者にも印象がよさげ？

っちゅうわけで、今回使用しましたCSS（スタイルシート）、html、イメージファイルをご紹介。

CSS（スタイルシート）

.quote_block {
float: right;
margin: 10px;
padding: 10px;
width: 250px;
font-size: 12px;
background: #F9FFEE;
border: 1px dotted #99CC33;
}

.bqstart {
float: left;
margin: 0 10px 5px 0;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqstart.gif) no-repeat;
}

.bqend {
float: right;
margin: 0 0 5px 10px;
padding: 0;
width: 35px;
height: 25px;
background: url(images/bqend.gif) no-repeat;
}

.quote_block blockquote {
margin: 0;
padding: 0;
}

.quote_block p {
margin: 0;
padding: 5px 0 10px 5px;
}

.quote_block cite {
float: right;
margin: 0;
padding: 0;
font-size: 10px;
font-style: normal;
}

ｈｔｍｌ

<div class="quote_block">
<div class="bqstart"></div>
<blockquote cite="引用先URL" title="引用タイトル">
<p>引用文</p>
</blockquote>
<div class="bqend"></div>
<cite class="cite">
<a href="引用先URL" target="_blank">
引用タイトル
</a>
</cite>
</div>

イメージファイル（↓のイメージを保存してくださいな。）

デザインblogランキング

普段はそれほど気にならないのですが、リンク集のようにテキストリンクがリストのように羅列されているサイトでは、
CSSで訪問済み(visited)リンクを設定されていると、ユーザーにとっては一目でそのリンクをクリックしたかどうか分かるので、便利かも。

っちゅうわけで、CSSで訪問済み(visited)リンクをデザインしてみた。

1. 色を変えてみる
一番一般的な方法。多くのブラウザでは、リンクは、青の下線で表示されて、訪問済みリンクは、紫の下線で表示されてるのが一般的な感じ。

a:visited {color: #551A8B;}

サンプル↓（劇場映画[日本]･週間ランキング TOP5 2007年1月22日付）

1. 愛の流刑地
2. モンスター・ハウス
3. 硫黄島からの手紙
4. 武士の一分
5. 大奥

2. 打ち消し線を入れてみる
訪問済み(visited)リンクに打ち消し線を入れてみた。たまにこんなサイトを見るが。。。なんだか、リンクが無くなった感じがしないでもない。。。このまえ、他人のブログで、このブログが紹介されてたのですが…こんな感じ⇒「デザインウォーカー」になってて、ちょっぴり悲しい時だった。。。

a:visited {text-decoration: line-through;}

サンプル↓（劇場映画[アメリカ]･週間ランキング TOP5 2007年1月15日～17日）

1. Stomp the Yard
2. Night at the museum
3. The Pursuit of Happyness
4. Dreamgirls
5. Freedom Writers

3. 画像を入れてみる。
画像を使って訪問済みをデザインしてみる。リンク前は、普通のテキストリンクで、クリック後にテキストリンクの右側に、マークが現れる仕組み。なかなか、いい感じかも。。

ただ訪問済みリンクサンプル←が訪問済みリンクだと、ユーザーに理解されるのか？。。

a:visited {
margin: 0 3px 0 0;
padding: 0 13px 0 0;
background: right url(images/visited.gif) no-repeat #FFF;
}

サンプル↓（Billboard 週間ランキング TOP5 2007年1月27日付）

1. Irreplaceable – Beyonce
2. I Wanna Love You – Akon Featuring Snoop Dogg
3. Fergalicious – Fergie
4. Say It Right – Nelly Furtado
5. Smack That – Akon Featuring Eminem

おまけ. テキストを入れてみる。
インターネットエクスプローラー(IE)では、サポートされて無いようで。。FireFox,Opera,Safariで確認済みの方法をご紹介。。

CSSに書き込まれた文字列を表示することができる模様。CSSで、a:visitedの後ろに:afterって書くと、「訪問済みリンクの後に」とか、:beforeって書くと「訪問済みリンクの前に」といった感じになるようです。でもって、CSSの中身にcontent: “表示したい文字“;って書くと、”"で囲まれた部分に入力された文字列を表示できるようです。

a:visited:after {
content: " (←それもう見たよ) " ;
font-size: 75%;
color: #CC0000;
}

サンプル↓（オリコン･シングル年間ランキング･トップ10 2006年度）

1. Real Face – KAT-TUN
2. 粉雪 – レミオロメン
3. 青春アミーゴ – 修二と彰
4. 抱いてセニョリータ – 山下智久
5. SIGNAL – KAT-TUN
6. ただ…逢いたくて – EXILE
7. しるし – Mr. Children
8. 純恋歌 – 湘南乃風
9. supernova／カルマ – BUMP OF CHICKEN
10. タイヨウのうた – Kaoru Amane

デザインblogランキング

先日ご紹介しました、「CSSのバックグラウンド画像をランダムに表示してみる」では、個々のスタイルの背景画像をランダムに表示することが可能になりました。

っちゅうことは。。。CSSを何種類か用意しておいて、読み込んでるCSS（スタイルシート）を丸ごとランダムに読み込むことができたら。。。

こりゃぁ、アクセスされるたびにサイトのデザインをガラっと変えることも可能なのでは？

っと。。。思ってしまいまして。。探してみたら。。。やっぱりございました。

とりあえず、サンプルはこちらからじゃ↓

このサンプルページではどんなことをやってるかといいますと。。。

htmlはそのままで、ページが読み込まれるたびに、あらかじめ用意しておいた数種類のCSS（スタイルシートを）をJavaScriptでランダムに読み込んでおります。

っちゅうわけで、アクセスされるたびにサイトのデザインをガラっと変えることに成功！

ではでは、肝心のやり方のご説明。

1. 以下のコードをコピーして、適当に名前をつけてjsで保存。（わたくしはrandom-css.jsと名前付けました。）

2. で、３行目の

の数字を用意するスタイルシートの数に書き換えます。

同様に１２行目の

の数字も用意するスタイルシートの数に書き換えます。

で、１４行目からの