【超初心者向け】CSSコーディングの効率が爆上がりする方法【デベロッパーツールを使おう】

今回はCSSコーディングの効率が爆上がりする方法をご紹介します。

この記事は、

[cat_icon01 title=”この記事のおすすめ読者” icon=”jic jin-ifont-check” color=”#f08080″]
  • CSSをある程度理解している
  • デベロッパーツールを知らない
  • デベロッパーツールの使い方がよくわからない
[/cat_icon01]

こんな人におすすめです。

 

また今回はCSSの書き方やHTMLのマークアップなどについては触れません。

結論:CSSコーディングにはデベロッパーツールを使おう

です。

デベロッパーツールはWEB開発にとってとにかく便利なツールで、変更がすぐに目で見えるので、使い慣れれば開発が圧倒的に楽しくなりますよ。

WEB開発に必須なデベロッパーツール

デベロッパーツールについて知らない人もいると思いますので、簡単に説明します。

デベロッパーツールとは、Google Chromeが無料で提供するWEB開発ツールです。

デベロッパーツールを使うと以下のようなことが簡単にできます。

  1. CSSの確認・修正
  2. コンソールログの確認
  3. JavaScriptのデバック
  4. HTMLタグの確認・修正
  5. レスポンシブ対応の確認

他にもローカルストレージの確認・編集や、表示速度の確認など、WEB開発で必要なことはほとんどできてしまう最強のツールです。

と言ってもまだわからない人も多いかと思います。他の内容については今知らなくても大丈夫なので、順を追って勉強してみてください。

 

ちなみにですが今回は、

  1. CSSの確認・修正
  2. HTMLタグの確認・修正

の2つを活用していきます。

デベロッパーツールを立ち上げる

まずはデベロッパーツールを起動します。

Google Chromeを利用していることが必須条件なので、もしGoogle Chromeを導入していない場合は下記ページからダウンロードしてください。

>>Google Chromeをダウンロードする

Google Chromeがダウンロードできたらレスポンシブ対応したいURLを開いてください。

開いたらF12キーを押してください。

すると画面の右か左にHTMLタグが現れるかと思います。そのタグが現在表示されているページのものです。

このままでは使いずらいので、ツールを画面から切り離します。

画像のアイコンをクリックしてください。

すると以下のようなポップアップが出るので、一番左のアイコンをクリックしてください。

ちなみに一番左から、

  • 画面からデベロッパーツールを切り離す
  • 画面の左にデベロッパーツールを表示
  • 画面の下にデベロッパーツールを表示
  • 画面の右にデベロッパーツールを表示

です。ここは好みのスタイルを選択してもらってOKです。

ElementsタブでCSSを調整する

準備が整ったところで、まずはデベロッパーツールに触れてみましょう。

今回はElementsタブを利用します。

CSSの変更や確認などはElementsタブで簡単にできてしまうんです。

ここで行う変更はあくまでも現在開いているページに対して行います。

変更を確認したら実際のソースコードを同じように修正しましょう。

逆に考えれば、デベロッパーツールでどんなにコードを弄っても、ユーザーにはわからないので安心してください。

保存されてしまうこともありません。

デベロッパーツールで対象のタグにカーソルを合わせると、実際のページが画像のようにマーキングされます。

ちなみに

  • 青色  :コンテンツ本体
  • 緑色  :パディング部分
  • オレンジ:マージン部分

です。

ここでデベロッパーツールの右側に表示されているのが選択されているHTMLタグのCSSになります。

クラス一括で修正したいなどのこだわりがなければ、一番上の「element.style」にプロパティを追加すると、リアルタイムで画面に反映されます。

試しにブログ記事タイトルの文字色と背景色を変えてみます。

上記のように変更すると、

このようにリアルタイムでプロパティが反映されました。(ちょっと目がチカチカしますね・・・w)

本機能最大の長所が、「リアルタイムでCSSの設定が反映される」という点にあります。

その場ですぐ確認できるだけで、作業効率は爆上がりするでしょう。

タグの逆引きもできる

さらに便利な機能をご紹介します。

デベロッパーツールのElementsタブを使えば、簡単にCSSの変更・確認が行えることはわかりました。

でもHTMLコード上から変更したい要素を探すのってかなり面倒じゃないですか?表示しているページのHTMLタグが複雑になればなるほど面倒で、発狂しそうになりますよね。

そんな場合、画面からデベロッパーツールへ逆引きができるんです。

記事の上部に設置されているツイッターアイコンにもう少し丸角を足したいとします。

まずはツイッターアイコンにカーソルを置き右クリックし、「検証」を選択してください。

画像はMacのものですが、Windowsでも「検証」の文言は同じです。

すると一気にデベロッパーツールで対象のタグが選択された状態になります。

あとは先ほどと同じように、「element.style」にプロパティを追加すれば変更を確認できます。

実際の画面で確認ができたら、実際のCSSファイルを更新すれば完了です。

こんな感じでツイッターアイコンの角丸がより丸くなったことを確認できました。

あとは、実際のソースコードにも同じように書き込めば完了です。

 

さらにデベロッパーツールを使えば、レスポンシブ対応の確認も簡単にできます。

デベロッパーツールを使ってレスポンシブ対応を確認する方法は以下を参考にしてください▼

【超初心者向け】レスポンシブ対応を簡単に習得する方法【デベロッパーツールを使おう】

というわけで今回は以上です。

コメントを残す

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