XXXXXユーザーができないと思っている12の機能

なんだかFireworksの新規開発が終了とかそういう話題でコレ系の記事が増えてきているみたいなので、ちょっと便乗してみることにしました。タイトルと以下の項目は、見かけた記事を参考にさせていただいています。

01. ピクセルに最適化されていない

高精細なディスプレイが出てきて「1px」という単位もなかなか怪しいものになって、「その1pxは本当に1pxなのか？」ってな話の昨今ですが、まぁ一応のところはピクセルというところで幅も高さも線幅も移動も修正できるCSSは便利ですね。

CSSプリプロセッサ各種にある「mixin」の機能を使えば、あらかじめスタイルを定義しておいて複数の要素に一括で適用するといったことができますね。もちろん一括で修正するなら、元の記述を変えるだけでOK。

HTMLの要素にclass属性などを付けておけば、その要素はCSSから直接操作することができますね。

大きさや位置はCSSを使えば数値で指定することになりますね。複数の要素を同時にどうにかするなら、CSSプリプロセッサの変数を使うなり前述のmixinを使えば簡単です。

mixinって便利ですね。ここでも使えます。

.border-radius(@size:4px){border-radius: @size}

みたいなmixin作っておけば、デフォルトの値（4px）を使いたい時はそのまま「.border-radius();」で、値を変えたかったら「.border-radius(2px);」みたいにすればいいですもんね（LESSの場合）。

borderというプロパティがあります。素晴らしい。

検索・置換はお手のもの。何ならCSSプリプロセッサの変数で定義しておけば、それを修正するだけで終了です。

複雑なパスは、SVGやCanvasの出番ですね。実体はただのコードですからそのまま修正もできます。Retinaみたいな高精細なディスプレイでも、拡大縮小しても綺麗に見える特典付きです。

手書きは嫌だというのなら、SVGはSketchから書き出すとオブジェクトサイズにできるし、AiからCanvasに変えるときはこれとかどうでしょう？

Webって見る側の環境に左右されるものですから、それは見る側の環境次第でいいんじゃないでしょうか。少なくともMacでは綺麗に見えますよ。

何度も何度も書いてますが、mixinとかでまとめておけばいつでも使いたい時に使えます。コピペは得意です。

スライスという考え方はそろそろやめても良い頃かと思うのですがいかがでしょうか。ピクセルパーフェクトの完璧なカンプを作って、それをまたHTML/CSSで再生産するって非効率的だと思いませんか？

HTMLを複数作るとページは複製できますね。モックアップなどで複数パターンを考えるのであれば、HTMLテンプレートエンジンとかをうまく使えばコンテンツはそのままに複数のパターンを作って試してみる、共用のテンプレートを使い回すといったことは簡単にできますよ。

カンプが必要ならこの辺をうまく使えば、作りながら各種デバイスサイズのスクリーンショットが撮れますよ。

あ、あと単純なステートなら「:hover」ってのがあるので大丈夫です。

ま、そんなとこですね（笑）。

もしよろしければ先月講演の際に使用したこちらのスライド、あと5年前に書かれた37 SignalsのJason Friedのこの記事でも読んでみてください。