今日は、普段Web制作をするときに使っているツールなどを全体のフローを通してご紹介したいと思います。
ざっと、
- Generate Assets
- Emmet
- Sass/Compass
という3つにフォーカスを当てていきたいと思います。
とても最近の技術というわけでもないので、記事はたくさんあると思います。
ご紹介をさらっとしたいと思うので、お使いのエディタで導入する方法などは調べてみてください。
Generate Assets
これはPhotoshopの機能で、新しめのバージョンから導入されています。
以下の様な感じでカンプをつくって、
切り出しをしたいレイヤー名に拡張子をつけます。
メニューのここから、
するとこのように出力されます。
更新すると反映されるし、なによりスライスが苦手な人にはとてもおすすめです。
他にも@2xを自動で出力したり、Jpegの品質などを指定することができるようです。
Photoshopの機能として導入される前からslicyと呼ばれるものもあり、僕はそちらをよく使っています。
PhotoshopのGenerate機能について詳しい説明はこちら(Adobeサイト)からどうぞ。
Emmet
Zen-Codingが新プロジェクトネーム「Emmet」として2013年初頭にリリースされました。
こちらのツールはコードを簡略化して書き、その場で展開することができます。
奥が深いので、いろいろな書き方があるのですが、シンプルに…。
このように書いて、
こんな感じで展開されます。
例えば複数書くリストを1行でかけたり、番号なんかは連番をつけたりといったこともできます。
Emmetにバージョンアップしてからは、ダミーテキストなんかをいれることもできます。
Sass/Compass
CSSを構造的に書くために欠かせないツールです。
.main .main-box .title
のようなものが乱立したり、カラーコードが毎回書かれていても
追記するときは非常にわかりにくくメンテナンス性が低いですよね。
入れ子にしたり変数を使ったりして書いておいて、
CSSを生成してくれる、というものです。
メリットとしては普通のCSSの書き方で書いても問題ないので、覚えた効率的な書き方だけを実践していくやりかたでも不具合がでないという点ですね。
まとめ
今回は実際の制作作業を効率的にする機能をご紹介しました。
いろいろなツールが世の中にはあるものですねー。
みなさんが、自分に合うツールと巡り合えれば何よりです。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事