Greensleeves v2.0 / Archive / 2007-03
Notes about things I'm interested in.
0 Comment、1 Comments、2 Comments・・・と、テンプレート内で英語の後ろにきちんと複数形をつけたくても、MT にはデフォルトだと数による条件分岐タグは 0 かそうでないかを判別する MTIfNonZero タグくらいしかないためそれができません。別に細かいこと気にしなくていいならそれで OK なんですけど、変なところを気にする性格なものできちんとしてみようと思います。
今までビビッと来たデザインのサイトの色を調べるとき Opera にはカラーピッカーがないもんで、Firefox を立ち上げて調べてたんですが、一々見つけるたびに起動するのもなんだかなぁと思ってるときに見つけたサイトをご紹介。
There is a form at the bottom of this page that lets you choose any URL you want to extract colors from. The colors you see here are from the site that referred you to this page!
このサイトは参照元のサイトの HTML/CSS に記載されたカラーコードを拾ってきてくれます。もちろんフォームに URL を入れれば任意のサイトのカラーコードを調べることも可能。
しかし、@import 規則で参照されてる CSS に関してはチェックできないみたいです。当サイトでは外部 CSS(import.css) で @import 規則を使って、分割した CSS を読み込んでるので CSS のカラーコードは取得できません。残念でした。
Bookmarklet
Bookmarklet があればより効率的にチェックすることができます。簡単な奴ですが作ってみました。Firefox、Opera で動作します。IE、 Firefox、 Opera で動作確認しました。
Firefox なら Web Developer 等の拡張でもチェックできるみたいですが IE や Opera で済ます場合だとこれが一番の方法かなとか思ったりしました。
Javascript を書く際、CSS のセレクタを使って要素を取得できると色々と楽です。このようなことを実現できるライブラリは、prototype.js の $$() メソッド等があるわけですが、特に cssQuery() は CSS3 の Stractural pseudo-class も大体使えるので結構面白いんじゃないかと思って試しにつかってみました。
実際に使ってみる
XHTML
<ul id="test">
<li>1st element</li>
<li>2nd element</li>
<li>3rd element</li>
<li>4th element</li>
<li>5th element</li>
<li>6th element</li>
</ul>
CSS
ul#test li {
margin: 0 0 1em;
padding: 1em;
border: 1px solid #ccc;
list-style: none;
}
たとえば上記のような XHTML と CSS があったとして、偶数番目の li 要素だけ文字色を #ffcc00、背景を #777777 に変えたい場合
window.onload = function () {
var elements = cssQuery('ul#test > li:nth-child(even)')
for(var i=0; i < elements.length; i++){
elements[i].style.color = "#ffcc00";
elements[i].style.backgroundColor = "#777777";
}
}
このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。
たとえば h1 要素にロゴ画像を表示させたい場合、ただ CSS の background-image プロパティにロゴ画像を指定したのでは、テキストがロゴの上に被さって邪魔になってしまいます。かといって h1 要素は SEO 等を行う際、重要な位置を占めるタグなので中身に img 要素を使うのもなんだかもったいない気がする。
そこで CSS の Tips の一つに要素内のテキストを画像に置き換える（置き換えているように見せる）方法を使ったりするわけですが、僕の知ってる限り、やり方には幾つか方法があります。それを少しまとめてみました。
v1.0 の寿命は、わずか 2 週間でした。早すぎだろ、常識的に考えて・・・。
とまぁ、先週末あたりに、Movable Type のテンプレートを作ろうと思って色々やってたら結構シンプルでよさげなのが出来たので入れ替えてみました。前回と違って画像ほとんど使ってません。Mini Pixel Icon から数個と blockquote の背景の引用符くらい。
とはいえマークアップの構造や、CSS の基本的な部分はほとんど一緒だったりしますが・・・。
まだ IE 5.5 と 5 で少しナビゲーション部分の表示が少しがおかしいのでそこを直して、あとはテンプレートにもう少し手を加えたら公開しようかなと思います。
Firefox の便利な Add-on の一つに、ScrapBook というのがあります。これを Web サイトを保存するときに良く使ってて、スクラップするたび Firefox を起動させて保存っていうのも面倒なので、Opera にはないもんかなぁ。と思って Google 先生に相談したらありました。
インストール完了後、右クリックのポップアップメニューに Save with Obook と Save with Obook As... が追加されてました。
蛇足気味ですが、具体的にどうやって活用しているかというと
- CSS Mania や CSS Bloom などのギャラリーサイトを Opera の RSS リーダーに購読させる。
- 更新のお知らせが上がってきたらサイトへ Let's Go
- ビビッときたデザインがあったら右クリックから Obook Plugin を使って保存。
- 色傾向別でフォルダを作って整理して、後でデザインの参考にする。
- 色々幸せ。
大体こんな感じです。
CSS を書く際、ブラウザごとのデフォルトスタイルの差異を吸収するため * を使ったリセットを行う。という有名な Tip があります。
この手法は便利で今もここの CSS で使わせてもらっているんですが、しかしある問題を抱えている模様。それは CSS techniques I use all the time | The Montoya Herald で詳しく書かれています。言及部分を抜粋してみると。
This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.
簡単に言ってしまえば、ページが巨大になるとレンダリング速度に影響が出てくることと、使えるデフォルトスタイルまで殺してしまうことが懸念される。ということらしいです。
氏は同時に、自分の初期化用の CSS も載せているのでそこら辺を参考にリセット用の CSS を組んでみるのもいいかもしれません。億劫な人には Yahoo! UI Library: Reset CSS とかもお勧め。