スタイルシートについてネットでいろいろ調べているのだけど、サイトで説明されていることの前提条件が分からないために書かれている内容がチンプンカンプンという方。
数年前の私も同じでした。
ここでは、「あのときこういう説明をして欲しかった」と思う。スタイルシートの基本中の基本についてお話させていただきます。
WordPressのテーマのレイアウトを構成しているスタイルシートは、WordPressの管理画面「外観」＞「テーマの編集」をクリックすると、一番最初に表示されている「スタイルシート (style.css)」というファイルです。
ここを編集することで、テーマのオプションではできなったデザインの変更ができるようになるわけです。でも、なんだか難しそうな記号がたくさん書いてあってよく分からないと思います。まずは、スタイルシートで使用されている３つの要素を覚えましょう。
スタイルシートには、いろんなことが書かれているように見えますが、要約すると次の３つがセットになってただ書かれているだけなんです。
- デザインを適用させる「場所」を指定する「セレクタ」
- デザインの「種類」を指定する「プロパティ」
- 具体的なデザインの「状態」を指定する「値」
つまり、どこに（セレクタ）、どんなデザインを（プロパティ）、どのように（値）適用させるのかがひたすら書いているのがスタイルシートの中身なのです。
具体的な記述方法はというと、
セレクタ{プロパティ:値;}
こんな感じになっています。
これら３つの要素の具体的な記述方法さえ理解してしまえば、スタイルシートは簡単に理解できるようになります。それでは、下記で「セレクタ」と呼ばれるデザインを適用させる範囲を指定する部分について見ていきましょう。
