超便利！ ChromeのデベロッパーツールとCSSの擬似要素

こんばんは、かがみです。
先ほどからモチが何か言いたいそうです。

モチ、ブログのデザインをいじってみたい！
でもあそびおわったら元通りにしたいよ

なるほど、テストでブログのデザインをカスタマイズしてみたいんですね。

デベロッパーツールは、WEB開発には必須といえるツールで、ブラウザ上でさまざまな検証を行うことができます。

早速、当ブログのトップページを使ってご説明します！

デベロッパーツールの使い方

まずは、検証したいWEBサイトのURLを開きましょう。
ページが開けたら、キーボードの「F12」（MacではCommand + Option + I）を押して、デベロッパーツールを起動してください。

画面の右側に表示されているのがデベロッパーツールです。今回は試しにロゴの部分をカスタマイズしてみようと思います！

右側のHTMLのコード上からロゴを表示しているタグ（このページでいうと、div id=”logo” の部分）をクリックすると、ページ上でロゴが選択されます。

画面右下にCSSを確認・編集できる箇所があります。ここで「＋」ボタン（New Style Rule）を押すと、inspector-stylesheetという仮のスタイルシートが生成されるので、これをクリックします。

inspector-stylesheetの編集画面になります。ここに書いたCSSは、ブラウザを更新してしまうとリセットされるので、編集中は更新しないように気を付けてくださいね！

CSSのbefore、after擬似要素で要素を生成してみよう

CSSの擬似要素は、HTMLファイルには手を加えず、CSSのみで新しい要素を追加することができるんです！

一つのタグ、ID、CLASSに対して、beforeとafterの最大2つの要素を作り出すことができるので、今回は2つ追加してみましょう。

早速inspector-stylesheetにCSSを書いていきます。

#logoにbefore擬似要素を追加し、CSSプロパティのcontentに「コニータス」と入力しました。

『Cony-Tas』ロゴの上に「コニータス」の文字が追加されたのがわかりますでしょうか？ これがCSSのみで追加された擬似要素になります＾＾

続いて#logoにafter擬似要素を追加し、今度はbackgroundに当ブログのキャラクター「モチ」のアイコン画像を設定してみます笑

こちらはpositionとrightで位置を調整して、ロゴの右横にアイコン画像を追加することができました！

最後に

今回は、デザインの確認に便利なデベロッパーツールと、CSSの擬似要素のついてご紹介しました！

ちなみにinspector-stylesheetに書いたCSSは、ブラウザを閉じる前にコピーしておいてWordPressの子テーマ（style.css）等にペーストすればそのまま反映することもできますので、お試しくださいね♪

それでは、今回はこの辺で！

いつも読んでいただき、ありがとうございますっ