CSS デザインセンスがない奴は Google Chrome を使え!!

CSS作成にChromeが活躍する理由を解説するページのアイキャッチ

偉そうな題名になってしまいましたが、実は私もデザインセンスがない人間です。こんなデザインセンスのない人に是非活用していただきたいのがウェブブラウザの「Google Chrome」です。

このページでは、なぜ CSS デザインセンスのない人に「Google Chrome」がオススメなのか?この辺りの理由、「Google Chrome」を使用するメリットを解説したいと思います。

CSS デザインを上達させる方法

まず CSS デザインを上達させる方法について考えていきたいと思います。割と当たり前のことを書きますが、CSS デザインを上達させる方法は二つだと思います。

自分で CSS を書く

一つ目は自分で CSS を書くことです。

自分で CSS を書き、その時のページの表示結果を確認する。気に入らないところを修正する。

これを繰り返していくことで、CSS を記述するスキルは必ず向上します。

他の人の CSS を参考にする

もう一つは他の人のサイトの CSS を参考にすることです。このページで焦点を当てているのは、こっちの「他の人の CSS を参考にする」ですね。

ネットサーフィンなんかをしていると、すごくデザインが洗練されているページにたどり着く事があります。その中で、自分のウェブサイトでも使いたいと思った要素のスタイル設定を参考にすれば、より自分好みのデザインにするためのスタイルシートの書き方を学ぶ事が可能ですし、自分の知らない CSS の書き方がされている場合は、その書き方を検索して調べる事で、自分にとって新たな CSS の書き方を身につけることも可能です。

一般的な CSS 設定の調べ方

他の方の CSS 設定を調べる方法は下記が一般的だと思います。

  • HTML のソースを開く
  • CSS のURLを調べる
  • URL のファイルをウェブブラウザで開く
    or ダウンロードしてローカルで開く
  • 開いた CSS ファイルから気になった CSS 設定を調べる

スポンサーリンク

一般的な CSS の調べ方の問題点

でもこの調べ方だと、特にウェブサイト開発初心者の方には下記のような点が問題になって、調べたい CSS 設定を調べるのが難しいです。

①見るべき CSS を見つけるのが大変

HTML からは複数の CSS ファイルが読み込まれ場合がありますので、実際にどの CSS ファイルを調べれば良いのかがわかりにくいです。

どのCSSを見れ良いか分からない様子

②CSS のどの部分を参考にすれば良いのかが分からない

また、特にウェブデザインが作り込まれたウェブサイトだと、CSS ファイルが非常に大きい場合が多いです。例えば 5000行にも及ぶ CSS ファイルなんかもあります。

そのような大きい CSS ファイルから、調べたい CSS の設定を見つけ出すのは困難です。

CSSのどこを見れば良いか分からない様子

③最終的にどのスタイルで表示されているかが分からない

さらに、これも特にウェブデザインが作り込まれたウェブサイトに多いのですが、一つの HTML 要素に対して複数の class が設定されていたりするので、最終的にどの class のスタイル設定が採用されてページ表示されているのかが分かりにくいです。

また親要素と小要素でも別のスタイル設定が行われていると、どのようにスタイルが継承されて最終的にどうスタイルが設定されてページ表示されているのかを追うのが大変です。

最終的に適用されるスタイルが分からない様子

Google Chrome を使った CSS 設定の調べ方

Google Chrome を使った場合、調べたい HTML 要素の CSS 設定を一瞬で確認する事が可能です。めちゃくちゃ簡単に調べる事ができます。

調べたい要素の CSS 設定の表示方法

Google Chrome を使った時の CSS 設定の調べ方は、

  • 調べたい要素を右クリック
  • 「検証」をクリック

これだけです。

Google Chrome をインストールするだけでこの「検証」機能は利用できます。

Google Chrome で右クリックすると「検証」という項目が現れます。

chromeで右クリックした時の様子

この「検証」をクリックすると、画面の右側に、右クリックした HTML 要素の CSS が表示されます。

chromeでCSS表示した結果

スタイルシート設定部分のみを拡大すると下のようになります。

スタイル設定を拡大した様子

Google Chrome で CSS 設定を調べるメリット

続いて Google Chrome で CSS 設定を調べるメリットについて解説します。

検証を押すだけで調べたい要素のスタイル設定を確認できる

これは先ほど説明した通りですね。右クリックして検証を押すだけでスタイル設定を確認する事が可能です。ですので、どの CSS ファイルを見れば良いかを迷う事がありません。つまり、Google Chrome を使う事で前述した問題点①を解消する事ができます。

さらに、右クリックした要素に関するスタイル設定のみが表示されます。ですので、CSS ファイルの中でどこを見れば良いか迷う事がありません。つまり、Google Chrome を使う事で前述した問題点②を解消する事ができます。

上書きされるプロパティ設定を確認する事ができる

class が複数設定されている要素や親要素のが存在する要素は、スタイル設定が優先度に基づいてどんどん上書きされて最終的にページ表示時に採用される設定値が決定されます。

この設定がページ表示時にどのように上書きされるかを HTML や CSS から確認するのは大変です。特にウェブデザイン・CSS・HTMLの初心者の方にとってはかなり難易度は高い作業になります。

しかし、Google Chrome でスタイル設定の表示を行えば、どのプロパティ設定が上書きされたかを確認する事ができます。上書きされた設定は下図のように取り消し線がついています。

プロパティ設定の上書きが確認できる様子

最終的に描画された時のスタイル設定を確認できる

さらに設定が上書きされた結果、最終的にどんな設定で要素が描画されたかを確認することも可能です。

「Computed」タグを表示することで、描画時に使用された設定の一覧を確認する事が可能です。つまり、Google Chrome を使う事で前述した問題点③を解消する事ができます。

最終的な描画時に使用されたスタイル設定の表示

プロパティの設定値を変更する事ができる

すごく便利なのは、プロパティの設定値が変更可能である事です。

表示されているプロパティの設定値をクリックすれば、その画面ですぐに設定値を変更する事ができます。

プロパティの変更の様子

さらに、設定値を変更すれば、すぐにブラウザに表示される画面も設定値に基づいて再描画されます。

プロパティ設定の変更による再描画

ですので、表示結果を確認しながらスタイルの微調整を行いたいときなどはめちゃめちゃ便利です。

まとめ

割と飛躍した題名になってしまいましたが、「CSS デザインセンスを向上させるためには他の人のウェブサイトを参考にするのが重要」「他の人のウェブサイトを参考にするのには Google Chrome が便利」という意味で、この題名にしました。

Google Chrome は無料ですし、「検証」を使うための設定も不要ですので気軽に使えると思います。他の人のウェブサイトを参考にするだけでなく、自分のウェブサイトのスタイル設定を確認する上でも便利ですので是非活用して見てください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です