読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

PSDファイルからそれっぽいHTML+CSSをいい感じにつくりたい

f:id:otiai10:20150208095902p:plain

ウェブページをつくるにあたってデザイナーさんから上がってくるデザインカンプはPhotoshopPSD形式だったりする。これとにらめっこしながらHTML&CSSをイチから書いて、都度リロードしたり、画面の大きさを変えてレスポンシブのチェックをするのは、骨が折れる仕事です。

必要なもの

  • Chromeブラウザ(ライブプレビューのため)
  • Adobeアカウント(PSDファイルインポートのため)
  • そしてBrackets

Brackets エディタ

あまり多くを望まず、それっぽいものでいいので、PSDからHTMLをつくれるといいなぁ、と思っていたので、知り合いのデザイナーに聞いたらいい感じのものを教えてくれた。

Web制作用のエディター。さすがWebデザイナーのためのエディタっぽく、いちいちtransition animationとかあってオシャレである。

新しいプロジェクトの作成

ついでなので、レスポンシブ対策のため、HTML5 Boilerplateをひな形にプロジェクトをはじめてみる。

  1. 上記のページからDownload
  2. 落ちてきたzipを展開すれば、これがすでにひな形なので
  3. mv ~/Downloads/html5-boilerplate ~/your/path/project_name

今回はプロジェクト名をtainakaにしました

ライブプレビュー機能がある

[ファイル] → [フォルダーを開く] → で、さっき作ったtainakaフォルダを選択して、src/index.htmlをクリックすると以下のような画面になる。ここで編集できる。

で、これを編集・保存のたびにブラウザリロードとかアホみたいにめんどくさいので、右上のイナズマっぽいものをクリックすると、Chromeが立ち上がり、編集すると自動でプレビューが更新されるようにできる。

f:id:otiai10:20150207142405p:plain

PSDファイルをアップロードする

右上のダウンロードっぽいものをクリックすると、Adobe Creative Cloud のアカウントを求められたりして、これを紐づけると、手元のPSDをCCに上げたり、自分のCCにあるPSDをBracketsエディタ内で表示・解析できるようになる。

f:id:otiai10:20150207142826p:plain

解析だけならCC上でもできるけど、嬉しいのは補完とアセットダウンロードのようだ。↓

PSDからCSSを取得してあてる

具体的な使い方はこれがわかりやすい

Brackets: From Design Comp to Code - YouTube

Bracketsがやるのは、PSDファイルから各レイヤーのCSSを抽出したり、アセットを自動でローカルにダウンロードしたりするだけであって、HTMLの自動生成は行わない。つまり、HTMLでのマークアップをある程度終わらせてから、PSDと向き合ったほうがいいっぽい。あるいは、マークアップを想像しつつセレクタを定義しつつ、CSSを先に書いちゃう?

わたしもやってみる。

f:id:otiai10:20150208095902p:plain

  • PSDからCSS相当の値を自動で計算&補完してくれる。便利
  • CreativeCloudのPSDから、アセットを自動でダウンロードして配置してくれる。便利
  • ライブプレビューしてくれる。便利
  • 今編集中のDOMをプレビューでフォーカスしてくれる。地味に便利

雑感

  • マークアップちゃんとやったことないけど、これは便利そう
  • 別にメンテナブルなCSSを提案してくるワケではないので、CSSの教科書的なものを先に読まないと後々ヤバいな、と思った

DRYな備忘録として