WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

CSSセレクタの調べ方/カスタマイズにはデベロッパーツール(クローム開発者ツール)が必須!

アイキャッチ/デベロッパー カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク
この記事で分かること
  1. 私がおこなっているカスタマイズの流れ
  2. CSSコードの書き方【基本】
  3. セレクタの調べ方(この記事ではクラス名)
  4. デベロッパーツールの見方
  5. SWELL風目次デザインのCSS

公開したカスタマイズを使ってくださるのは嬉しいです!

一方で、

サイト型にはしたいけどCSSいっぱで諦めた。

コード見るだけで吐き気がぁぁぁ

嫌悪感を感じる声も聞かれ、もう少し分かりやすく記事を書けないものかと伝える難しさを感じています。

今回はカスタマイズに興味はあるけどコーディングのハードルが高いと感じる方へ、少しお役に立てるといいなという情報を書いてみます。

この記事の内容を覚えると、今までただコピペしていただけの方でもCSSの意味が分かり、自分でコードを書くきっかけになるはずです。

ちょっと読んでみようと思ったら脱・初心者^^

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

HTMLとCSSの違いについて

HTMLとCSSは共にWebページ作成の基本となる言語ですが役割の違いがあります。

HTML/骨組みを造る

HTML・・・HyperText Markup Languageの略

Webページの骨組み」になる言語。

家で例えるなら基礎、柱、梁の部分です。

文字、表、画像、リンクなどがWebページのどこに何を表示するかを指定します。

タグで囲んで使用し、まとまりを表す<div>や見出しに使う<h2>などブログを書いている人ならお馴染みのタグもすべてHTMLを使っています。

CSS/装飾等のスタイルを設定

CSS・・・Cascading Style Sheetの略

WebページのHTMLを装飾し、見た目を整える」言語。

色塗りといった装飾の位置づけですが、アニメーションで動きを加えたりCSSでできることは多岐にわたります。

CSSだけではWebページを作ることはできず、HTMLと組み合わせて使います。

当サイトのカスタマイズで主に使用するのはこのCSSでスタイルシートとも呼ばれます。

CSSの基本

【コードの書き方】
セレクタ { プロパティ : ; }

  • セレクタはCSSをどのHTML部分に適用させるか紐づけるところで、クラス名、ID名、HTMLタグ等を指定できます
  • プロパティは適用するスタイルの種類で数多くあります
  • 値は各プロパティに対応する単位の数字、px、%等を使い指定します
  • セレクタにクラス名を指定するときは先頭に.(半角ドット)をつけます
  • プロパティを複数続けて記述するときは;(半角セミコロン)で区切ります
  • メモ書きするときは/* */内に記述します(コメントアウトと言います)
  • コード部分はすべて半角英数字を使います

カスタマイズする際の基礎知識としてHTMLとCSSの役割の違いをざっくりと、基本的な書き方は正確に覚えるようにしましょう。(コーディングは一文字でも違うと反映されないため正確さが必要となります)

他に、JavaScript(ジャバ スクリプト)といったWebページに動きをつけるためのプログラミング言語があります。

スポンサーリンク

CSSカスタマイズの手順は5ステップ

次に私がおこなっているカスタマイズ方法をご紹介します。

  • Step1
    カスタマイズしたい箇所のCSSセレクタ(クラス名)を調べる

    デザインを変更したい箇所にどんなセレクタ(この記事ではクラス名を使用)が使われているかを、デベロッパーツールで調べます。

  • Step2
    プロパティを調べる

    自分がイメージするデザインに必要なCSSプロパティを調べます

  • Step3
    (デベロッパーツールでシミュレーションする)

    この手順は省略してもOKですが覚えておくと便利です。

  • Step4
    スタイルシートにCSSを入力する
  • Step5
    確認
スポンサーリンク

CSSカスタマイズ例:Cocoonの目次のデザインを変えたい

例えば目次のデザインを変えたいなという場合。

カスタマイズしたい箇所のCSSセレクタ(クラス名)を調べる/デベロッパーツール使用

イメージ画像/ポチップ

「CSSをどのHTML部分に適用させるか」紐づけるためのセレクタ部分にはクラス名やID名、タグなどいくつか指定できます。当記事ではクラス名を使用します。

CSSセレクタの種類
  • *(すべての要素)
  • #id(ID名)
  • .class(クラス名)
  • A > B(子セレクタ)
  • A B(子孫セレクタ)
  • A + B(隣接セレクタ)
  • A ~ B(同じ階層のセレクタ)
  • A , B(複数のセレクタ)

セレクタ部分を調べるために活用できるのがGoogle Chromeの標準機能で使えるデベロッパーツール。(Google Chrome以外でも使えるブラウザがあるので試してみてください)

デベロッパーツールでできること
  • 現在のページ(クリックした箇所)のHTMLの構造を調べる
  • 現在のページ(クリックした箇所)に使われているCSSを調べる
  • このツール上で実際にCSSを入れてシミュレーションする
  • コードのエラーを見つける

主に開発に携わる方が様々な用途に使うのですが、少しだけデザインを変えたいな~という一般ユーザーカスタマイズの場合でもHTMLとCSSの検証ができることはとても便利!

便利を超えて必須ツールです。

デベロッパーツールの開き方

確認したい要素を右クリックして「検証」をクリックすると、同ページの右側にコードが並んだデベロッパーツールが展開されます。

ここはサイトがどういったHTMLやCSS等で構成されているかといった情報の宝庫。

デベロッパーツールの見方

コードがずらっと並び、上段はHTML、下段がCSSになっています。(このレイアウトは変更可能)

何が何だか分からなくてもざっくりと見れれば大丈夫。何度か使っているとそのうち慣れてきます。

デベロッパーツールのHTMLを見るとセレクタが分かる

例えば目次部分をクリックして検証すると上段のHTMLは、

<div id=”toc” class=”toc tnt-number toc-center tnt-number border-element”>の部分(またはその近くの子要素)がフォーカスされているかと思います。

近くの子要素がフォーカスされているときは少し上に戻って親要素を探すと分かりやすいです。

POINT(大切!)

class=”toc tnt-number toc-center tnt-number border-element”>

ここのHTML部分から、Cocoonの目次には toc というクラス名が使われていることが分かります。(tocのあとに半角スペースで区切られて複数あるクラス名は細かいスタイルの設定に使われています)

このクラスの見つけ方を覚えておきましょう!

クラスとは要素につける名前みたいなもので複数つけることができます。

デベロッパーツールでみるHTMLの構造

右向きのは親要素を表し、右向きの▼をクリックすることでその中に入っている子要素を開閉できます。(展開されると下向きに▼変わります)

Cocoonの目次の場合、一番外に側の親要素のクラス名がtoc、tocを展開すると中にtoc-title(目次のタイトル)、toc-content(目次の項目)、さらにその中にolタグ(番号付きの箇条書き)などが入っているのが確認できます。親要素の中に入っているものを子要素と呼びます。

デベロッパーツールでみるCSS

下段には現在適用されているCSSが表示されます。

.toc {
    border: 1px solid #ccc;
    font-size: .9em;
    padding: 1em 1.6em;
    display: table;
}

このCSSの意味は下記の通り。
カスタマイズするにはここに変更したいプロパティを入れていきます。

使われているクラス名が分かれば第一歩!

CSSプロパティを調べる

プロパティは適用するスタイルの種類でたくさんありますが、簡単なカスタマイズで使うのは定番の項目だけでも十分。

すべて覚えなくても今の時代、ネットで検索すればたくさん情報があるので大丈夫です。

調べることが大事!!

よく使うプロパティ
  • border:枠線を引く(線の太さ、色、線の種類を指定できます)
  • background-color:背景色をカラーコードで指定する
  • color:文字色をカラーコードで指定する
  • border-radius:角の丸みをpxまたは%で指定する
  • padding:要素の内側余白
  • margin:要素の外側余白 …など

他にもpositionを使うと要素を任意の場所に配置できたり、flexは要素の並び方を柔軟に指定できたり、animationでは要素を動かすことができます。CSSでできることはたくさん!

デベロッパーツール(検証ツール)でシミュレーションする

直接スタイルシートに記述しても良いのですが、本番環境なのでコード記述ミスがあった場合にレイアウトが崩れてしまっては困ります。

そんなときにデベロッパーツールが活躍。

CSSプロパティをツール上で入力(ドロップダウンメニューから選択できます)するとすぐにデザインが反映されプレビューで確認できます。

ここでやってみたいカスマイズを試してみるとよいですよ。

あくまでテスト環境でのシュミレーションなので、該当ページを再読み込みするとリセットされます。適用させる場合はスタイルシートに入力して確定しましょう。

スタイルシートにCSSコードを入力する

イメージ画像

CSSの編集は子テーマを使用します。

CSSの編集についてはこちらの記事にまとめましたのでご覧ください。

スポンサーリンク

CSSを使って目次をSWELL風にカスタマイズ

ちなみに今回の目次デザイン例は有料テーマSWELL風にしています。

ボックスデザインの記事にもサンプルを掲載していますが、セレクタ部分を”box〇”から目次のクラス名”toc”に変えることでコピペで応用できます。

/*****SWELL目次風*****/
.toc{
       border:none;/*目次枠線リセット*/
}

.toc{
	--border-color-1:#fafafa; /*ストライプの色*/
	--border-color-2:#ddd;/*上下枠線の色*/
	margin: 2em auto;
	padding:2em;/*内側余白*/
	background:linear-gradient(-45deg,transparent 25%,var(--border-color-1) 25%,var(--border-color-1) 50%,transparent 50%,transparent 75%,var(--border-color-1) 75%,var(--border-color-1));
	background-size: 4px 4px;
	border-bottom: 4px double var(--border-color-2);
	border-top: 4px double var(--border-color-2);
	background-clip: padding-box;
}

この記事の目次にもこのデザインを入れています♪気になった方はコピペしてみてください。

ネット上で公開されているコピペできるカスタマイズも、自分のサイトに合わせたセレクタにするだけでこのように応用できるものがたくさんあります。

スポンサーリンク

まとめ/デベロッパーツールを使えば誰でもCSSは書ける

  • 私がおこなっているCSSカスタマイズの流れ
  • CSSコードの書き方
  • セレクタ(CSSクラス)の調べ方
  • デベロッパーツールの見方、便利な使い方

以上についてまとめました。

今回の記事で一番お伝えしたいのは、

セレクタ + プロパティを調べれば
誰でもCSSは書ける

ということです。

基本的な書き方(半角を使うことや {} や ; を忘れない、単位など)を守れば、プロパティはその都度調べていくだけでシンプルなCSSは完成します。

特に私はデベロッパーツールでのセレクタ(クラス名やID名)の調べ方を知ったときにカスタマイズの幅が広がったので、オシャレな有料テーマを買わなくてよさそうとまで思えるように。

皆様にもお伝えできればいいなと思って記事にしました。

お役に立てると幸いです。

おまけ/ポチップはじめました

商品リンク作成プラグイン、ポチップを導入しました!

最初の設定が大変だったけど快適、快適♪

ホッと一息つきたいときに、よかったらどうぞ^^

FRESH ROASTER珈琲問屋 楽天市場店
¥1,260 (2023/04/12 23:45時点 | Amazon調べ)
\最大10%ポイントアップ!/
Amazon
\ポイント最大45.5倍!/
楽天市場

>>このオシャレな商品リンクの作り方はこちらのポチップページをご確認くださいね。

この記事は以上です。

COMMENT

タイトルとURLをコピーしました