こんにちは。
Webページ制作担当の者です。
本日はCSS4のお話をします。
※CSSとは…カスケーディング・スタイル・シートの略。Webページの装飾を指定するための言語。見た目を細かく指定することができる。
現在この幹部ナビのサイトでは、CSSの最新版である「CSS3」を使用しています。
しかし、草案段階ではありますが次期規格である「CSS4」が既に発表されています。
今回はその中から、新規追加される（予定の）セレクタをいくつかご紹介します。
■親要素を指定する「?」セレクタ
これを待っていました。
「特定の子要素の親要素」を指定するセレクタです。
例えば、id=”contents”の中の、ハイパーリンクを持つリストの背景だけを赤くしたいとき。
従来のCSSでは指定できないので、jQueryで書くとこうです。
$(‘#contents ul li:has(a)’).css(‘background-color’, ‘#ff0000’);
これが、CSS4を使うと指定できるようになるんです。
こんな感じです。
#contents ul ?li a {
background-color: #ff0000;
}
これはすごく便利です！
個人的にはこのセレクタだけでも今すぐに実装してもらいたいです。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
■すっきりまとめる「:matches()」擬似クラス
例えば、特定の3つの要素内にあるハイパーリンク付きの画像にマウスオーバーしたとき、画像をやや透明にする場合。
#contents .logo a:hover img,
#contents .banner a:hover img,
#contents .photo a:hover img {
opacity: 0.7;
}
CSS3だとこんな感じで書きます。
同じような記述がダラダラと続いていますね。
それがCSS4だと、こんなにすっきりまとまります。
#contents :matches(.logo, .banner, .photo) a:hover img {
opacity: 0.7;
}
これは見やすいですね！
かゆいところに手が届く擬似クラスです。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
■「:not()」擬似クラスが複数指定可能に
これは個人的に絶妙に嬉しい擬似クラスです。
例えば、「最初と最後のリスト以外」を赤文字にする場合。
従来の書き方だとこうです。
#contents ul li:not(:first-child),
#contents ul li:not(:last-child) {
color: #ff0000;
}
しかし、CSS4では「:not()」擬似クラスが複数指定できるようになります。
#contents ul li:not(:first-child, :last-child) {
color: #ff0000;
}
地味ですが絶妙に嬉しい機能拡張です。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
他にもまだまだ沢山ありますが、最後に謎の擬似クラスを紹介します。
■文字の方向が右から左の場合に指定する「:dir(rtl)」擬似クラス
よく分かりません。
アラビア語でコーディングする際などに使うのでしょうか。
使い方はこんな感じです。
#contents p:dir(rtl) {
color: #ff0000;
}
おそらく一生使うことはありません。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
CSS4はまだまだ草案段階であり、実装は何年後になるか分かりません。
今覚えたところで何の役にも立ちません。
しかし、こういった最新の情報を取り入れることは非常に重要だと考えます。
ただWebページを作るだけなら今や小学生でもできます。
しかしなぜ我々がWebのプロフェッショナルとして、仕事を続けられているのか？
それは常に最新の技術を取り入れ、Webのトレンドをチェックし、最先端の情報を発信し続けているからです。
今、当グループで一番旬なWebサイトは「池袋ぱんぷきん」です。
↑このサイトを見て少しでも「いいな」と思ってくれた方、ご応募お待ちしております。
3ヶ月でこのサイトが作れるよう、技術のすべてをお教えします。
