配色管理用の CSS をモジュール化する

今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。）

（なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。）

配色管理モジュールの作成方法

1. 色に関するスタイルをすべて、この配色管理モジュールに集約する。
2. 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。
3. セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴）
4. セレクタは、浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述する。（上書き予防）
5. 階層の深さがすぐに把握できるように、セレクタは冗長に表記する。
6. IE 6- 用のスタイルを別途定義しない場合は、子セレクタ・隣接セレクタ・属性セレクタなどは使わず、子孫セレクタで構造を記述する。

ブランディングのためのスタイルガイド、もしくは Color glossary などと考え方が若干似ていますが、要は色に関する設定だけをモジュール化して、独自の CSS ファイルに別出します。

• ［参考］Color glossary

続きを読む "配色管理用の CSS をモジュール化する"

コード共有のためのネーミングルール

最近、CSS の使いまわしなどを視野に入れ、一部で class名や id名の共有というテーマへの関心が徐々に高まりつつあるような印象です。microformats なんかも、その流れのひとつといえるでしょう。

• Naming conventions table（And all that Malarkey）
• もう、class名やid名で悩まないんだからっ！！（CSS HappyLife）
• (X)HTML の id/class における命名規則（purprin さん CSS Flight プレゼンスライド）

名前の共有はコードの共有のための（複数人で同一コードを編集・転用する）重要なファクターのひとつですし、非常にいい傾向だとは思うんですけど、実際につけられている名前を見てみると、シブい顔をせざるを得ない事例が結構あるようです。

続きを読む "コード共有のためのネーミングルール"

(X)HTML, XML のコメント記述位置

コメントの記述位置について以下のようなエントリーを目にしましたが、目から鱗です。というか、未熟にも今まで気づきませんでした。(- -;;ゞ

コメントは、対象となる要素の中に記述すべし

デザイナさんにより書き方はいろいろあるかもしれないが、

<!-- hoge start -->
<div id="hoge">
  // 中身
</div>
<!-- hoge end -->

こうじゃなくて、

こうしてほしい。

<div id="hoge">
   // 中身
<!-- /hoge -->
</div>

divの中に終了を示すコメント入れなくてどーする！（構造を考えてみれば分かることですよね？）

HTMLのコメントの書き方 - capsctrldays (2007-01-19)より引用:

コレ、論理構造の妥当性の面もそうですが、内部構造を、XSLT やら DOM やらで操作する時に、決定的な違いが出てきますよね。

続きを読む "(X)HTML, XML のコメント記述位置"

プロとして気に留めておきたい 8ヶ条

プロとして仕事を遂行していくための心構えとか、指針とか、そういったようなものの備忘録です。なんとなく、考えていたことの断片を整理して書き留めてます。たぶん、個別的には、随所でよく見かけるスローガンばかりだと思いますが、要するにマイチョイス（というか、完全に自分用）です。ここに書き留めたような境地にいたるのには、まだまだ修行が全然足りませんけど..。(- -;;)

1. 目的を明確にする
2. 目的の優先順位を明確にする
3. 目的を達成する手段はひとつではない
4. 複数ある手段の中から、最適な手段を採れるのがプロ
5. なぜその手段が最適なのかを説明できるのがプロ
6. 問題解決力よりも問題発見力
7. 問題を切り分ける（問題点のモジュール化）
8. 依存関係を把握する

続きを読む "プロとして気に留めておきたい 8ヶ条"

iPhone 第一印象

iPhone の発表から一日、Steve Jobs のキーノートも一通りチェックしましたが、その第一印象だけ書き留めておこうと思います。

すばらしい点

1. 大画面による タッチパネル UI （フル QWERTY キーボードを含む）
2. 2本の指を画面上で広げることで、自由に画面のズームイン | ズームアウトもできる multi-touch
3. 無線でのデータ通信（Wi-Fi (802.11b/g) + EDGE + Bluetooth 2.0）
4. 内蔵センサーによる、ポートレート（縦長）←→ランドスケープ（横長）表示モード切替機能
5. 任意の IMAP | POP3 アカウントでのメールの送受信に対応
6. フルブラウザ（Safari）での Web ブラウジング
7. iPod UI に Cover Flow が追加

残念な点

1. 4GB | 8GB モデルと（充実したマルチメディア機能の割に）容量が少ない
2. 3G じゃないらしい
3. Google Maps は使えても、GPS 機能はない（Ez ナビウォークのようなことはできない）
4. OS X 内蔵とのことだけど、PDF などの各種ドキュメント類の閲覧・編集については言及がなかった（機能的には PDA 未満？）
5. おそらく、画面のスクロール UI に関しては、以前の円形タッチパッドの方が、ストレスが少ないかと
6. 画面サイズからいって、PC 向けフルサイズブラウジングに拘った iPhone 用 Safari よりも、Opera Mobile のスモールスクリーンモードの方が、ブラウジング時のストレスが少ないような気がします。このあたりは逆に Apple らしからぬ UI 設計という感じも..
7. Willcom の W-Zero3 などと同様、スクリーンに指紋や脂が付着するのが気になる可能性大

というわけで、結論としては、大きいスクリーンに魅力的な UI と無線通信機能にはすごく惹かれるけど、携帯電話や PDA としては国内ベンダーがつけいる隙がかなりあるって感じでしょうか。

もっとも、日本の携帯電話業界は、事実上、鎖国同然なので、iPhone が日本で発売されるかどうかは未知数です。アジアは 2008年に発売予定と言ってるのだって、どうせ日本は含まれてないんでしょうし。（GIGAZINE が「日本を含む」って言ってるけど、何を根拠にしているのかわかりません。Jobs は "Azia" としか言ってなかったし。）

個人的には 5G iPod のモデルチェンジに期待したいところだけど、これだけ iPhone が気合い入ってると、マーケティング的に、モデルチェンジは下半期以降になるかも..。（iPhone の米国リリース自体が 6月の予定ですし。）

WebKit が CSS 3 box-shadow に対応

WebKit のナイトリービルドが box-shadow プロパティ（-webkit-box-shadow）に対応してます。これはうれしい実装情報ですね。ほかのブラウザでも、こうやって角丸やドロップシャドウに、だんだん画像を使わなくても良いようになってくると良いのですが。

WebKit とは？

• WebKit とは

要するに Safari のベースになっている Cocoa ベースのブラウザコンポーネントです。

サンプル

WebKit CSS 3 box-shadow Example

WebKit での CSS 3 box-shadow プロパティは、-webkit-box-shadow: [右方向の影の長さ] [下方向の影の長さ] [ぼかし半径] [色]; で指定します。たとえば -webkit-box-shadow: 2px 2px 2px #666; のような具合です。

W3C のドラフトでは、カンマ区切りで複数の光源によるドロップシャドウ効果も想定しているようですが、WebKit では、今のところそこまでは対応していないようです。ただ -webkit-border-radius と組み合わせれば、ボックスに角丸＋ドロップシャドウ効果を同時につけることができます。

WebKit での表示状態

続きを読む "WebKit が CSS 3 box-shadow に対応"