デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
Post on:2017年4月20日
sponsors
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。
テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。
Using DevTools to Tweak Designs in the Browser
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 要素に与えられたclassを切り替える
- コンテンツの量でデザインが崩れないかテストする
- 指定した要素を非表示にする
- デザイン要素のスクリーンショット
- デザインのカラーを変更する
- CSSの変数を使用する（カスタムCSSプロパティ）
- 「filter: invert();」で要素のカラーを反転する
- CSS ビジュアル エディタ
要素に与えられたclassを切り替える
デザインをさまざまなオプションから選択する場合、コード内のclassを手動で変更せずに、要素のデザインを切り替えることができます。
この方法を使用すると、指定した要素にさまざまなclassを与えることができ、スタイルを変更できます。例えば、バナーデザインのさまざまなオプションを試してみたい場合は、次のように記述します。
|
1 2 3 4 5 6 7 |
.banner-1 { /* デザイン その1 */ } .banner-2 { /* デザイン その2 */ } |
デベロッパーツールを使用すると、これらのclassをすべて追加し、素早く比較できるようにチェックボックスを使って表示/非表示にすることができます。
コンテンツの量でデザインが崩れないかテストする
コンテンツのデザインは柔軟であるべきで、その中にさまざまな要素がいろいろな量で配置できるかテストする必要があります。例えば、長いテキストが配置されたら、デザインが壊れてしまうかもしれません。
これをテストするには「document.designMode」を使用して、ブラウザ上でコンテンツを編集することができます。
この方法は、手動でコードを変更してコンテンツを編集することなく、デザインをテストするのに役立ちます。
指定した要素を非表示にする
デザインを確認する際に、時には要素を隠して、デザインなしでどのように見えるかを確認する必要があります。
デベロッパーツールは要素を調査し、キーボードから「h」を入力して、CSSの表示プロパティを切り替えることで非表示にすることができます。
この方法は例えば、スクリーンショットを撮るためにいくつかの要素を隠して、あなたのチーム/デザイナー/マネージャーと議論したい場合に非常に便利です。また、この方法で要素を隠し、Photoshopで簡単なモックアップを作成するためのスクリーンショットを撮るために使用します。
デザイン要素のスクリーンショット
Firefoxのデベロッパーツールには、DOM内の特定の要素のスクリーンショットを撮るための便利な機能があります。これを使って、デザインのバリエーションを並べて、どちらが良いかを比較することができます。
以下の手順で進めます。
- Firefoxのデベロッパーツールを起動。
- 要素を右クリックし、「Screenshot Node」を選択。
- スクリーンショットはデフォルトのダウンロードフォルダに保存されます。
Chromeで同じことをするには、プラグイン「Element Screenshot」を使用します。
デザインのカラーを変更する
プロジェクトの初期段階では、さまざまなカラーパレットを検討しているかもしれません。CSSの「hue-rotate」はデザインのカラーを変更する便利なフィルタで、画像や要素の各ピクセルの色相を変更します。値は「deg」または「rad」で指定します。
「hue-rotate」を適用すると、すべての要素に影響を与えることに注意してください。例えば、画像のカラーにも影響を与えます。 通常のカラーに戻すには、「hue-rotate」の負の値を指定します。
|
1 2 3 |
.bio__avatar { filter: hue-rotate(-100deg); } |
CSSの変数を使用する（カスタムCSSプロパティ）
すべてのブラウザでサポートされていないくても（現在はEdgeは開発中）、CSSの変数を使用する利点があります。例えば、スペースやカラーを定義するために変数を使用すると、1つの値を変更するだけですべてに適用されます。
わたし達のサイトでは、下記を定義しています。
|
1 2 3 4 5 6 |
:root { --spacing-unit: 1em; --spacing-unit-half: calc(var(--spacing-unit) / 2); /* = 0.5em */ --brand-color-primary: #7ebdc2; --brand-color-secondary: #468e94; } |
これらの変数は、リンク、ナビアイテム、ボーダー、背景色など、Webサイト全体の要素に適用されています。デベロッパーツールから1つの変数を変更すると、関連するすべての要素に適用されます。
「filter: invert();」で要素のカラーを反転する
この方法は、ブラックの背景にホワイトのテキストがある場合、またはその逆の場合に便利です。例えばヘッダがブラックの背景で、ページタイトルがホワイトで表示され、フィルターを追加することで、要素のすべてのカラーが反転します。
CSS ビジュアル エディタ
この機能は、どんどん良くなっています。Safariでは値を編集するための素晴らしいUIツールがあり、Chromeのデベロッパーツールにも同様の機能が加えられています。
Chromeではbox-shadow, background-color, text-shadow, colorなどの機能も備えられています。
sponsors
