【UIデザイナーも役に立つ！】Chrome 開発ツールを使ったローテク HTML・CSSいじり

フロントエンドエンジニアの茶木です。

Google Chrome の開発ツールを使ったフロントエンドのローテクを紹介します。主に「見た目」のデバッグに使うローテクなのですが、あるページのデザインを参考にしたり、仮に変更を加えてみるとどうなるか「いじって」確認してみたりもできるので、UIデザイナーの皆さんにも有用かと思います。

こんなときに「いじり」ます

• 参考にしたいページ内の要素をいじる
• レアケースでどういう表示になるかいじる

開発ツールの表示

mac の Google Chrome での ブラウジング想定で説明します。cmd + option + i を押します。

要素の調査

要素タブのDOMツリーから見たい要素を選択するか、画像左上のアイコン（ショートカット cmd + shift + c ）からページ内の要素をクリックします。

例として、このページの h2 要素を調査してます。

スタイルの調査

スタイルタブをクリックすると、要素に適用されてるスタイルが確認できます。上書きされてる要素は font-size: 1.5em; のように打ち消し線で表示されます。

気になるページの気になるデザインが、どのように作られているか深く知ることができますね。

さらに、スタイルはダブルクリックしてリアルタイムに書き換えが可能です。好きな要素を加えたり、削除したり、値を変更してみることができます。

ちょっと便利な計算済みタブ

さらに、計算済みタブをクリックすると、最終的なスタイルの計算結果が確認できます。マージン・パディングや複合したフォントサイズが表示されるので便利です。

DOM要素を書き換える

フロントエンドエンジニアがよく使うテクニックです。流し込まれるテキストの長短で、表示が重なったり、折返しがおかしかったりするようなバグを手軽にチェックするのに便利です。

要素を探す

これも少し便利なテクニックです。ページ内の要素を探すには要素タブで cmd + f を押し、検索ワードを入力します。コンテンツ内の文言を探すのももちろん、セレクタで検索することができます。

まとめ

疑似要素の :hover, :checked や :after :before の見た目をいじったり、ウインドウ幅での表示の切り替え周りも開発ツールは得意な範囲です。

他にも、フロントエンドエンジニアは、こんなようなときに使ってみたりしています。

• 簡単なあたりをつけるとき
• データベースから流し込むような、テキストをすぐ準備できないとき
• ちょっと直してキャプチャを用意するとき

他にも「こういうケースでは良い方法はないの？」という疑問や「こんな便利な使い方をしているよ！」というローテクありましたら教えて下さいね！