CSSコードの書き方とセレクタの調べ方(デベロッパーツール使用)をご紹介(初心者向け)

アイキャッチ/デベロッパーカスタマイズ
当ページの記事です

アピールエリアのカスタマイズサイト型トップページの作り方を公開してから、

これ私のカスタマイズだー♪と分かるCocoonサイトがちらほら見られるようになりました。

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

一方で、

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

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

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

今回はカスタマイズに興味はあるけどCSSの使い方が分かりにくいと思っている方へ、少しお役に立てるといいなという情報を書いてみます。

この記事の内容
  1. 私がおこなっているカスタマイズの流れ
  2. CSSコードの書き方
  3. セレクタの調べ方(この記事ではクラス名)
  4. デベロッパーツールの見方
  5. SWELL風目次デザインのCSS
ここを解説
ウサギ

HTMLとCSSの違いについて

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

HTML

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

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

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

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

CSS

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

家で例えるなら壁紙、塗装、インテリアになります。

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

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

CSSの基本

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

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

カスタマイズする際の基礎知識としてHTMLとCSSの役割の違いをざっくりと、基本的な書き方は正確に覚えておくとよいですね。

カスタマイズの流れは5ステップ

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

  • Step1
    セレクタ(クラス名)を調べる

    デザインを変更したい箇所にどんなセレクタ(クラス名)が使われているかを調べます

  • Step2
    プロパティを調べる

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

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

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

  • Step4
    スタイルシートにCSSを入力する
  • Step5
    確認

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

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

STEP

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

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

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

詳しい使い方はこちらのサイトが参考になります。(他サイトが別タブで開きます)

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

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

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

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

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

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

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

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

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

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

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

POINT

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

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

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

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の意味は下記の通り。
カスタマイズするにはここに変更したいプロパティを入れていきます。

ここまでくればもう少し!

STEP

プロパティを調べる

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

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

調べることが大事!!

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

など

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

STEP

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

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

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

CSSプロパティをツール上で入力するとすぐにデザインが反映されプレビューで確認することができます。ここでやりたいカスマイズを試してみるのに便利ですね!

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

今回の目次カスタマイズ例はSWELL風

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

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

.toc{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#eee 25%,#eee 50%,transparent 50%,transparent 75%,#eee 75%,#eee);
background-size: 4px 4px;
border:none;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
min-width:700px;
}

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

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

まとめ

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

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

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

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

ということです。

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

特に私はデベロッパーツールでのセレクタ(クラス名やID名)の調べ方を知ったときにカスタマイズの幅が広がったので、皆様にもお伝えできればいいなと思って記事にしました。

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

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

設定大変だったのだ…

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

Comment

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