【初心者向け】CSSの基礎

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

今回は、初心者向けに CSS の基礎を紹介していきます。

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

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

WordPress歴、約10年の管理人が解説します。

CSS の基礎

CSSの基礎

CSS の基礎を紹介していきます。

CSS とは

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

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

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

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

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

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

しかし、基礎がわからないと自分で自由に変更することはできません。

書き方の基本

書き方の基本を紹介していきます。

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

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

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

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

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

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

値は、プロパティごとに用意されているので、どんなものに変更したいのか指定することになります。

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

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

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

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

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

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

書く場所について

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

  • 外部ファイル
  • 該当記事の headタグ内
  • タグに直接

一番おすすめなのが、外部ファイルに書くことです。

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

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

管理画面から、外観 → テーマの編集 → スタイルシート(style.css)で内容を見ることができます。

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

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

WordPressをカスタマイズ

WordPressの子テーマを作成する方法【安全にカスタマイズ】

2020年3月5日

該当記事の 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 の基礎である、書き方や指定方法について紹介しました。

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

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