Greensleeves v2.0 / Archive / 2007-05
Notes about things I'm interested in.
何となく del.icio.us の subscription を眺めていたら、面白い CSS ギャラリーを見つけたのでご紹介。
緑色系のデザインに特化しているので、緑好きな僕は即、ブックマークへ。ギャラリーの中で個人的に気に入ったのが CSS3.info とか Fine Store とかですかね。大仰に画像を使わないでいて、かつシンプルな構成が好みなんです。
ギャラリー自体はまだ数がそんなに多くないので、今後に期待です。
ウェブサイトのスタイルを編集しようと思った際、作ったばっかりの頃はいいけど、何ヶ月か後に編集しようとすると「あれ？これどうなってるんだっけ？」とか自分で作ったはずのスタイルなのに意図を見失う場合が稀にあります。それを防ぐために、今のうちにスタイル記述に関するルールを作っておこうと思いました。もちろん CSS を一から書き直すときや、複数人で CSS を編集するような場合でも使えるような配慮も忘れずに。
その際、他の人はどうしてるのか気になったので、色々調べていたら hxxk.jp - CSS の記述ルール記事のまとめのエントリーにドンピシャなまとめがあったので、いろいろ参考にして作ってみました。
guideline.css の作成
前述のまとめで取り上げられていた Code-404 の.css ファイルの先頭にルールを明確に記述しておく
記述定義の方法が一番しっくりきたので、それをベースに guideline.css を作成。.css ということになってますが中身はコメントアウトした大まかな CSS 編集ガイドラインだけしか書いてありません。
guideline.css の中身
- CSS プロパティの記述順序について。CSS2 Specification の出現順序を参考に記述順序を作成。CSS2.1 の改訂でサポートされなくなるプロパティとページ/オーラルメディアについてのプロパティは割愛しています。
- CSS ハックの記述法について
- プロパティの Shorthand 記述について
- CSS の分割について
簡単にまとめると上のような感じになりました。詳細は guideline.css をご覧ください。
あとは分割された reset.css、element.css、layout.css についても頭に細かい記述ルールを書いて、import.css でまとめて、お終い。だけど、今はまだルールは決めたけど時間が足りないので記述はそれに従って書いていない。それは後ほどに。
Polaroid-o-nizer™ のようなジェネレーターもあるからか分からないんですけど、写真風画像といえばあちこちで見受けられますが、それらとは一味違う、よりリアルな写真風画像の作り方が Rapid Fire #1: Photo-Realistic at SixThings で紹介されていたので真似て作ってみました。
Fireworks のリファレンスですが、多分 Photoshop でも問題なく作れるはずです。
そして出来上がったのが、上の画像。あまり上手じゃないですね。つーか下手糞ですね。写真が曲がったような感じが上手く出せてません。でもこれ、結構簡単に作れる割りには重宝しそうな感じもします。もうちょっと練習してみよう。
最初は要らないと思っても、ある程度ウェブサイトを更新していくとやっぱり欲しくなるのが独自ドメイン。ご多分に漏れず、僕もドメインを取りました。green-sleeves.net を 2 年契約で。
サイト名の元ネタが超有名なイングランドの民謡なので、greensleeves.* は .com .net .org .jp と当然使用中でダメ。結局、真ん中にハイフンを入れて妥協しました。
301 Moved Permanently で新ドメインへリダイレクト
さて、新しくドメインを取ったら、旧ドメインにアクセスがあった場合リダイレクトしないといけませんね。.htaccess に以下のように記述したらうまくいきました。
RewriteEngine on
RewriteCond %{HTTP_HOST} ^gs\.silk\.to$ [OR]
RewriteCond %{HTTP_HOST} ^fpriest\.sakura\.ne\.jp$
RewriteRule ^(.*) http://www.green-sleeves.net/$1 [R=301,L]
簡単に説明しますと、gs.silk.to 若しくは fpriest.sakura.ne.jp 下にアクセスがあった場合、www.green-sleeves.net に 301 Moved Permanently でリダイレクトする。という感じです。
例えば、http://gs.silk.to/hogehoge/foo/bar.html とかいうファイルにアクセスすると http://www.green-sleeves.net/hogehoge/foo/bar.html に 301 でリダイレクト。となるわけですね。
あとは、Google 先生にリダイレクトを認識してもらえば OK。稀に SEO スパムとして認識される場合もあるらしいですが、大丈夫だと思いたい。
MT の mt-config.cgi をちょっと修正
MT の設定も少し弄ります。mt-config.cgi を開いて、CGIPath の項目を新しいドメインに対応するように修正。
xyzzy 使いなので mapae.ph も少し修正
mapae for xyzzy を使って xyzzy 上で編集・投稿しているので mapae.ph の $RPCSERVER の項目を新ドメインに対応するように修正
行った作業を忘れないようにメモすると以上のようになりました。そのうちサーバーも移転するかもしれないので、ブックマークされている方は新しいドメインのほうで再度ブックマークの方を宜しくお願いします。RSS に関しては FeedBurner で焼いているのでそのままでも大丈夫です。
表示デバイスや表示空間の条件などによって、最適な形にレイアウトを変更または出力する手法のことを "Adaptive Layout" といいます。これを初見したのが A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique の記事で、目から鱗落ちまくりだったんですが、CSS3 の Media Queries を使えば少し劣る感じはするけど CSS Only で似たようなものが出来そうだったのでちょっと試してみました。まだ、勧告候補（Candidate Recommendation）下じゃん。とか、対応ブラウザ少ないじゃん。とかいう突っ込みは禁止。
たとえば、body 要素の背景色をブラウザの表示空間幅が 640px 以下の場合に赤、641px から 800px まで緑、801px からは青としたい場合、CSS に以下のように記述すれば上手くいきます。
CSS
@media screen and (max-width: 640px) {
body { background: #f00; }
}
@media screen and (max-width: 800px) and (min-width: 641px) {
body { background: #0f0;}
}
@media screen and (min-width: 801px) {
body {background: #00f;}
}
- 表示域幅 640px 以下
- 表示域幅 641px 以上、800以下
- 表示域幅 801px 以上
Opera 9.2 と WebKit は Media Queries の一部をサポートしているみたいで、ちょっと Opera で試しに見てみたんですが上記の場合、表示域幅が その条件になったときに上記スタイルが自動的に適応されるんじゃなくて CSS が読み込まれたときに条件と合致するスタイルだったら適応される。という感じの挙動でした。
Poll results: 50.4% of respondents maximise windows | 456 Berea Street にもあるようにディスプレイの横解像度が 1024px から 1600px 超までかなりばらけていて、かつブラウザ窓を最大化してる人、してない人。と閲覧状況も複雑になっているので、Media Queries が本格的にサポートされるようになってくると、幅ごとの最適レイアウトも意識されて、Adaptive Layout な考えもメジャーになってくるかもしれませんね。