CSSって、
 何をどうしてどうなるもの?

にいどめ

全く知らなければ全く書けないCSS
それゆえ、難しそうなイメージがあります。

1から学ぼうとしても、馴染みのない言葉が並ぶばかり……ああもう余計にややこしい!

しかし最低限のことを知っておけばコピペで形作れるので、軽~く把握しておいても損はなしですよ。




ややこしそう…

CSSって一体何のこと?

CSSとは、Webサイトのデザインをどう表示するか記したファイルであり、その内容となるコードのことです。

主に後者のコード(CSSコード)を意味する場合に使われることが多く、ファイルは“CSSファイル(スタイルシート)”と呼ばれています。

CSSのコードとファイル

CSSコード」は、どうデザインを表示するかコンピューター用の言語に置き換えたもの(符号)
CSSファイル」は、CSSコードを書き連ねた「~.css」ファイル。言わば“Webサイトのデザイン倉庫”

「テーマ」のプログラムは、このCSSを読み込むことでWebサイトにデザインを反映させます。

コードはWordPressに限らず全世界共通なので、どのWebサイト制作ソフトでも同じコードを使用することが可能。

ただし“独自タグ”と表記されているコードは、そのソフト専用のコードとなります。

具体的に…

どういうデザインのことを言うの?

フォントやWebサイト上にあるパーツの色、太さ、サイズ変更や下線を引くなどの装飾です。
その他に、コンテンツの間に余白を作る等の元から配置されているパーツを調整する時もCSSへ記述します。

この話を聞いて、

ケムシ

「投稿」の入力画面で文字色くらい変更できないの~?

と思う方はいらっしゃいませんか?
私は思いました…。

Yahooメール等は本文入力の画面で文字色を変えたり、フォントサイズを変更できるので。

しかしWordPressの「投稿」にそのような機能はありません。
通常のWeb制作と同じように、「このコードを書いたら、CSSファイル(スタイルシート)に書いてあるコード内容を適用するんだぞ」と文章内で指示し、デザインを表示させていきます。

CSSコードは…

どこに書くもの?

「このコードを書いたら、CSSファイル(スタイルシート)に書いてあるコード内容を適用するんだぞ」と指示するので、2箇所に書く必要があります。

「このコードを書いたら」の部分である「投稿」に入力する文章内と、「CSSファイル(スタイルシート)に書いてあるコード内容を適用するんだぞ」に当たる「CSSファイル(スタイルシート)」です。

子テーマフォルダを作成した際に作りましたよね。

親テーマフォルダの中には様々な「~.css」が存在しますが、
子テーマを使用するなら、書き込むCSSファイルは子テーマフォルダ内にある「style.css」のみ

デザインが増えるなら追記、上書きしていきます。

追記していけば当然ボリュームも増えます。

見づらくなってくるのですが、「style2.css」なんてシートを作るのはNG

子テーマ作成時に親テーマと関連付けたのはstyle.cssのみなので、新たにファイルを作ってもWebサイトへ反映されません。

CSSコードを…

どんな風に書くの?

CSSは“デザインを表示するコンピューター言語”。
と言っても、style.cssへ記述するコードと、「どこからどこまでが赤文字」のように文章内で指定するコードの書き方は少し違います

ピンクに色付けした部分が、各場所へ記述するコードです。
“style.css”に書く形と、“文章内”で書く形が少し違いますね。

しかしどちらもクラス名全世界共通のコードで構成されています。

クラス名については後ほど触れるとして……。
このCSSコードを記述する際に気を付けることは、

{で始めたら、}で終わる。
<span>で始めたら、</span>で終わること。

他の場合も同様です。
必ず始めたものと同じもので終えるようにしてください。

では実際にどう書くか、CSSの有無で変わる表示と一緒に見てみましょう!

まず、WordPressの「投稿」で文章を入力しただけの状態です。
見やすいように余白を空けてみました。
が、これをプレビューすると・・・

改行はされているものの、余白が消えてしまいました。
このまま書き続けると、かなり圧迫感のある文面になります。

読みやすくなるようCSSを適応させましょう。
デザインを適応させたい箇所にCSSを記述してstyle.cssを読み込むよう指示します。
これをプレビューしてみると・・・

大事な部分は赤文字になり、きちんと余白も出来ました。

これは記述したコードの内容(デザイン)を、style.cssから呼び出して反映させたためです。
今回の場合だと、

クラス名「mb3」というコードで「3em分の余白を空ける」デザインを、
クラス名「red」というコードで「赤文字にする」デザインを適用させた

という具合ですね。
では、このクラス名とは何でしょうか。

コードに含まれる…

クラス名って何だ?

クラス名は、「~.css」に記述している内容を呼び出すための名前です。

Webで表示されるものには、全てこのクラス名(class=“名前”)であったり、id名(id=“名前”)が付いています。

id名とは

クラス名と同じような役割で使用するが、1ページ内に1箇所でしか使えない。
たとえば3行目に「id=“red”」で赤文字にすると、ページ中、それ以外の箇所をid=“red”で赤文字に出来ない。そのため、頻繁に使うコード(装飾系デザイン)にidを使わない。

先程の例では、クラス名「red」というコードで「赤文字にする」デザインを適用させていましたよね。

このクラス名(redの部分)は自分で決めています。
コード自体は全世界共通ですが、CSSファイルを呼び出すためのクラス名は自分で決めるのです。

半角英数字であれば、どんな名前でもOK!
反映させるデザインを名前に使えば、後々わかりやすいですよね。

ただしクラス名をかぶらせないこと

既に「red」というクラス名を使っていた場合、他のコードに「red」というクラス名は使えません。
読み出す際にCSSコード同士がぶつかって反映されなくなってしまうからです。

「red1」など少しでも変えれば使えますので、この点だけには気を付けて分かりやすいクラス名を付けていきましょう。

さて。
これまで主に文章を装飾するデザインについてお話ししてきましたが、冒頭では……

CSSコードはコンテンツの間に余白を作る等、元から配置されているパーツを調整する時にも使う

…とお伝えしました。

たとえば、当サイトのTOPページ。
おすすめコンテンツを3つ横並びに表示していますが、そのタイトルと説明文を元のデザインよりも少しだけ離しています。

この場合、style.cssには・・・

と書いて反映させているわけですが、このクラス名は私が付けたものではありません。

元からあるパーツに変更を加える場合は、元から付けられている名前を使わなければならないのです。

ケムシ

元から付けられている名前って…何?

そういう場合にとても便利なツールがあります。
ずばり、「Google Chrome」のDeveloper Tools
次回はこのデペロッパーツールについて、ふわ~っとご紹介いたします。


ご覧いただきありがとうございました!