CSS Radar

CSSのリーダビリティ向上

studiomohawk — Sat, 04 Sep 2010 03:00:04 +0000

CSSに限らず、プログラミング言語において、読みやすさは至上の目標である。
と覚えていてほしい。
何を持って美しいとするかは、人それぞれだが、ここでは私の経験上のベストプラクティスを紹介する。

CSSを分割して、整理する

中規模以上のサイトでは必須のテクニックである、マスターファイルによる管理手法。
この手法の弱点は、リクエストが増えてしまう事だが、再利用性も、メンテナンス性能も高い。
メンテナンス性を向上させるために、コメントアウトしたブロックで、何に利用するのか、更新履歴、バージョンナンバー、誰がアサインされているのか、などの情報は必須だ。

目次の作成

本や、辞書と同じように、目次を作成し、その目次に沿ってCSSをセクション化して管理しておけば、誰が見ても修正や追加を簡単に行う事ができる。

ケーススタディ: CSS Radar

シンプルにしてはいるが、基本このサイトでも上記2項目について実践している。
CSS RadarはWordPressで動いているので、その記述ルールに適合するように書いている。

私がWordPressでサイトを構築する場合は、このスケルトンファイルを常に使い回している。

カラーとタイポグラフィーの管理

CSSには残念な事に定数という概念がない。
そのため、散逸しがちな、色の情報、フォントのサイズやリンクカラー、フォントファミリーなどをコメントを利用して管理しておくことも大切だ。
例えば、先ほどのマスターCSSファイルなどにその情報があれば、多くの人が苦手な文書化も比較的簡単に管理できる。
私個人では、ここまで管理してはいないが、複数人以上が関わるプロジェクトや外部のフロントエンドデベロッパーと関わる様な場合は必要になってくるだろう。

CSSプロパティの書き順

ここに細かい規定を設けているフロントエンドデベロッパーも多いのではないかと思うが、シンプルにアルファベット順で十分だ。
ブラウザによって、悪影響を及ぼすと考えている人も多いが、まったく関係がないので、誰でも、覚えずにすむ(たまに忘れるが)アルファベット順での記述がおすすめだ。
私はこの書き順に1つだけ、例外処理をしていることがある。

border-widthやtopなど、親子関係がはっきりしているプロパティは、インデントを利用して、アルファベット順を無視している。
さらに、top、left、bottom、rightについては、常にTRouBLeの順に、
a:link、a:visited、a:hover、a:activeについても、LoVe HAteの順に書いている(こちらは正しく動作するために必須)

インデント

CSSはPythonと異なり、インデントは必須ではない。
まったくインデントをしない人も、インデントを活用する人もいて、当然前者は若干読みづらくはあるが、ファイルサイズを縮小できるという利点がある。

私の場合は、その両方を活用している。

プロパティが複数行になる場合は、プロパティをインデントし、プロパティが1行の場合は、インデントしない。
親子関係がある場合(10行目以降)には、インデントを階層的に利用している。

さらに開発の完成時に、複数行の場合の綴じ括弧は、最終行に並べている。
私が愛用している、オンラインツールのStyleneatの記法に準じて書くようにしているので、自分以外のCSSファイルをメンテナンスする場合は、
まずStyleneatで整理してから、開始するようにしている。

圧縮 -Minify-

phpが自由に扱える環境下であれば、可能な限りCSSファイルをminifyすることをおすすめする。
メンテナンス性をキープしながら、サーバーへのリクエスト、ダウンロードするファイルサイズの縮小はなかなか大変なので、サーバーサイドでの自動処理が好ましい。
minifyなどが便利なので、バックエンドの人々と相談して、可能な限り導入をしたい。

What I’ve Read: 10-08-23 to 10-09-04

studiomohawk — Sat, 04 Sep 2010 00:48:43 +0000

現役フロントエンドデベロッパー＋ウェブデザイナーが気になった記事を紹介するWhat I’ve Read。
今回は2週間分。

Read This Code: HTML5 Boilerplate

studiomohawk — Sat, 28 Aug 2010 03:30:38 +0000

Read This Code for Week 35 – HTML5 Boilerplate

せっかく”ソースリーディングでCSSを学ぶ“を書いたので、私が次週に向けて、読んでおこうとしているソースコードを紹介していこう。

今週は、HTML5 Boilerplate – A rock-solid default for HTML5 awesome.。
リリース時から、deliciousには入っていたが、まだ読み始めていなかったが、
The Official Guide to HTML5 Boilerplate | Nettuts+での、作者自身によるソースコードリーディングを見て、改めて読んでみることにした。

HTML5 Boilerplateとは

クロスブラウザ互換(IE6も)
HTML5
キャッシュ、圧縮によるパフォーマンス最適化
サイト設定のベストプラクティス
モバイルブラウザ最適化
プログレッシブエンハンスメント[記事のリクエストは@cssraderまで]
IE専用body class

など、HTML5だけにとどまらず、フロントエンドデベロッパーである作者、Paul Irishが2年半もの間培った知識の集約だ。
Paul Irishは現在、Google Chrome dev relationsとして働いており、JQueryのチームメンバー、ModernizrとCSS3 Please! The Cross-Browser CSS3 Rule Generatorのデベロッパー。

ソースコードはこちらから
私もこれから、ダウンロードして、Dropboxへ移動。

ソースリーディングでCSSを学ぶ

studiomohawk — Sat, 28 Aug 2010 02:48:10 +0000

学ぶは真似る

The rich are not always happy.
は私が英語が好きになるきっかけになった、教科書にも乗ってるよく見るセンテンス。
職人気質な私は、学ぶは真似るからやってきた言葉だと聞いたとき、いや聞いたときはあまりスナオな人間ではないので、死ぬほど勉強をしていた大学生の頃、頭の中でよく繰り返された言葉だ。

プログラミング言語の習得にあたっても、人様が書いたコードを読んで、勉強するという手法はメジャーだ。
CSSやJavaScriptを日常的に書いている私も、同様の勉強法を取り入れている。

常に自分より先進的な知識や技術を持っている人は世界を見渡せば、たくさんいる。
英語がわからなくても、イタリア語がわからなくても、CSSなどの言語の文法は同じなので、英語が少しばかり苦手でも、簡単に導入できる勉強法というだけでなく、
多くの場合、ソースは無料で手に入る。

Code Reading—オープンソースから学ぶソフトウェア開発技法
この本の帯にあるように、コードは小説よりも面白い。

CSSソースリーディングのコツ

全体を一通り読む – CSSのフレームワークなどは分割されていることが多いので、まずはその構造を把握しておく
気になったテクニックを実際に利用してみる – テキストエディタとブラウザ、Firebugだけで実験できる

たったこの2点さえ押さえておけば、CSSに関してはソースリーディングから実力アップできるだろう。

あまり家にいる時間が多くはないので、通勤中に私は1をしていることが多い、まさに小説を読む感覚でCSSのソースやJSのソースを読んでいる。
そんな時にはiPadのNebulous Notes (for Dropbox)というDropboxをストレージにテキストファイルの読み書きができるシンプルなアプリを使っている。
シンタックスハイライトなどはないが、気になったソースコードをDropboxのフォルダにコピーするだけでいつでもどこでも読めるようになるし、
気になるポイントはコメントを残して、家で、また会社で実際に書いてみて、動作を確認する。
というフローが定着している。

PHPやRubyでは挫折してしまいそうな、勉強法だが、CSSなら導入は簡単。
まずは、CSSでそのフローに慣れたら、JSで、ここからは私もだが、PHPなどもこの勉強法で習得したい。

フロントエンドデベロッパーとは

studiomohawk — Sat, 28 Aug 2010 01:55:51 +0000

フロントエンドで戦うデベロッパー

フロントエンドデベロッパー、ウェブデベロッパー、クライアントサイドデベロッパーと呼ばれる職種は、単にウェブデザイナーのPhotoshopファイルをHTMLとCSSを駆使して、ウェブで公開するだけの仕事ではない。一般的にコーダーと呼ばれるタスクは、フロントエンドデベロッパーのメインのタスクではあるが、すべてのタスクではない。

ピクセルパーフェクトなコーディングを、元Yahoo!のNate Koechleyが最狂の開発環境とすら言うウェブブラウザで表示できるようにすることすら、豊富な知識とテクニックが必要になるだけでなく、ウェブサイトの1つの大きな特色とすらなり得るページロードの速度の向上、SEOテクニック、インタラクションのためのJavaScriptや、テンプレートエンジン組み込みのPHPやRubyへの理解、ユーザビリティやユーザエクペリアンス、データ構造やナビゲーションシステムへの理解、そして、毎回のように書いている、それら多岐にわたる分野に対する高い知識、デファクトを知り実装する実現力を持たなければいけない職種である。

私はコーダーが元にある人間なので、専門はHTML/CSSだが、この分野だけを見ても、スマートフォン、タブレットPCの普及に伴い、HTML5/CSS3の実装機会が増えただけでなく、これまでIEでは動作しないから、ということで深く知る事がなかったCSS2.1への高い理解、CSSのフレームワークの構築やHTMLの標準化など、枯れた技術であるはずの分野でも、インターネットという戦場の変化は著しい。

インターネットという戦場はその著しい成長性が故、自分自身も同じスピードで成長をし続けなければ生き残れない。
そのフロントエンドで戦うのが、私のようなフロントエンドデベロッパーだ。
多くのフロントエンドデベロッパーがそうであるように、私も例外無く、激務であることは間違いないが、
今、インターネットの世界でも、もっとも重要なエリアの職種であることもまた、疑いの余地もない。

overflowプロパティのヒミツ

studiomohawk — Sun, 22 Aug 2010 05:14:13 +0000

まずは以下を見てほしい。

overflowなし

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰…

overflowあり

floatを利用した場合、上の例が期待している動作だろう。overflowプロパティを追加した下の例では、テキストは画像に回り込まない。
これは、

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.
9.4.1 Block formatting contexts

とW3Cにあるように、float、position: absolute;、inline-block、table-cell、table-caption、overflow(visible以外)は、ブロックフォーマット化されたコンテキストを構築するためだ。

ブロックフォーマット化されたコンテキストには、フロートされた要素以外の残りのwidthスペースを自動的に計算する、という特性がある。
この特性を利用して、フレキシブルなレイアウトを構築する事ができる。
grid.cssを作成する際などに、パーセンテージを利用する場合、33.3pxなどとなってしまう場合、ブラウザは.3pxを理解できないため、
gridの終端に、.lastUnitというようにクラスを渡し、そこでoverflowを利用すると、ブラウザ側で残りのwidthを吸収する。

フロートをクリアするoverflow

overflowには、もう一つヒミツがある。
それは、フロートをクリアする能力があることだ。
追加マークアップなしにfloatをクリアする手法は様々あるが、overflow:hidden;もその1つとして有名だ。
W3Cの仕様によると、フロートをクリアするために利用できるとも、できないともとれるため、論争になったりしたが、.clearfixというクラスだらけのマークアップより、スマートな解であることは間違いない。

overflow: hidden;の注意点

overflow: hidden;を利用する際は、気をつけておくべきことがある。overflow:hidden;は、指定されたwidth、heightより大きな要素を文字通り隠してしまうため、今回紹介した方法においては、tableやimg、preなどの要素については注意が必要だ。
またolやulも、デフォルトではlist-styleを利用して描画した、squareやdecimalも隠される部分だ。
overflow: hidden;を利用する際は、overflow:auto;とも弱点を比べてから、自分のスタイルにあった方を選んだ方がいいだろう。

What I’ve Read: 10-08-14 to 10-08-22

studiomohawk — Sun, 22 Aug 2010 03:30:20 +0000

現役フロントエンドデベロッパー＋ウェブデザイナーが気になった記事を紹介するWhat I’ve Read。

今週のWhat I’ve Read

display: inline-block;

studiomohawk — Sat, 21 Aug 2010 07:07:58 +0000

ページネーション、ナビゲーション、タグクラウドなどに便利に使えるdisplay: inline-block;
IE6、IE7では使えないプロパティだが、ワークアラウンドもあるので、使い方を覚えておくといいだろう。

プロパティ:display

displayプロパティは要素が生成するボックスをどのように表示させるか、その表示形式を指定します。通常、要素型はそれぞれブロック要素とインライン要素の2種類に大別されますが、displayプロパティでは各要素に別の種類を割り当てることができます。
display CSS 表示と配置

inline-blockは、ブロック要素のように、高さや幅、マージン、パディングなどを追加でき、インライン要素のように、文節、語句単位で行内にレンダリングされる、非常に強力な値だ。

例えば

こんなナビゲーションをマークアップする場合、
ページ番号部分は不定であることが多く、ページ番号部分をfloat: left; としてしまうと、センタリングすることが難しい。
こんな場合にページ番号部分をdisplay: inline-block;とすると、ページ番号全体の要素にtext-align: center;を指定すれば、ページ番号部分の数に応じてセンタリングできる。

では実際のマークアップを見てみよう。

ストラクチャ部分のCSSのみだが、使い方がわかっただろうか。
IE対策として、IE7以下のみ読み込む、スターハックで*display: inline;とし、
hasLayoutというIEのみが持つ、ヒミツのプロパティをtrueにするために、zoom:1を追加した。
※なお、IEハックは極力さけて、コンディショナルコメントを使って、IEのみで読み込むCSSファイルで指定することが望ましい。

便利なプロパティの最大の弱点

display: inline-block;は見ての通り、非常に強力で、便利なプロパティだが、1つだけ避けられない弱点がある。
上のマークアップのように、マークアップ上に改行がある場合、要素に対して自動的にmargin-right: 4px;が追加されてしまう。
レイアウトを組む際には、非常に悩ましい弱点だが、

マークアップから改行をトル
上記の例なら、liに対して、margin-right: -4px;を追加する

というワークアラウンドが考えられる。

弱点は弱点として、きちんとワークアラウンドとセットで認識していれば、非常に便利なdisplay: inline-block;。実際に書いて、試してみてほしい。
それでは、Happy Coding!

参考ページ

インフォメーションエコシステム

studiomohawk — Sat, 14 Aug 2010 02:01:46 +0000

続けられる情報収集

情報収集はフロントエンドデベロッパーにとって、もっとも大切なタスクの1つ。
ウェブはあっという間に進化するイキモノ。
もうすぐ、200に届くRSSが生み出す300-400記事もの情報の海を渡っている私の実践的インフォメーションエコシステムを紹介しよう。

情報収集ツール

ウェブツール

1) はすべての出発点、RSSはここで一元管理して、2) 3)はFirefoxのアドオンを利用し、内容に合わせて振り分け。
4) は情報発信源として見逃す事ができないTwitterのタイムラインの中から、リンクがあるものを抽出してRSSに変換してくれる。
5) では、1) ですべての記事を読み終えた後、見逃したトレンドトピックがないかをチェックするためのセーフティネット的役割として利用。
自分がDeliciousしたものや、Read It Laterに送ったものが、ここで表示されると自分が正しい選択肢をできたという自信につながる。

iPhone&iPad

私がiPhoneとiPadを持っている理由は、情報をいつ何時、空いた時間に取得し、整理し、読むことができるから。
デスクトップとの親和性、iDevice同士の同期という2点を重視して、悩みに悩んだシステムだ。
今は安定運用に入って長いが、ここまでたどり着くのに、iPhoneとiPadのアプリにいくらお金をかけたかわからない。

情報は収集するだけではなく、出力することが大事

自分だけで情報を持っていても、面白くはないし、広がりが持てない。
知っている、ということは大切だが、それを実践し、シェアし、拡散していくのも大切なタスク。
チーム全員で、同じ知識レベルで話ができるように。
私もそのアウトプットは大の苦手。だからこそ、このCSS Radarを通じ、アウトプットの練習を重ねている。

もはや手放せないウェブツールたち

studiomohawk — Fri, 13 Aug 2010 15:28:39 +0000

いつ何時も楽をするための技術を磨くのもフロントエンドデベロッパーのタスクの1つだと思っている。
私はといえば、最強に面倒くさがり。
というわけで、もはや手放す事ができなくなった、
フリーで使えるフロントエンドデベロッパーも、ウェブデザイナーにも便利なウェブツールを紹介。

CSS Sprite Generator | Project Fondue
リクエストの数を減らすためのテクニック、CSS Spriteはオプティマイズには欠かせないが、少々面倒。
CSS Sprite Generatorなら、スライスした画像をzipに圧縮すれば、あっという間に1枚画像に。
CSSもきちんと出力してくれるので、画像の命名規則と少しの慣れで、コピペでCSS Spriteが完成してしまう。
あまりに便利なので、作者に頼んで日本語化をさせていただいたほど。

CSS3 Playground by Mike Plate
まだ早いと思いつつ、iPadの登場などで見逃せないCSS3。まだベンダー専用プロパティも多く、ソラで書けるほどではない。
効果の確認にも使えるCSS3のジェネレータであるCSS3 Playgroundは、決定版とも言えそうな最新ツール。
月並みだが、騙されたと思って、是非遊んでみてほしい。

Placehold.it – Quick and simple image placeholders
プロトタイプやテンプレート作成、ワイヤフレームすら、HTMLで書いてしまう私にとって、
Placehold.itの登場は画期的だった。
URLの後にパラメータを入れれば、任意のサイズ、文字、色でダミー画像を生成してくれる。
シンプルながら強力なツールだ。

0to255
ウェブデザインをやっていると結構困るのが近似色。
ミニマリストの私は、カラーもミニマム。そこで便利なのが、選んだカラーの近似色を一覧で表示、
そして簡単にコピペしてくれる0to255は手放せない。

Color Scheme Designer 3
こちらもカラー関係のツール。こちらはカラースキームを考えるのに利用している。
細かい事は使ってみればわかるはず。ツールは英語ながら、シンプルに使えるので、使い方に慣れてしまえば、
きっと手放せなくなるツールなのは保証する。

Styleneat – CSS Organizer
自分が書いたCSSだけでなく、人が書いたものを整理整頓、管理するのもフロントエンドデベロッパーのタスク。
プロトタイプで書いた適当なCSSはもちろん、スタイルルールから外れたCSSもキレイに整形してくれるのが、Styleneat。
よくあるミニマイズではなく、バリデータでもなく、単に整形してくれるツールだが、ミニマイズされたCSSすら、整形できる強力さに、
私のスタイルルールをこのツールが吐き出すスタイルにあわせるほど便利だ。

SitePoint CSS Reference
W3Schools Online Web Tutorials
困ったときのCSS辞書。
JSやHTMLについても詳しいのが後者で、前者はかなり細かい情報まで網羅するCSS辞書。
たまーにしか使わないプロパティについては、その仕様についてきちんと知っておいた方が、デバッグが楽。

GTmetrix
こちらはオプティマイズ診断ツール。
YSlow!とPage Speedを合わせて診断してくれる。
ロードタイムを短くする事は、何よりも勝るユーザビリティ向上策なので、バックエンドの方々と強力して、100点を目指したい。