偉そうな題名になってしまいましたが、実は私もデザインセンスがない人間です。こんなデザインセンスのない人に是非活用していただきたいのがウェブブラウザの「Google Chrome」です。
このページでは、なぜ CSS デザインセンスのない人に「Google Chrome」がオススメなのか？この辺りの理由、「Google Chrome」を使用するメリットを解説したいと思います。
Contents
CSS デザインを上達させる方法
まず CSS デザインを上達させる方法について考えていきたいと思います。割と当たり前のことを書きますが、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 ファイルが非常に大きい場合が多いです。例えば 5000行にも及ぶ CSS ファイルなんかもあります。
そのような大きい CSS ファイルから、調べたい CSS の設定を見つけ出すのは困難です。
③最終的にどのスタイルで表示されているかが分からない
さらに、これも特にウェブデザインが作り込まれたウェブサイトに多いのですが、一つの HTML 要素に対して複数の class が設定されていたりするので、最終的にどの class のスタイル設定が採用されてページ表示されているのかが分かりにくいです。
また親要素と小要素でも別のスタイル設定が行われていると、どのようにスタイルが継承されて最終的にどうスタイルが設定されてページ表示されているのかを追うのが大変です。
スポンサーリンク
Google Chrome を使った CSS 設定の調べ方
Google Chrome を使った場合、調べたい HTML 要素の CSS 設定を一瞬で確認する事が可能です。めちゃくちゃ簡単に調べる事ができます。
調べたい要素の CSS 設定の表示方法
Google Chrome を使った時の CSS 設定の調べ方は、
- 調べたい要素を右クリック
- 「検証」をクリック
これだけです。
Google Chrome をインストールするだけでこの「検証」機能は利用できます。
Google Chrome で右クリックすると「検証」という項目が現れます。
この「検証」をクリックすると、画面の右側に、右クリックした HTML 要素の 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 は無料ですし、「検証」を使うための設定も不要ですので気軽に使えると思います。他の人のウェブサイトを参考にするだけでなく、自分のウェブサイトのスタイル設定を確認する上でも便利ですので是非活用して見てください！
