使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法

• 要素を右クリックして［検証］を選択するとデベロッパーツールが開きます。
• ［スタイル］タブでを要素にあたっているCSSが確認できます。
• ［計算済み］タブでは、最終的にその要素に適用されているCSSを確認することができます。
• 全称セレクタ「*」のpaddingや、bodyタグのfont-size、colorは上書きされて無効になったスタイルです。
• プロパティ名が間違っている「margin-tp」の横にはwarningアイコンが表示されています。
• 「top」と「left」は「posotion: static;」とは一緒に使用できないのでinformationアイコンが表示されています。
• warningアイコンとinformationアイコンの上にマウスを置くと問題のヒントが表示されます。
• プロパティ横のチェックボックスをつけ外しすることで見た目が変化します。
• paddingの横の三角をクリックするとショートハンドプロパティが展開されます。

• 「:hov」ボタンをクリックし、「:hover」にチェックを入れるとホバー時のスタイルが確認できます。
• 「.is-disabled」クラスを付与するとボタンのスタイルが変わります。

• shiftキーを押しながらドラッグすると10pxずつ値を増減できます。
• angle clockで角度を簡単に変更できます。

• シャドウエディターで影の方向やぼかしの強さなどを調整できます。

• 画面右側の歯車のマークをクリックし、「試験運用版」（英語の場合は「Experiments」）から「Enable new Font Editor tool within the Styles Pane.」にチェックを入れます。
• 右側の「AA」ボタンでフォントエディターを表示し文字を変更できます。

Flexbox

Grid

• FrexboxやGridのレイアウトもクリックするだけで変更できます。