どうも。Web系メンターのれもん🍋です！Life is Tech! アドベントカレンダー8日目です。
今回どんなお題で書こうかなと迷っていて3日前まで、「CSSでクリスマスっぽいロゴを作るだとかCSSで絵を描く」という無駄な内容でいこうと思っていたのですが、無駄すぎたので、役立ちそうな記事を書きます。いきなりですが、
コーディングやWebデザインってめんどくさいこともある・・・
タグを一つずつ打ったり、デザイン画と照らし合わせたり、割とめんどくさい作業が沢山あります。
Webデザインやコーディングをするときに、ツールを使ったり、Googleの拡張機能を使ったりすると、そのめんどくさいや無駄を省いて効率化したり、便利になったりします。日頃よく使っているものを紹介します。
- Emmet
- Markup Validation Service
- Mapture
- Can I use
- Webフォント
- tinyping
- PLACEHODE.IT
- スニペットツール
- Blisk
- Full Page Screen Capture
Emmet
コーディングをしたことがある人なら、絶対知ってるであろうEmmet。SublimeやAtom、Bracketsなどにプラグインとして使うことができます。タグやCSSプロパティを省略して書くことができ、tab一発で爆速でコーディングができます。「エディタ名 + Emmet」で検索してみてください。
Markup Validation Service Nu Html Checker
https://validator.w3.org/#validate_by_input
W3CのMarkup Validation ServiceのNu Html Checkerでサービスの名前の通り、HTMLをCheckしてくれます。例えば、閉じタグがなかったり、imgタグにはalt属性を付けてねだったり、EroorとWarningに分けて表示してくれます。
マークアップにきちんとした正解はないなんて言われることもあるけれども、一旦コーディングしたものをこれに通すことで、何が間違いなのか教えてくれる便利ツールです。
Mapture http://anatoo.jp/mapture/
Maptureとは、画像や画面をキャプチャして常に画面の最前列に置いて使えるMacのアプリです。どういう使い方をするのかというと、デザイナーさんが作ってくれたデザイン画と自分のコーディングをしたものを照らし合わせ、本当に細かいずれがないか確認するために使います。
Can I use http://caniuse.com/
タイトルそのまま、HTMLやCSSやES6のclassなどがどのブラウザで使えるか確かめることができるツールです。古いCSSのサポートが切れていたり、逆にIE8でも見えるようにして欲しいとか様々な要望があります。そんな時にcssのプロパティ名やhtmlタグを入れるだけで、簡単に一覧で把握することができます。
Webフォント
Webフォントは知っている人も多いのではないかと思いますが、簡単にアイコンを文字として出力することができます。
利点として、
- 色やサイズが簡単に変えられる（画像だとそうはいかない）
- hoverなどのアクションの時にも便利
- 簡単にオシャレになる
よく使うのはこのあたりです。
-IcoMoon https://icomoon.io/
-Font Awesome http://fontawesome.io/
tinyping https://tinypng.com/
パンダのトップページが可愛い「tinyping」は画像の質を落とさずに、ファイルの容量を大幅に下げてくれる便利ツールです。画像が重いだけでローディングに時間がかかって、離脱率が増える（かもしれません）。
ドラッグandドロップで簡単に圧縮してくれるのでかなりおすすめのツールです。
いちいち圧縮した画像をダウンロードしなきゃいけないのと思った、そこのエンジニアの方！是非この記事を参考にしてみてください。こっちの方が楽そう。
まだTinyPNGで消耗してるの？「pngquant」+「Automator」で画像圧縮にかける時間を限りなくゼロにしよう！
PLACEHOLD.IT https://placehold.it/
メディアサイトを作る時や、まだ画像が未定だけども何か置いておきたいというときに便利なものです。
<img src="http://placehold.it/350x150">
上記の画像タグの350x150の値を変えるだけで、その大きさの画像が生成されて使うことができます。
スニペットツール
スニペットツールとは、一度書いたコードをためておけるものになります。テーブルタグや、TOPへ戻るなどのJSの処理や、ナビゲーションなどよく使うものを置いておくことで、コーディングの効率化が図れます。
オススメはGistBox、githubと連携することができます。Qiita teamでもコードの共有ができるそうで、会社などで使うときは便利そうだなと思います。
- GistBox (http://www.gistboxapp.com/)
Blisk https://blisk.io/
BliskはChromeの検証ツールよりも、より正確にデバッグしたいけど、デバイスがないときに役立つツールです。URLを入れるだけで、他のスマートフォンデバイスやタブレットでどのように写るか確認することができます。いいなと思うところは、スマホとWebページを同時に確認できるところです。
最近使用時間が1回３０分に制限されてしまって、課金しないといつでも使えないようになったのが残念です。
Full Page Screen Capture
これは、Googleの拡張機能なのですが、Webページを一枚の画像としてスクリーンショットのように撮ってくれるお手軽ツールです。開発環境がないデザイナーさんやディレクターさんにコーディングしてこんな感じになったと確認したり、またポートフォリオサイトに載せる時などに便利です。
まとめ
他にもテンプレートエンジンやSass、HamlやSlimといった便利なものがたくさんあります！是非是非調べてみてください。良いコーディングライフを送りましょう〜！
明日はふなみんがイラレについて語ってくれます！デザイン系楽しみ！