要素の検証（デベロッパーツール）の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編

要素の検証（デベロッパーツール）は初心者がカスタマイズするのに最高のツールで、変更をリアルタイムで見ながら装飾できて便利！CSSを書いてたら文字をサジェストするからツヅリを間違えないのも良いところです。

管理画面から直接スタイルシートをいじってブログで何度も確認してるとブラウザに古いスタイル（キャッシュ）が残って反映してないように見えたり、何度もシークレットモードを開いたりして、効率が悪かったり。

Chromeの拡張機能「Incognito This!」を使うのも便利だけど、もっと便利なのが要素の検証でカスタマイズすること。「HTML」「CSS」『要素の検証』の基本を知って試行錯誤を繰り返してたら、最後に自分で装飾できるようになります！

超初心者さんは初心者向け、HTMLの入門編！HTMLタグとCSSの関係＆要素だけチェックしたら、このページで「要素の検証」の使い方・CSSの書き方・基本的な装飾を覚えて脱初心者へと、ステップアップしてくださいね。

要素の検証でカスタマイズ！デベロッパーツールで出来る事

要素の検証は元々ブラウザに付いてる機能・デベロッパーツール：開発者向けツールです。ブログのカスタマイズ、たとえば色・余白の変更をすぐ確認できるから初心者向けのカスタマイズ援助ツールとして使いかたを説明しますね。

1. 画像のように、カスタマイズしたい箇所を選択
2. ブログの骨組みである『HTMLタグ』の内容確認
3. そのタグの装飾『CSS』などが表示確認
4. HTMLタグの追加・CSSの変更も可能

でっ…これ、どうやって使いこなすの？って話で、便利機能をドカッっと紹介！ポイントを覚えてHTMLやCSSを自由に書けるよう、要素の検証の開きかたからはじめます?

検証画面の起動方法（Chrome、FireFox、IE・Edge）

ブラウザの余白を右クリックして、『要素の検証』をクリックします。ブラウザ毎の表示の仕方は下記です。

Chrome・FireFoxの要素の検証。3つの起動方法

• 1つ目は右クリックして検証画面を開く

• 2つ目。F12キーをクリックして起動
• 3つ目はショートカットキーで起動

Internet Explorer（IE）・Edgeの2つの起動方法

• 1つ目。ブラウザを右クリック

• 2つ目。F12キーで起動

Internet Explorer（IE）・Edgeで検証画面が起動しないとき

ショートカットキーを3つ、長押ししてもデベロッパーツール（要素の検証）画面が開かない・起動しないのは、IE・Edgeはそのボタン操作ができない仕様だから。

• Windowsの場合Ctrl＋Shift＋Cキーの同時押し機能なし
• Macのショートカットcontrol?＋option?＋Cキー機能なし

はじめのうちデベロッパーツールは『使うボタン』と『タブ』は決まってるので、そこだけ覚えればOK！ガンガン触って変な表示になったら、ブラウザ更新で元に戻るので安心♪

検証画面の表示位置・切り替え方法！

参考にしているサイトと表示方法が違うと初心者さん的に不安。また触っていてデベロッパーツールが消えちゃった＞＜　と、なると困るので、検証画面の表示位置の変更方法をご紹介。

Chrome・FireFox・IE・Edgeは使い勝手によって表示位置を変更したい時便利な機能なので、サクッとブラウザ毎にご紹介！

Chromeデベロッパーツール画面の表示位置、変更方法

Chromeの検証画面を出したとき、画面右・画面下・画面左、別画面と表示位置を変更する方法がホンノリ便利＾＾

一番右の設定ボタン：縦3点リーダー⋮『カスタマイズアンドコントロールCustomize and control｜DevTools』をクリック。

• ドックサイドDock Sideで画面の位置を選択
  • 左から、別の画面
  • 左サイド
  • 画面下
  • 画面右サイド

見にくいときは、右上『縦3点リーダー⋮設定ボタン』をポチっとしてください♪

FireFoxデベロッパーツール画面の表示位置、変更方法

Chromeと同じ場所右上に以下のように表示されてます。

IE・Edgeデベロッパーツール画面の表示位置、変更方法

IE・Edgeも同様右上に、別画面・画面下と表示位置の変更が可能です。

要素の検証でカスタマイズしたい場所をクリックする

Chrome・FireFox・IE・Edgeで要素の検証をするには矢印ボタンでカスタマイズしたい箇所（要素）を選択すれば、HTMLが表示されます。

HTMLタグ内の装飾をCSSでしていくワケですが、まずカスタマイズしたい箇所を選択できるボタンの場所を紹介します。

FireFox・IE・Edgeの要素の選択ボタンの場所

要素の検証画面を開いたら、要素の選択ボタンを青くすれば選択できる状態になります。

IE・Edgeの場合、開くと要素の選択ボタンが見当たりませんよね。

IEの場合、DOM Explorerタブをクリックすれば矢印ボタンが現れるので青くなった状態でカスタマイズしたい場所：要素をクリックしてください。

Edgeの場合。要素タブをクリックすれば要素の選択（矢印）ボタンが現れます。同じく青い状態にして選択してください。

Chrome要素の検証でカスタマイズ時よく使うタブ説明

以降Chromeで詳しい説明をしていきますね。

デベロッパーツールを開いたら、上部に左から矢印マーク、スマホマーク、Elements、Console、Sourcesなどのタブが並んでます。その使い方と便利機能をChromeのブラウザで確認しながら見てみましょう！

初心者的のカスタマイズでよく使うボタンは、上記4つのボタンなので、知ってて便利ポイントをチェックしてください。

要素の選択をする『矢印マーク』の使い方

カスタマイズしたい箇所のHTMLを選択すれば、選択した箇所のCSSも表示され確認できます。素敵なデザインのお手本として『HTMLタグ』『CSS』などがのぞけるボタンです＾＾

知りたい・カスタマイズしたい箇所：要素をクリックして選択します。

• デベロッパーツールを開いてすぐの状態でしたら、カスタマイズしたい箇所をクリックすればOK！
• 一度検証したら再度、矢印マークをクリック、青くなったら画面をクリック。
• またはショートカットキーを同時に押す：Chrome・FireFoxの場合
  • Windows：Ctrl＋Shift＋Cキー
  • Mac：control?＋option?＋Cキー

該当箇所のスタイル（装飾）はどうなってるか、どんなHTMLタグを使ってカスタマイズしてるかなど見たい知りたい場所を選択するとき、このボタンを使います。

画像を選択したら代替テキストalt、リンクならaタグ内のURLが見える感じ。運営者さんがaltに何を書いてるかも、ガッツリ見れちゃうボタンなんですねぇ?

サイトのHTMLタグを編集、span・divなどに変更・追加する機能

画像とおりの工程で追加したい箇所を選択・検証画面で右クリック。

Edit as HTMLを選択してタグを追加し放題！

HTMLとして装飾でspan・divなどタグの追加※Edit as HTMLでなくダブルクリックしたら、HTMLでなく文字列として追加できる

Chrome『Edit as HTML』機能でタグを追加・変更した例

<p>サイト上の背景色やリンクなど、色がある部分をクリックしたら、上記カラーピッカーが出てきますよね。以下GIF画像の通りです。</p>

↑追加・編集前のHTML　↓追加したHTML例（赤字が追加）

<p>サイト上の<span class="bold">背景色やリンク</span>など、色がある部分をクリックしたら、上記カラーピッカーが出てきますよね。以下GIF画像の通りです。</p>
<div class="pink-box">ピンクのBOX追加</div>

装飾済みなら反映し、新規追加したpink-boxはstyleを付け、追記テストとして、次に1つの方法をご紹介。

追加したタグをNew Style Ruleからスタイル追加

追加したタグのスタイルを（画像の矢印先）inspector-stylesheetで追記することも可能です。

画像のCSS▼

.pink-box {
	background-color: #fff2fd;
	padding: 1em;
	border-radius: 3px;
	border: 1px solid #ffd4f7;
	margin-bottom: 1.8em;
	color: #555;
	font-weight: bold;
}

またデベロッパーツールでCSSをコピー、その後style.cssに追記すればOK！

追記後のサイト上はstyleは一時的にデベロッパーツール上で反映！

タグにclass名など属性を追加

カスタマイズするには、htmlタグにクラス属性をつけると装飾しやすいので、要素の検証で追記する方法です。

段落<p>にクラス属性とクラス名をつけてあげます。サンプルなので”hoge”として追記する方法です。

書き方は下記のとおりです。開始タグと終了タグがキチンとあってるか確認してくださいねっ。

<p class="hoge">
テキスト
</p>

Elements（要素）でHTMLをコピー

要素の検証をするページの構造、例えばhead内で何が読み込まれてるとか、hタグをどう使ってる、ほかにどんなタグを使っているとか解るのがElementsで、タグが表示されてて、要素がツリー状になってるんですねっ。

右三角▶マークをクリックするとタグ内の要素全て表示されるし、

1. 右クリックしてコピーにマウスを置く
2. 右下へスライドしてCopy elementをクリック

テキストエディタに貼り付けて確認する事もできます。

上記hタグをコピーしたソースが下記。

<h4><span id="ElementsHTML">ElementsでわかるHTMLの構造</span></h4>

画像を矢印マークで選択すれば、画像につける代替テキストaltにどんな内容を書いてるのか、幅や高さ、どこにアップロードして画像名を何にしてるかまで裏側が見えたりします。

例：上の画像を検証画面からHTMLをコピーし、内容を見てみる

画像の領域、pタグで囲まれたimgタグを指定した様子をスクショしたものが以下画像。・下には検証画面でimgタグとタグ内に何が書いてあるか、全て検証画面上でチェックできます。

imgタグ内にある、黄色下線でチェックしていたのは以下。

• 画像のalt=”知りたい要素「htmlタグ：エレメント」をコピー”
• 幅や高さなどwidth=”727″ height=”333″
• 画像の格納場所や、名前まで/wp-content /uploads /2016/02 / copy-element.png

またimgタグを右クリック。

Copy・Copy elementと選択したら、imgをコピーできます。

HTMLタグを展開し・選択した該当CSSがみれる

該当ページのHTMLがどんな構造でできてるか、タグ横の▶マークをクリックして展開して要素をみて確認することも可能で、このように入れ子状態のhtmlタグを確認できます。

親要素の指定方法！ブログ初心者にCSSのセレクタ簡単な付け方を説明

ブログを見ていると、親要素という単語を見かけます。カスタマイズ初心者は、親要素を見つけるのが得意ではないので、超簡単にそれを見るける方法を書いていきますね。ここでは、文章を書いてる部分コンテン...

bibabosi-rizumu.com

2016.10.22

カスタマイズしたい箇所のCSSを確認しスタイルシートにコピペ

1. 気になるブログデザイン「参考」をクリック
2. htmlタグ<span class=”sankou-badge“>を確認
3. 「styles」を見ると.sankou-badgeの装飾が書かれてる
4. 「style.css:282」はCSSファイル282行目に参考の装飾があるよぉって意味
5. それをクリックしたら該当ファイルが見れて、コピーやペーストすることも可能

参考初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？

追加したタグをCSSで指定して装飾

上述のpタグにクラス属性をつけた”hoge”の背景をピンクに装飾するようすを見れば分かりやすいです。以下の装飾を追加してみますね。

p.hoge{
	background-color: pink;
}

HTMLに<p class=”hoge”>と書き込み、要素の検証で書いたCSSコピーして、ブログのスタイルシートに貼り付ければ実際に反映します。

追加したHTMLタグは、アドクイックタグに追加すれば使いやすいですよ。Simplicityの場合は、以下のようにHTMLタグを追加するのも可能です。

LINKWordPress投稿画面クイックタグのカスタマイズ！記事にタグ追加が超簡単：Simplicity

HTMLタグのスタイル：装飾をON・OFFにする

カスタマイズしたい箇所を選択したら、CSSを確認できましたよね。

Styleが表示されたとき、「レ点」チェックを入れたり外したりすれば、どこがどんな風に装飾が変わるかがわかります。

1. 段落<p>の下の外側の余白margin-botomを消す
2. リスト<li>の上下余白を消す
3. 文章が詰まった感じになる

このようにスタイルの左側のレ点をon・offにすれば、変化がわかりやすいです。

CSSのスタイルのレ点を外した状態のスタイルシートを確認

チェックを外すとブログのスタイルも変わってます。その状態でstyle.css:1520をクリックしてみる…。

CSSが書いてある所（Sauces：ソースタブ）に移動するので、確認するとコメントになってる状態です。/* padding: 3px; */

/*
 * keyボタン黒　*
 ***************/
.key {
	color: white;
	background-color: #1e1d1d;
	/* padding: 3px; */
	/* border-radius: 2px; */
	/* box-shadow: 0 1px 1px 0 #777373; */
	border:1px solid black;
	margin: 0 0.5em;
}

メモ変わりとしてそのままCSSに書いても良いし、バッサリってスッキリさせるのもいいですよね。

/*
 * keyボタン黒　*
 ***************/
.key {
	color: white;
	background-color: #1e1d1d;
	border:1px solid black;
	margin: 0 0.5em;
}

カラーピッカーで色を簡単に変えられる

装飾された色は要素の検証内のカラーピッカーを使って色を自由に変更したり可視化して淡い色を出すことも可能です。使いたい色が決まってる時は、スタイルシートをクリックしたら該当の場所へ飛ぶので直接書き込むこともできますよっ。

色の変更をもっと見てみたいなら、下記がおススメです。

LINK超時短！！ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

検証画面のカラーピッカーで画像の色を取得

サイト上の背景色やリンクなど、色がある部分をクリックしたら、上記カラーピッカーが出てきますよね。以下GIF画像の通りです。

1. 矢印ボタンが青い状態で
2. 背景色やリンクの色などをクリック
3. 画像の欲しい色をポチっとクリック
4. 色が分かる#ff8395
5. #ff8395をコピー
6. 画像の欲しい色を取得成功！

選択した要素のmarginやpaddingのボックスモデル

矢印ボタンで選択した要素（例えば段落）の幅・高さ、選択範囲の囲い枠：ボーダーの外側余白のmarginの幅や内側の余白paddingがみえるのがボックスモデルです。

見つからないときは、例えば画面下部に検証があればブラウザの左右、画面サイズを縮めて『680px以下』にしてください。そうすると下記画像のようにエレメントとCSS、四角いボックスモデルが表示されます。

hタグやpタグなどのmargin外側余白・padding：内側余白の幅など視覚的に何pxかを確認できて便利です。

CSSが圧縮されてソースが見にくい時

圧縮されてると、改行が全くなくって1本のソースが横並びになって解りにくいとき、見やすく表示してくれるのが{}マーク『format』です。※「ページのHTMLのソース」も使える

{}マークをクリックで一発解消！あら見やすい(´∀｀*)

スマホマーク：トグルデバイスモードの使い方

デバイスの切り替えスマホビューやタブレットビューをPCで確認したいときつかうのが＜セレクトモデル＞です。

スマホの横幅、スクリーンサイズは、利用者が多い320pxで確認して枠や画像がスマホから はみ出してないか、カスタマイズするときスマホでの見え方を確認できます。

スマホで横揺れしないかチェックしたり、スマホマークをクリックして一番小さいデバイスの横幅320pxApple iPhone 5でチェックしてください。画面からはみ出してる時は、下記画像のように幅の右側がグレーになってます。

キチンとハマればOK！カスタマイズしたときどんな表示をするか確認するときにも便利ですよねっ。

下記画像は、PCビューからスマホビューに変えたときの画像です。横揺れの原因はPCサイズのアドセンスがiPhoneの横幅「320px」以上あるからグラグラしちゃってます。広告サイズを320pxのデバイスに合わせるためリロードさせましたっ。

「再読み込み」したらスマホに「スコーン」とハマって「OK」ゲット！

Sourcesタブの使い方

ソースタブは、CSSとJsのコードや該当ページのHTMLなどを表示してくれるんです。CSSでどんな装飾してるか見たり、そのページのHTMLのソース「骨組み全体」が見れたりします。

使用中のWordPressテーマやバージョンなども確認できる

• wp-content
• themes
• simplicity2
• style.css

と開くと使用中テーマ・バージョンなども確認きます＾＾

Theme Name: Simplicity2
Description: Simplicityの意味は、単純、簡単、簡素、質素です。飾り気のないカスタマイズの土台となれるようなテーマを目指して作りました。
Theme URI: https://wp-simplicity.com/
Author: yhira
Author URI: http://nelog.jp/
Text Domain: simplicity2
Version: 2.6.1

WordPressページ内で使用している画像も確認できたり

• wp-content
• uploads
• 2015/05
• modoru80.png

プラグインの確認ができたり

• wp-content
• plugins
• 使用中プラグインも丸見え(・∀・)

展開することで確認できるので、丸裸な感じだったり＾＾；

WordPressでキャッシュ系プラグインを使用しているとき

キャッシュ系プラグインを使用していると要素の検証画面でのカスタマイズしにくい・見にくい・CSSに書いても古いstyleを表示する。って事でCSSが反映しません。

キャッシュ系のプラグインを停止しカスタマイズしたり、スタイルを追記したあとはキャッシュをクリアにしてくださいね。

CSSが反映しない場合は、下記を参考にどうぞ♪

要素の検証を使って、実際カスタマイズしてみる

例えばaタグに装飾したいなら、プロパティ: 値;を書いてあげたらいけます。

a {
	/* プロパティ: 値; */
	color: #f78a97;
	transition: 1s;
}

適当ですけどこんな感じで指定すれば、ボックスができあがるんですねっ。

a {
	color: #f78a97;
	transition: 1s;
	font-size: 85%;
	background-color: gold;
	padding: 5px;
	margin: 0 5px;
	border: 1px solid orange;
	border-radius: 2px;
}

装飾し終えたコードをコピーして、CSSスタイルシートに「ペタリッ！」と貼り付けて更新すれば反映してくれますよっ♪何度も更新すると、キャッシュの関係で反映されませんよねっ。

『シークレットモードを使うとか、キャッシュ』を切って少したてば反映されます。（※サンプルで作ったaタグを装飾したボックス）

ざっくり解ってきたところで、要素の検証を実際やってみてくださいねっ。

ブロックレベルの要素、ボックスを装飾しよう！

<div class=”pink_box”></div>色を変えたり、その中にあるaリンクのプロパティなど試して遊びながら、要素の検証を実際さわる。これを繰り返せば簡単なカスタマイズはすぐに出来ちゃいそうですねっ！

カスタマイズするにはプロパティと値が必要なので、下に置いておきます。.pink_box {ここにスタイルを入れる}

シンプルなつくりなので何がどんな風に反映するか、値を大きくしたりして遊んでみたら、わかりやすいかもしれませんねっ。

	font-size: 85%;
	background-color: gold;
	padding: 5px; //ボーダーの内側の余白
	margin: 0 5px; //ボーダーの外側の余白
	border: 1px solid orange;
	border-radius: 2px; //ボーダーの角丸

インライン要素のを装飾しよう！

インライン要素はspanやaタグにクラス属性をつけて入れ子にすることも可能なので文字を大きくしたり、色を変えて装飾してくださいねっ。

参考初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？

リンク前ボタン・バッジのカスタマイズを装飾しよう！

要素の検証を使って好きなようにカスタマイズしてみてください。

参考、リンクバッジはokutaniさんのページを参考につくりました。

LINKCSSでリンク横に「参考・LINK」バッジをつけてみよう｜vdeep

現在は自分でもカスタマイズして、リンク前、ボタンバッジ！行頭を揃えた、おしゃれなカスタマイズというページも作成してます。Vdeepのバッジのスタイルをここで実践してみてはいかがでしょうか＾＾

LINKや参考を要素の検証でクリックして、スタイルに書いてる内容をへんこうしてみてくださいね＾＾

参考初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？｜ビバ★りずむ

さいごに

初心者にとってメリットしかない『要素の検証』を覚えたらカスタマイズが楽に出来ます。ほんの一部の機能のみ紹介したけど、便利さが伝わったらカスタマイズしまくってください！

初心者でも素人でもカスタマイズしやすい『要素の検証』を使って、カスタマイズのチャレンジを楽しんでください＾＾

どうしてもスタイルが変更できない。原因が不明な場合プロの人に助けを求めてみてはいかがでしょうか。

では、かうたっくでしたっ♪