ホーム > HTML講座 > LESS編 > 第3章 セレクターを入れ子にしよう

第3章 セレクターを入れ子にしよう

登録タグ: CSS スタイルシート 効率化 CSSメタ言語 LESS ダイナミックスタイルシート セレクター 入れ子 ネストルール 使い方


今回は、LESSの機能の中でも視覚的にわかりやすく、直感的に記述できる仕組みである入れ子ルールについてです。

入れ子とは?

入れ子とは、あるものの中に少し小さめの同じ形のものが入っている状態のことを指します。
ロシアのマトリョーシカ人形などが有名ですね。

LESSにおいては、子孫セレクター子セレクター隣接セレクターなどの続けて指定できるセレクターを、より直感的・視覚的にわかりやすく記述できる仕組みです。

簡単な入れ子の例

まずは入れ子にする前の例を見ていきましょう。

div{
  color: black;
  font-size: 18px;
  line-height: 1.5;
}
div p{
  margin-bottom: 1em;
}
div p strong{
  color: red;
  font-weight: bold;
}

よく見かけるのではないかと思います。
何度も同じセレクターを書くのは面倒ですよね。

これを入れ子ルールを使用して記述すると以下のようになります。

div{
  color: black;
  font-size: 18px;
  line-height: 1.5;
  p{
    margin-bottom: 1em;
    strong{
      color: red;
      font-weight: bold;
    }
  }
}

子孫セレクターなどを使用しているところを入れ子ルールで記述することで、このようにシンプルにまとめることができます。

少し応用した入れ子の例

擬似セレクターなどを使用している場合は以下のようになります。
まずは適用前の例です。

p{
  color: black;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 1em;
}
p > strong{
  font-weight: bold;
}
p a:link{
  color: aqua;
  font-weight: bold;
}
p a:visited{
  color: orange;
  font-weight: normal;
}

これを、以下のようにスッキリとまとめることができます。

p{
  color: black;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 1em;
  > strong{
    font-weight: bold;
  }
  a{
    &:link{
      color: aqua;
      font-weight: bold;
    }
    &:visited{
      color: orange;
      font-weight: normal;
    }
  }
}

&(アンパサンド)は、入れ子の内側で、その1つ上の階層のセレクターを参照するときに使用します。
入れ子の外と中のセレクターは、それぞれスペースを挿入した形でCSSとして出力されるので、くっつけて記述したい場所(スペースを入れずに詰める場所、擬似セレクターなど)は&(アンパサンド)をくっつけて記述します。
くっつけない場所(スペースを入れる場所、子孫セレクターなど)は大丈夫です。
この辺りは混乱することもあるので、最初のうちはシンプルに入れ子ルールを適用していくのがよかったりします。

長くなりそうなので、今回はこのあたりでひとまず終了です。

← 前へ | 次へ →


カテゴリー:LESS編
2013/05/21 15:56:59 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク