2016/02/24

初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

要素の検証って初心者がカスタマイズするのに最高のツールで、触った箇所をリアルタイムで見ながら装飾できるのがホントに便利!CSSを書いてたら文字をサジェストするからツヅリを間違えないのも良いところです。

管理画面から直接スタイルシートをいじってブログで何度も確認してるとキャッシュが残って反映されてるのか見えなかったり。。何度もシークレットモードを開いたりして、以前は効率が悪かったんですよぉ。

Chromeの拡張機能「Incognito This!」を使うのも便利だけど、もっと便利なのが要素の検証でカスタマイズすること。「HTML」と「CSS」の基本を押さえて要素の検証の使い方を知れば、最後に自分で装飾できるようになります!

「HTML」「CSS」「要素の検証」この3つの基本だけ知って試行錯誤を繰り返してたら簡単なカスタマイズができるようになるんですねっ。

前回は、初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?を書いたので今回「要素の検証の使い方」以降CSSの書き方と、基本的な装飾を書いていきますね。

化粧道具;誰でも装飾できるようになる!?要素の検証のアイキャッチ

スポンサーリンク

要素の検証って何!?デベロッパーツールの使い方。

要素の検証はブラウザに元々付いてる機能でザックリ言ったら『HTML』が表示されてカスタマイズしたい所をクリックすると、『HTMLタグ』と『そのCSS』などが表示される仕組みになってるんですねっ。

デベロッパーツールって開発者のツールでハードル高いイメージあるけど、どこを触ればいいか知るだけで素人のカスタマイズとしてかなり便利で重宝します。

初めて使ったとき素人過ぎてどこをどう触ればいいのか!?って困ったこと。使ってこれは便利!!って思ったところをドカッっと紹介!ポイントを覚えて簡単なHTMLやCSSを書けるようになりましょう^^

要素の検証の開きかたからはじめますねっ。

起動方法(Chrome、FirefoxI、IE)

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

  • Chromeでしたら『検証』をクリック
    クロームの「要素の検証」起動方法
  • Firefoxは『要素を調査』を選ぶ
    ファイアーフォックスの「要素の検証」起動方法
  • Internet Explorer(IE)は『要素の検査』を選択
    ieの「要素の検査」起動方法

『ブラウザ毎の画面』ショートカットは下記の通りですので使いやすい方法でやってみてくださいねっ。

  1. 『F12』キーをクリック
  2. Windowsの場合CtrlShiftCキーの同時押し
    MacのショートカットcontroloptionCキー

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

デベロッパーツールの画面表示の切り替えの方法は、画面下・画面右・別画面の3種類!

表示の仕方が3パターンあってブログの画面下と画面右、別画面で表示する方法です。使い勝手によって変えれるのが便利だけど、どうやって変えるかをみてくださいっ。

DevToolsの画面の位置変更:別画面、画面下、画面右切り替え方法

上記画像▲右上の設定ボタンをクリックしたら下記画像▼ができますよねっ。

Dock Side:ドックサイドでDevToolsの画面位置を変更

工程を順に記すと下記!

  1. 一番右側にある縦ドット3つボタン設定ボタン『Customize and control(カスタマイズアンドコントロール)|DevTools』をクリック
  2. Dock Side:ドックサイドで画面の位置を選択する。
    • 左から、別の画面
    • 画面の下部
    • 画面の右側

ブログを見てると色んな表示の方法があって訳がわからないよぉ。。って困ったときは、右上『縦に並んだドット3つボタン』を思い出してくださいねっ♪

クロームで要素の検証画面をみながらカスタマイズできるように、使い方をマスターしよう!

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

クロームのデベロッパーツール、良く使うボタン

  • 矢印マーク
  • スマホマーク
  • Elements
  • Sources

ブログのカスタマイズ初心者的によく使うボタンは上記4つのボタンなので、知ってて便利ポイントを書いていきますねっ。

矢印(旧虫めがね)マークの使い方

カスタマイズしたい箇所のHTMLやCSSを知りたい要素を表示させ、どんな作りになっているのかを見ることができます。素敵なデザインのお手本『HTML』『CSS』など見れるボタンって思ってくださいっ。

知りたい「カスタマイズしたい要素」をクリックするには、要素が見れるように該当部分を選択するところから始まるんですね。

  • デベロッパーツールを開いてすぐの状態でしたら、カスタマイズしたい箇所をクリックすればOK!
  • 一度検証したら再度、要素を見たいとき矢印マークをクリック!
  • またはショートカットキーを同時に押す
    • Windows:CtrlShiftCキー
    • Mac:controloptionCキー

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

ほかに画像の代替テキストaltやリンクならaタグ内のURLなど、運営者さんが何を書いてる?って気になったところがガッツリ見れちゃうボタンなんですねぇ。

ポイント
  1. 矢印ボタンで選択できるとき、矢印マークは青。
  2. クリックすると、エレメンツが表示される。
  3. HTMLタグとスタイルなど見えるのを確認しよう

矢印マークの基本的な使い方

知りたい、気になるスタイルを見てカスタマイズも出来ちゃう!HTMLタグ<p>をダブルクリックしたらクラス属性なども書けちゃうし、stylesのpの変更もできますよっ。

実際カスタマイズする様子をGIFアニメや画像を使ってるページを見ると、さらにやり方が感覚的、視覚的にわかるのでおススメです!

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

スマホマーク!トグルデバイスモード『Toggle device mode』の使い方

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

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

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

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

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

mobile-mark

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

※実際に横揺れしてる場合リロードで修正できません。横揺れの例としてあげてるだけなので、下記画面からはみ出した場合、グラグラ横揺れの対処法をごらんくださいねっ!

参考CSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

Elementsは、HTMLの構造と内部のタグや選択した該当CSSがみれる

該当ページのHTMLがどんな構造でできてるか、タグ横の▶マークをクリックして展開して要素をみて確認できるところなんですねっ。カスタマイズするなら、気になる要素をクリックして下記のようにできます。

htmltag-css

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

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

ElementsでわかるHTMLの構造

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

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

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

知りたい要素「htmlタグ:エレメント」をコピー

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

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

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

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

上記の画像を検証してみますねっ。

画像の要素を検証した画面

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

Elements内タグにクラス属性をつけて装飾しよう!

カスタマイズするには、htmlタグにクラス名をつけると装飾しやすいと前回書いたんですけど、それ要素の検証で実際やってみましょう。段落<p>にクラス属性とクラス名をつけてあげます。サンプルなので、クラス名は”hoge”にしました。

htmltag-class-name

要素の検証でpタグにクラス属性をつける

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

CSSでクラスセレクタを指定して装飾する

pタグにクラス属性をつけた”hoge”の背景をピンクに装飾してみますねっ。CSSは下記です。見てみましょう!

htmltag-pinkdeco

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

ElementsでわかるHTMLの装飾

CSSのStyleが表示され、右側の「レ点」チェックを入れたり外したりすれば、どこがどんな風に装飾が変わるかがわかります。例えば上記のスタイルを変えてみましょう。

スタイルのチェックを消す

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

該当のmargin外側の余白を消すだけで見栄えが変わってギュウギュウ詰まった風に見えるんですねぇ。このように、どこがどんな風に変化するのかを見てみるのも参考になりますよっ。

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

要素の検証:カラーピッカーで色を変える方法

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

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

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

Elementsで選択した段落のmarginやpaddingの四角いボックスモデルはどこにある?

矢印(虫メガネ)ボタンで選択した段落の幅や高さ、選択範囲の線の外側余白のmarginの幅や内側の余白paddingがみえるボックスモデル。

この箱がどこにも見当たらないって経験ありますよねっ。画面下部に検証があればブラウザの左右、画面サイズを縮めて『680px以下』にしてください。そうすると下記画像のようにエレメントとCSS、四角いボックスモデルが表示されますよっ。

画面の幅を縮める

これも表示されたり、されなかったり訳の分からない動きをするからちょっと戸惑ったりするポイントかなぁ・・?ってありますよねっ。hタグやpタグなどのmarginって、どれだけとってるかなど比較して参考にしても面白いかもしれませんねっ!?

Sourcesタブの使い方

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

要素の検証でHTMLを全て表示

装飾したいHTML内タグをmarginやpadding、borderを変更したり更に装飾をつけるのも可能で新たに装飾すればすぐに反映してくれるので、カスタマイズするのにも便利ですよねっ。

例えばaタグに装飾したいなぁってことなら、プロパティ: 値;を書いてあげたらいけます。下記はリンクにカラーを指定して、リンクのオンマウスしたら「ふわー」っとさせるtransitionを1秒指定したものです。

 

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

デベロッパーツールでCSSの装飾

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

LINKです→『シークレットモードを使うとか、キャッシュ』を切って少したてば反映するので試してくださいねっ。(※サンプルで作ったaタグを装飾したボックス)

{}マーク「format」CSSが圧縮されてソースが見にくい時に便利!

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

圧縮されたソースを整形するformat

クリックしたら、一発解消っ!あらっ、見やすい(´∀`*)

ホントに便利機能がつまりに詰まったものが要素の検証だと感じませんかぁ!カスタマイズする時、リアルタイムで装飾を変えていけるツールでもありますしねっ♪

また、CSSを書くにしてもbackground-colorと全部書かなくてもbaの時点で候補を出してサジェストしてくれるんですねぇ。書きたい内容を選択すればイイのがメチャクチャ便利っ!初心者に優しい機能としか思えませんよぉ!

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

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

使い方がザックリ解ったところで、カスタマイズして遊んでみてくださいっ!下に私が気に入ってる装飾を置いて置きますねっ。習うより慣れましょう(^^♪

早速、要素の検証を開いてカスタマイズしてくださいっ。

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

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

ピンクboxは、ブロックレベルの要素ですよっ。検証して装飾してくださいねぇっ!

pタグにクラス属性をつけてpタグ内を装飾したり。そしたら、初めてのカスタマイズ完了ですねっ!

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

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

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

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

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

トランスフォームで字を斜めに装飾しよう!

字を斜めにして強調したり、ちょっといれると可愛い装飾ですよねっ。

個人的に好きですけど、実際に文字を斜めにしてる人は少ないかも知れませんけど楽しいので値を変えたり色々して遊んでカスタマイズに慣れることから初めてみてくださいねぇ!

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

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

字を斜めにするトランスフォームはelloraさんのページを参考にしました。

LINK強調文字をちょっとおしゃれにするCSSデザインサンプル|Naifix

参考初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?|ビバ★りずむ

さいごに

これは、初心者にとってメリット以外の何物でもないっ!要素の検証を覚えたらカスタマイズが楽に出来るようになりますよねっ。ほんの一部紹介しましたけど、便利さが伝わったら是非使ってカスタマイズしまくってください!

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

CSSが反映する方法
  1. ワンクリでシークレットモードにChrome拡張機能「Incognito This!」
    • カスタマイズした時キャッシュの影響
    • キャッシュって何?など参考まで
  2. 初心者のCSSが反映されない理由!優先順位の詳細度
    • CSSの強さ
    • 1番したに上書きしても反映されない理由
  3. これが意外と多いかも。。CSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定と優先順位

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

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

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー