2007年7月アーカイブ

• http://orderedlist.com/articles/single-line-css

プロパティごとに改行いれないでさ、1行でまとめて書いたほうが見やすいと思うんだよ！という話。理由は、その方が画面の中にたくさんのCSSを表示することができるから。一覧性がとりやすいから作業効率が良いということらしい。

改行とインデントを入れて、奇麗に見やすい（しかし長くなりがちな）CSSを書くか、1行にまとめて一覧性がとりやすい（しかし見づらい）CSSを書くかは書き手の好みによるとは思います。わたしはどちらかというと、1行で書くのが好きな方です。特にmarginとかpadding、line-height、widht、heightとか汎用的によく使うプロパティは、ほとんど1行で書きます。理由は

1. 見慣れたプロパティは、見にくくても問題ない
2. 影響範囲の狭いプロパティは、見にくくても見直すことがあまりない

とかいろいろ。経験に依るところが大きいです。そして徹底しているわけではなくて、本当に気分次第。表記を統一する気があまりない。仕事ではそういうわけにはいかないと思いますけど。

特に最近では、Firebugzのstyle情報を見れば、混沌とCSSを記述していてもinspectしている要素にどんなCSSが適用されているのかが一発でわかる（しかもきちんと整形した状態で表示してくれる）。だから、ますますあまりCSSそのものの見た目を気にしなくなってしまっている。

• http://www.css3.info/preview/resize.html
• http://www.w3.org/TR/css3-ui/#resize

CSS3のプロパティの一つに「resize」というプロパティがあり、それがSafari 3では利用可能であるという話。実際にコメント欄（comment-open-text）にresize:both;というプロパティをつけてみました。Safari 3では入力フォームの大きさを自由にリサイズすることができます。

どこにも情報を保存しないため、たとえばリロードしたりすると元のサイズに戻ってしまう。よく利用する管理画面ではやはりCookieやDBかどこかにリサイズ情報を保存してたほうが便利だと思いますが、コメント入力欄とか不特定多数の人が1〜2回だけ利用するというような場合にはCSSで対応するほうが便利そう。

Firefox 2ではまだ対応していないようですが、きっと3がでることには対応しているのではないかと期待しています（GranParadiso.appでも確認してみましたが、まだ対応していなかった）。

• Color Scheme Generator 2
• 4096 Wheel Version 2.1
• CSS Tools

画像処理ツールがペイントしかない環境下で、16進数の色コードを作成したい。と、いったケースに対応すべく、自分のブックマークを探して見つけてきたのが上の3つのリンク。

１つ目の Color Scheme Generator は、指定した色と適したカラーの組み合わせを出力してくれます。即興でウェブサイトの見本を作成しなければいけない、、そんなときに素早く、バランスのとれた配色を決めることができる。

２つ目のColor Wheelは、そのまんまカラーホイールで色を選択できるというもの。色の選択の履歴を左側に出してくれます（さらに「show full list」をクリックするとすべての履歴が参照できる）。動作が軽快なので、てきとうに色を選びまくって、「前の前に選んだ色にしよう」という感じで色を選択することができる。

３つ目のCSS Toolsは、ツールではくツールのリンク集。上の2つ以外にも有用そうなツールが紹介されています。いざ何か必要にせまられたときに、こういったサイトがたまに役に立ちます。

以上。デザイナーじゃないけど、サイトのベースカラーを決めなくてはいけない、そういったときに役立つかと思います。

• http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes

疑似クラス、英語でいうと「psedo-class」、複数形は「pseudo-classes」。ちなみに疑似要素は英語で言うと「pseudo-element」で、複数形は「pseudo-elements」。わからないで30分くらい悩んでいたのですが「疑似要素 英語」で検索したらすぐに回答が出てきました。検索という言葉を忘れていたかのような自分にがっくり。

疑似クラスとは、W3CのCSS3のworking draftの記述を参考にすれば「ドキュメントツリーの範囲外の情報、もしくはその他のシンプルなセレクタでは表現できない情報に選択可能にする（The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.）」というもの。一方、疑似要素とは「ドキュメントツリーについて、抽象的な概念を作り出す（Pseudo-elements create abstractions about the document tree beyond those specified by the document language.）」というもの。

自分の言葉で説明するとしたら、疑似クラスとは「要素の一時的な状態・特徴」をCSSで簡単に指定できるように用意したもので、疑似要素とは「要素の意味的な範囲」をCSSで簡単に指定できるように用意したものという感じ。疑似要素の場合「意味的な範囲」を指定するから文脈によって範囲が変わる。

CSS2.1における疑似クラスは、:first-childとか、link系の:link、:visited、ダイナミック疑似クラスの:hover、:active、:focus、言語疑似クラスの:langがある。

CSS3では新たに、ターゲット疑似クラス、UI疑似クラス（UI element states pseudo-classes）、構造疑似要素、否定疑似要素などが定義されている。ターゲット疑似クラスは、index.html#hogeとかアンカーのついたリンクを特定できる。UI疑似クラスは、チェックボックスのオン・オフの状態とか、UIの状態を指定できる。具体的には、:enabled、:disabled、:checkedなど。構造疑似要素は、:rootとか、構造的な特徴を指定できる。:rootのほかに、:nth-child()、first-child、last-childとか、only-childとか、:emptyとかいろいろある。:nth-child()は、たとえばtr:nth-child(even)という指定では、trの偶数行のみを特定することができる。否定疑似クラスは、指定した属性がない要素を特定する。

一方、疑似要素は、:first-line、:first-letter、:before、:afterなどがある。CSS3からは::first-lineのように、コロンをふたつつけて疑似クラスとわけて表現しているみたい。CSS3から新たに用意されているのは、::selectionという疑似要素で、ユーザーが選択（ハイライト）している箇所を指定できる。

「サイト移転」というweb1.0的な言葉の響きになつかしさを感じつつ、メモログ.orgにサイトを移しました。jpがorgになっただけです。

memolog.jpはDKLog.jpという格安レンタルサーバーを利用しているのですが、わたしのプランだとDBがBerkeley DBしか利用できないため、MT4にするタイミングであらたにさくらを借りることにいたしました。memolog.jpのドメインは現在のレンタルサーバーで取得していただいていて、ドメインの移行はなにかと面倒そうだったので新たにmemolog.orgというドメインを取得しました。

現在のレンタルサーバーには2004年当時、ドメインのとりかたもMTの設置方法もよくわからない状態でいろいろとお世話になりました。深く感謝するとともに、新天地にてひきつづきブログライフを楽しもうと思う次第でございます（あまり更新していないけど）。

RSS Feedはひきつづき、http://feeds.feedburner.jp/memolog をご利用いただけます。以前からhttp://memolog.jp/index.rdf などをご購読の方には、恐れ入りますがhttp://feeds.feedburner.jp/memolog にアドレスの変更をお願いいたします。みなさまの暖かいご支援を切に願います。見捨てないでっ

• これが 『Safari 3』の新機能だ!! (その3)
• Safari/WebKit has a new Web Inspector

すでに鮮度が落ちてしまった感がある Safari 3 を試してみました。

とはいえ、Safari そのものにあまり関心はなく、付随する Web inspector がどんなものか試してみたかったのです。Windows 版にはまだ存在しないようですが、下記のようなコマンドをターミナルで入力して Safari 3 を再起動すると、右クリックメニューに「Inspect Element」という項目が出るようになります。

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

設定についての詳細は「これが 『Safari 3』の新機能だ!! (その3)」の記事を参照。ざっくりとして所感ですが、まだ実用的な状態ではないなという感じでした。ウェブ制作という視点でみると、inspectしている対象がどんなプロパティをもっているかという情報だけではあまり役に立たない。どこのCSSのどの指定がプロパティに影響を与えているのかがわかってはじめて役に立つ。

SafariはWebkitというオープンソースのブラウザをベースに作成されています。Webkitは最新（Nightly）のビルドを出していて、Safari 3の先をかいま見ることができます。すでに試している人（Safari/WebKit has a new Web Inspector）が記事があって（そもそもそれを見たあとにエントリーを書いているのだが）、それをみて私も試してみました。

うーむ、かなり強力になっている。見た目のみやすさもポイントが高いですが、inspectしているプロパティとともに、プロパティが参照しているCSSも併記されている。これでデザインが崩れたときに、どこをどう直せば良いのかの情報が一通りそろった感じです。うむ。

ただ、inspectしている要素にその場でCSSやHTMLを追加することはできない。inspectするだけ。この点で、Firebugや、IE Developerと比べると機能的にはちょっと見劣りする（HTMLとCSSの作成という観点において）。たとえば、「タグをひとつ閉じ忘れたけど、HTMLが複雑でどこに閉じタグを追加して良いかわからない」といったときに、その場でHTMLが挿入できるFirebugは相当に重宝する。ローカルに保存したりして試すこともできるけれど、ダイナミックにできるほうがイライラは少なくてスピーディ。

でもでも、前述のとおり、CSSを修正するための情報は一通りそろってきつつあります。そんな Safari 3 / Webkit に敬礼したいと思います。グッジョブ！