ブログ タカフミ

CSS とは（スタイルシート）【初心者向け】

※この記事は「2023年8月15日」に更新しました。

初心者向けに CSS の基本的な考え方を解説します。

WordPress（ワードプレス）には、様々なテーマがあり、中には、CSS をほとんどさわらなくても良いものもあります。

しかし、CSS が理解できると、ちょっとしたデザインの変更が簡単にできるようになります。

タカフミ
記事を書いている管理人の経歴は、以下の通りです。
  • WordPress歴、10年以上
  • 基本情報技術者資格所有者（ソフト開発の国家資格）
  • Withマーケ会員（2022年10月入会）

CSS とは

CSS とは

CSS（Cascading Style Sheets）は、スタイルシートとも呼ばれており、ブログのデザインをカスタムするときに必要な知識です。

HTML は、文書の論理構造、つまり、ブログ（サイト）の骨組みのような役割でした。

それに対して、CSS は、ブログにデザインをつけるためのものです。

例えば、以下のようなときに CSS は使えます。

  • この文字だけ大きくしたい
  • 見出しのデザインを変更したい
  • この文字だけマーカーをつけたい

他にも、サイト全体のレイアウトを変更したりすることも可能です。

CSS の書き方

タカフミ
CSS の書き方を解説します。

CSS は、対象のセレクタにプロパティと値を設定するように書いていきます。

セレクタ {
    プロパティ:値;
}

ちなみにセレクタというのは、pタグ や h2タグ などのことです。

プロパティは、どんなところを変更したいのかを書きます。

例えば、色を変更したいのか、太さを変更したいのか、指定するということです。

セレクタによっても指定できるプロパティは変わってきます。

タカフミ
値は、プロパティごとに用意されています。

どんなものに変更したいのか指定することになります。

一つのセレクタには、複数スタイルをつけることも可能です。

セレクタ {
    プロパティ:値;
    プロパティ:値;
    プロパティ:値;
}

スタイルシートは、別ファイルとして書いてあることが多いですが、基本的に今紹介したものが並んでいるだけです。

あとは、書いてあってもコメント（開発者があとから読んでわかるようにしているもの）とかなんで、そこまで難しくありません。

つまり、以下のような感じでスタイルシート（拡張子は .css）は書かれていると思ってください。

セレクタ1 {
    プロパティ1:値;
    プロパティ2:値;
    プロパティ3:値;
}
セレクタ2 {
    プロパティ1:値;
}
セレクタ3 {
    プロパティ4:値;
    プロパティ5:値;
}

CSS を書く場所について

CSS を書く場所は、実は 3通りあります。

  • 外部ファイル
  • 該当記事の headタグ内
  • タグに直接
タカフミ
一番おすすめなのが、外部ファイルに書くことです。

というかほとんどの方がこの方法で書いています。

ちなみに WordPress もこの方法で書かれています。

管理画面で内容を確認することができます。

外観 → テーマの編集 → スタイルシート（style.css）

ただし、変更する場合、子テーマを作成することをおすすめします。

子テーマに関しては、以下の記事をご参照下さい。

WordPress で子テーマを作成する方法

WordPress で子テーマを作成する方法【カスタム】

2021年11月24日

該当記事の headタグ内に書くこともできます。

この方法だと、その記事のコード量が多くなるのと該当記事しか適用されません。

タグに直接記述することも可能です。

この場合、あとからスタイルを変更するときに複数指定していると大変だったりします。

外部ファイルに書けば、変更するときもそのファイルだけ変更すれば、一気にスタイルを変更することができます。

クラスとID

セレクタには、h2 や p のように、タグを直接指定することもできますが、なかには使い分けたいときもあるかと思います。

タカフミ
そんなときに使えるのが、クラスという考え方です。

例えば、以下のスタイルは、font-red というクラスを指定すれば、文字が赤くなるという書き方です。

.font-red {
    color:red;
}

これを段落タグだけに使いたいということであれば、こんな書き方もできます。

p.font-red {
    color:red;
}

ちなみに HTML側で指定するには、以下のように class属性を指定することになります。

<p class="font-red">このテキストは文字が赤になる。</p>

また、半角スペースで区切るといくつもクラスを指定することができます。

クラスは、複数つくっておけば、それだけ表現が増えるので、色々試してみると面白いかと思います。

最後に ID についてですが、該当する記事内に一つだけ重複しないようにスタイルを指定するときに使います。

#main {
    color:white;
    background-color:gray;
}

最後に

今回は、CSS の基礎である、書き方や指定方法について、解説しました。

あとは、こんなスタイルにするには、どんな書き方をすれば良いのかをネットで調べて試していけば、自分好みのものが簡単にできるようになります。

基本的に追記していけば、スタイルを追加することができます。



RECOMMENDこちらの記事も人気です。