CSS4とは!?

こんにちは。
Webページ制作担当の者です。

本日はCSS4のお話をします。
※CSSとは…カスケーディング・スタイル・シートの略。Webページの装飾を指定するための言語。見た目を細かく指定することができる。
20160919

現在この幹部ナビのサイトでは、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ヶ月でこのサイトが作れるよう、技術のすべてをお教えします。

スタッフブログ最新記事

Youtube最新掲載動画

【「新人女性スタッフ」インタビュー (入社初日の研修終わりにイロイロ質問してきました!)

「新人女性スタッフ」にインタビューをしてきました。彼女の「研修の感想」「研修担当者の印象」「今後の夢・目標」とあわせて「会社の雰囲気」を感じ取ってもらえたら嬉しいです!いわゆる「風俗」のイメージとは、きっとだいぶ違うものをお感じになられると思います(^^)

【池袋の人気風俗店】女の子待機所&受付 ★NEW 78秒 お店紹介動画★

東京・池袋の「人気風俗店」の「女の子待機所」と「受付所」を撮影してきました。 2019/8にもこちらのお店を撮影した動画を公開していますが、床を張り替えてキレイになりましたので、またムービーを撮ってまいりました。 「女の子待機所」を目にする機会はなかなかありませんので、ぜひご覧ください。

横浜 日ノ出町の【人気コスプレ風俗店】の「受付」「女の子待機所」を100秒でご紹介!!

横浜日ノ出町駅の「風俗店」の「受付&女の子待機所」を公開しています! 「コスプレ店」もあるので受付にはお客様が直接「見て」「触って」選べるように「コスプレ衣装」「下着」「小物」が所狭しとディスプレイされています。 動画の後半では「女の子の待機所」も少しだけ公開しています。風俗でお仕事をしないと絶対に足を立ち入ることはない「秘密の花園」ですので、風俗にご興味がある方は、ぜひ最後までご覧ください。

五反田店「巨乳」「人妻」「風俗エステ」「オナクラ」の【裏側】を撮影してきました!!

風俗のメッカ「五反田」で人気のシンデレラFCグループのお店の「裏側」を撮影してまいりました! 映画やドラマに出てくるような「アウトロー」「アングラ」「暗い雰囲気」はなく、ごく普通の事務所です!どの風俗店で働こうかな?とお考えの際の参考材料としてぜひご覧ください。

タグ

スタッフブログ最新記事

月別 アーカイブ

2022年

2021年

2020年

2019年

2018年

2017年

2016年

2015年

2014年

2013年

2012年

2011年

2010年

2009年

2008年

2007年

教育官ブログ
\風俗業界時評/シン・コラム
英語スタッフブログ!