CSS

スタイルシート(CSS)の基本|3つの要素

スタイルシートについてネットでいろいろ調べているのだけど、サイトで説明されていることの前提条件が分からないために書かれている内容がチンプンカンプンという方。

数年前の私も同じでした。

ここでは、「あのときこういう説明をして欲しかった」と思う。スタイルシートの基本中の基本についてお話させていただきます。

WordPressのテーマのレイアウトを構成しているスタイルシートは、WordPressの管理画面「外観」>「テーマの編集」をクリックすると、一番最初に表示されている「スタイルシート (style.css)」というファイルです。

ここを編集することで、テーマのオプションではできなったデザインの変更ができるようになるわけです。でも、なんだか難しそうな記号がたくさん書いてあってよく分からないと思います。まずは、スタイルシートで使用されている3つの要素を覚えましょう。

スタイルシートには、いろんなことが書かれているように見えますが、要約すると次の3つがセットになってただ書かれているだけなんです。

  1. デザインを適用させる「場所」を指定する「セレクタ」
  2. デザインの「種類」を指定する「プロパティ」
  3. 具体的なデザインの「状態」を指定する「値」

つまり、どこに(セレクタ)、どんなデザインを(プロパティ)、どのように(値)適用させるのかがひたすら書いているのがスタイルシートの中身なのです。

具体的な記述方法はというと、

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

こんな感じになっています。

これら3つの要素の具体的な記述方法さえ理解してしまえば、スタイルシートは簡単に理解できるようになります。それでは、下記で「セレクタ」と呼ばれるデザインを適用させる範囲を指定する部分について見ていきましょう。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP