WordPressテーマ変更!SimplicityからCocoonへ

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク
スポンサーリンク
  1. 要素の検証でカスタマイズ!デベロッパーツールで出来る事
  2. 検証画面の起動方法(Chrome、FireFox、IE・Edge)
    1. Chrome・FireFoxの要素の検証。3つの起動方法
    2. Internet Explorer(IE)・Edgeの2つの起動方法
      1. Internet Explorer(IE)・Edgeで検証画面が起動しないとき
  3. 検証画面の表示位置・切り替え方法!
    1. Chromeデベロッパーツール画面の表示位置、変更方法
    2. FireFoxデベロッパーツール画面の表示位置、変更方法
    3. IE・Edgeデベロッパーツール画面の表示位置、変更方法
  4. 要素の検証でカスタマイズしたい場所をクリックする
    1. FireFox・IE・Edgeの要素の選択ボタンの場所
    2. Chrome要素の検証でカスタマイズ時よく使うタブ説明
  5. 要素の選択をする『矢印マーク』の使い方
    1. HTMLタグspan・divなど追加
      1. 追加したタグをNew Style Ruleからスタイル追加
    2. タグにclass名など属性を追加
    3. Elements(要素)でHTMLをコピー
    4. HTMLタグを展開し・選択した該当CSSがみれる
    5. カスタマイズしたい箇所のCSSを確認しスタイルシートにコピペ
    6. 追加したタグをCSSで指定して装飾
    7. HTMLタグのスタイル:装飾をON・OFFにする
      1. CSSのスタイルのレ点を外した状態のスタイルシートを確認
    8. カラーピッカーで色を簡単に変えられる
      1. 検証画面のカラーピッカーで画像の色を取得
    9. 選択した要素のmarginやpaddingのボックスモデル
    10. CSSが圧縮されてソースが見にくい時
  6. スマホマーク:トグルデバイスモードの使い方
  7. Sourcesタブの使い方
    1. 使用中のWordPressテーマやバージョンなども確認できる
    2. WordPressページ内で使用している画像も確認できたり
    3. プラグインの確認ができたり
  8. WordPressでキャッシュ系プラグインを使用しているとき
  9. 要素の検証を使って、実際カスタマイズしてみる
    1. ブロックレベルの要素、ボックスを装飾しよう!
    2. インライン要素のを装飾しよう!
    3. リンク前ボタン・バッジのカスタマイズを装飾しよう!
  10. さいごに

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

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

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

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

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

検証画面の起動方法(Chrome、FireFox、IE・Edge)

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

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

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

クロームの起動方法『検証』をクリック

FireFoxは『要素を調査』をクリック

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

CtrlShiftCキーの同時押し

  • Macのショートカット

control?option?Cキー

Internet Explorer(IE)・Edgeの2つの起動方法

  • 1つ目。ブラウザを右クリック
ieの「要素の検査」起動方法

IE・Edgeは『要素の検査』を選択

  • 2つ目。F12キーで起動

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

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

  • Windowsの場合CtrlShiftCキーの同時押し機能なし
  • Macのショートカットcontrol?option?Cキー機能なし
ポイント
  • IE・EdgeはF12キー
  • 右クリックで『要素の検査』を選択

この2つの起動方法で試してください。

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

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

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

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

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

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

DevToolsの画面の位置変更:別画面、画面下、画面右切り替え方法
一番右の設定ボタン:縦3点リーダー『カスタマイズアンドコントロールCustomize and control|DevTools』をクリック。

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

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

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

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

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

画面下・右サイド。画面下・別画面。右サイド・別画面。FireFox検証画面の位置変更場所

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

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

検証画面を別画面に・画面下と位置変更が2つあるのがIE・Edgeのデベロッパーツール

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

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

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

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

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

Fire Foxの要素の選択(矢印)ボタン

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

IEの要素の選択(矢印)ボタン

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

Edgeの要素の選択(矢印)ボタン

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

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

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

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

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

  • 矢印マーク:要素の選択
  • スマホマーク:スマホビューのチェック
  • Elements:HTMLタグの構造が表示
  • Sources:CSSなど色々見れる

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

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

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

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

Chromeで要素を選択した状態

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

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

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

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

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

HTMLタグ<p>をダブルクリックしたらクラス属性なども書けちゃうし、stylesのpの変更もできますよっ。

HTMLタグspan・divなど追加

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

ChromeデベロッパーツールのEdit as HTMLの場所

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

タグ追加の様子

HTMLとして装飾でspan・divなどタグの追加※Edit as HTMLでなくダブルクリックしたら、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;
}

inspector-stylesheetでも追記可能

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

デベロッパーツールで追記後:サイト上はstyle

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

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

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

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

htmltag-class-name

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

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

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

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
ポイント

実際要素の検証で、目次のHTMLを切り取る方法を見ると分かりやすいですよ。

LINKTable of Contents Plusを使って、長い見出しをコンパクトに!目次h3タグをh2タグ下にリストの目次に変更する方法

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

Gush4のコンテンツ部分の親要素

コンテンツ部分のHTMLid=”main”を展開した様子

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

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

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

htmltag-css

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

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

ポイント

実際カスタマイズする様子は、以下が分かりやすいですよ。

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

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

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

p.hoge{
	background-color: pink;
}

htmltag-pinkdeco

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

またgif画像の通りCSSを書くときbackground-colorと全部書かなくてもbaの時点で候補を出してサジェストしてくれるんですね。

ツヅリの間違いや検索する手間を省いてくれて、メチャクチャ便利で初心者に優しい!

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

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

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

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

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

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

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

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

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

F12キーのスタイル:stylesのレ点を外す前

F12キーのスタイルチェックを外した様子

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

Saucesタブの該当CSSが表示される

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画像の通りです。

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

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

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

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

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

画面の幅を縮める

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

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

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

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

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

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

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

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

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

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

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

mobile-mark

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

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

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

Sourcesタブの使い方

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

要素の検証で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が反映しない場合は、下記を参考にどうぞ♪

CSSが反映する方法
  1. 普段見てるページにエラー・不具合があったとき、試してほしいこと
    • 見出し:キャッシュを削除する(Chromeの場合)を参考にどうぞ。
  2. 初心者のCSSが反映されない理由!優先順位の詳細度
    • CSSの強さ
    • 1番したに上書きしても反映されない理由
  3. これが意外と多いかも。。CSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定と優先順位
  4. あとは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の装飾

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

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

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

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

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

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

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

カスタマイズするにはプロパティと値が必要なので、下に置いておきます。.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のセレクタの関係&要素とは?|ビバ★りずむ

さいごに

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

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

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

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

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る