超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

この記事ではウェブサイトの制作やカスタマイズでのCSS、HTML編集が何倍速にもなるツールの魅力と、基本的な使い方についてご紹介します。最近のブラウザには標準で備わっている開発ツールなので、もちろん無料ですし、一度使い方に慣れると「も~手放せない!」っていうくらい便利なので、まだ使っていない人はぜひ試してみてください。

目次

ブラウザの開発ツールを使うと何が変わるのか?

プログラミングがあまりできなくても最近は、比較的簡単にウェブサイトやブログを自作することができますよね。サイトを簡単に作成できるオンラインアプリケーションを使ったり(有名どころだとWixとか)、テンプレート(Wordpressならテーマ)を利用たりすれば、HTMLやCSSの知識がほぼゼロの状態からでもサイト作成に挑戦することができます。
ただ、テンプレートを使ってサイト制作をするときでも、ちょっとしたカスタマイズをしたくなる、というのはよくあること。
例えば、簡単な例として「見出しの色と文字の大きさを変えたい」とします。さて、HTMLやCSSのどこをどんなふうに変更したらよいか?
もし、開発ツールを使わないとなると、手順はこんな感じになります。

開発ツールがない場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。
  4. CSSを変更し、保存する。
  5. ブラウザでサイトを再読み込みして、確認する。
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…
  7. …続く

面倒くさいですよね。こんな簡単なカスタマイズなのに時間はどんどん過ぎていきます。15分くらいは最低でもかかっちゃうんじゃないでしょうか。
親切なHTMLテンプレートなら、どこに、どのパーツが記述されているかコメントから判断できるようになっていますが、それでも、HTMLやCSSの知識があまりない段階は、何かを変更するにも一回一回時間がかかるものですよね。
Wordpressなら、ダッシュボードから 外観>テーマの編集 のページに行くと、何やらわからないプログラミング言語が書かれたファイルがたくさん出てきて、勝手に障ったら何かが起きそうな危険な香りがしてきますし(苦笑)。
 
じゃあ、開発ツールを使うとこのプロセスはどうなるのか。ものの5分で終わると思います。

ブラウザの開発ツールを使った場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。→ブラウザ上で2クリック(3秒)で見つかる
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。→ブラウザ上で確認(1秒)
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。→ブラウザ上で確認(5秒以内)
  4. CSSを変更し、保存する。→ブラウザ上で気に入るまで変更(3分)し、気に入ったらCSSをコピーして該当するCSSファイルに貼り付け・保存。(1分)
  5. ブラウザでサイトを再読み込みして、確認する。→(5秒)
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…→ なし(0秒)

お気づきと思いますが、開発ツールを使うとほぼブラウザ上で作業が完結します。HTMLファイルやCSSファイルを探して編集して、ブラウザで確認して・・・という時間のロスがなくなるので、とにかく早い!
とはいえ、文字で読んでいるだけではこの威力が分からないと思いますので、ぜひ以下の手順で基本的な使い方を覚えて自分で使ってみてください^^
 

開発ツールの使い方

開発ツールとは

紹介が遅れましたが、開発ツールとは、「プログラマーがWebアプリケーションを開発するときに、プログラミング上のミスを発見したり修正するために使うデバッグツール」のことです。HTMLやCSSなどの変更・修正に使える以外にも色々な機能があります。
ブラウザによって呼び方が多少異なり、Chromeではデベロッパーツール、Firefoxでは開発ツール、IEでは開発者ツール、Operaでは開発者用ツール、Safariでは開発メニューなどと呼ばれているようです。まぁ、どれも同じような感じですね^^

Safariの場合、メニューバーを確認して「開発」というメニューがない場合は、設定の「詳細」で「メニューバーに”開発”メニューを表示」にチェックを入れるようにしておいてください。

 

開発ツールの起動の仕方

ブラウザの設定ボタンからも探せますが、ショートカットキーで表示させる方が便利です。何回か使うと覚えられます。

開発ツールを表示させるショートカットキー
ChromeあるいはFirefox、Opera、Safariでは Ctrl + Shift + i (Windowsの場合)
IEの場合は F12

 
以降はブラウザChromeのデベロッパーツールを例に説明していきます。
ショートカットキーCtrl + Shift + i で起動します。するとこんな感じに表示されます。赤枠の部分がデベロッパーツールです。
デベロッパーツール1
現在ブラウザに表示されているページのHTML(左側)とCSS(右側)が同時に確認できるようになっています。機能は色々あるのですが、まずはこのHTMLとCSSのウィンドウだけで十分。あまり気負わずに使っていきましょう。
 

開発ツール上でCSSを編集する

では見出しの色と大きさを変更してみます。
 
まずは開発ツールの左上のほうにある検索マークをクリック(青色に変化します)し、見出しの部分にカーソルを移動してクリックします。(他のブラウザの場合、マークや位置が多少異なりますが、基本は左上にあるので探してみてください。)
デベロッパーツール2
 
すると、左側では、見出しのリンク(aタグ)のHTMLの位置がハイライトされ、そのaタグに適用されているCSSが右側にずらっと表示されます。
デベロッパーツール3
 
見出しのhtmlタグや適用されているCSSクラス(CSSセレクタ)を確認してみます。
左側のHTMLの部分を見ると、ちょっとキャプチャの文字が小さくて見づらいですが

  • 見出しはh2タグでpost-titleというCSSクラスが適用されている
  • 見出しのh2タグの中にaタグが入っている

ということがわかりますね。
デベロッパーツールHTML
 
右側のCSSを見てみましょう。スクロールしてみると、適用されているCSSがたくさんあることが分かりますが、上の方にに表示されているCSSが下のプロパティを上書きしているので、基本的には一番上に表示されているCSSセレクタの中身を編集していけばOKです。
#main-contents h2 a:link に適用されているCSSが、design.cssという名前のCSSファイルの328行目に定義されていることが分かります。
デベロッパーツールcss
 
ではデベロッパーツール内で見出しの文字色を変更してみましょう。下図のように、文字色(colorプロパティ)の値のところに表示されている■のところをクリックしてカラーピッカーを表示させます。
デベロッパーツール6
 
カラーピッカー上で色を選んでいきます。すると、その選択した色が瞬時に見出しに反映されます!これ、すごくいいですよね!プレビューしながら気に入る色が見つかるまでたっぷり悩めます(笑)
デベロッパーツール7
 
色が決まったら、今度はフォントサイズの変更ですね。
#main-contents h2 a:link セレクタに、文字サイズのCSSプロパティfont-sizeを加えてみましょう。下図で示すあたりをクリックすると、新たなCSSプロパティと値の入力欄が表示されます(下図の黄色いマーカー部分)。
デベロッパーツール8
 
入力欄には今回 font-size: 1.5em; と入力しました。
デベロッパーツール10
 
見出しの大きさの変更がちょうどいいかどうか、すぐに確認できます。大きすぎたり小さすぎたりしたときは、先ほど設定した値を変更して、またそれもすぐ確認できるので調節がしやすいですね。
デベロッパーツール9
 

開発ツール上のCSSの変更をCSSファイルに反映する

開発ツール上でのCSS変更がすべて終わったら、その変更をCSSファイルに反映させる必要があります。これを忘れてブラウザを再読み込みしたり閉じたりすると、せっかく色々検討しながら決めたCSSが消えてしまいますので注意してくださいね。
 
編集するCSSファイルは、開発ツールのCSSが表示されている部分にヒントがあります。下図のピンク枠にdesign.css:328と書かれていて、design.cssファイルの328行目を編集すればいいことがわかります。
テキストエディタなどでdesign.cssを開き、328行目~のところに下図の青枠の内容をコピペし、ファイルを保存します。
デベロッパーツール11
 
 
CSSの保存が完了したら、ブラウザにまた戻ってページを再読み込みしてみましょう!変更内容が反映されていれば完了です。
 

開発ツールを使いこなすには

今回の解説で扱ったのはほんの一部の機能ですが、この機能だけでもかなり時間の節約になることは想像できたでしょうか。
初めて開発ツールを使うときは、どこで何をしたらいいのかよく分からなくて、逆に時間が取られるかもしれません。「今までの方法のほうが自分には楽だ」と思ったりしがちですが、それは最初の2,3回だけで、少し慣れてくれば本当に大きな時間の節約になると思います。
開発ツールを使いこなすための一番の近道は、とにかく自分で使う!ということです。
ブラウザ上での編集なので、別にHTMLやCSSを変更して表示がぐちゃぐちゃになってしまっても、再読み込みすれば元の表示に戻せるわけですし、もとのCSSやHTMLファイルには何の影響もないので、仮にサイトが公開されていても他のユーザーには全く編集状況を見られることもありません。
他にもHTMLにタグを追加・削除したり、新たなCSSクラスを定義したり、Javascriptのデバッグをしたり・・・など、色んなことができますので自分のニーズに応じて色々試してみてくださいね^^

この記事が役立ったらシェアをお願いします!
  • URLをコピーしました!

コメント

コメントする

目次