CSSは現在CSS3まで使用できるブラウザが多いです。しかし、CSS4で追加されると言われている機能はまだ使用できないものが多く、いつから使用できるかも名言されていません。

今回の記事では、CSSの歴史を解説しながら、最新のCSS4についても紹介します。

CSSの歴史から最新の機能を知ることで、CSSの技術レベルを上げることも可能です。

これからCSSを学ぶ人も今回の記事を参考にすることで、最新のCSSを知ることもできますので、最後までご覧ください。

CSSの歴史を振り返る

CSS4について解説する前に、CSSがどのようなもので、これまでにどのように発展してきたかを紹介します。

CSSの歴史を知り、これまでの進化を見ることでさらにCSSの知識が深まり、コーディングに役立てることができるはずです。

CSSとは？

CSSとは、Cascading Style Sheets(カスケーディング スタイル シート)の略です。Cascadingとは、英語で階段上に流れる滝を意味しています。

CSSは、スタイルを適用するときに階段状に指定します。

例えば、まずはWebページ全体に適用するスタイルを設定し、その次にブロック、その次にアイテムといったように大きい部分から小さい部分に階段状に指定することが多いです。

ですので、CSSはスタイルを階段状に流れる滝ように指定するシートと要約することができます。

現在のCSSは装飾するだけでなく、動きまで付けることができます。これからもCSSの機能はさらに進化していくでしょう。

CSSが開発されたのはいつ？

最初のCSSは1994年にスイスで開発されました。

それまではHTMLだけでWEBページは構成されており、文字が羅列されただけのシンプルな作りになっていました。

しかし、CSSが開発されてからはHTMLに装飾が可能になり、色やサイズを指定できるようになるのです。

CSSのバージョンについて

1996年にW3CによりCSS1が勧告されました。

このCSSの後にある数字はバージョンではなく、レベルといいます。

レベル2までは総称してCSS2とされていましたが、CSS3からはそれぞれのモジュールに対してレベルが定められています。

例えば、animationプロパティであればCSS animation level1が現在のレベルです。

しかし、他のプロパティではレベル3のものがあり、CSS3の中はそれぞれのモジュールやプロパティに対してレベルが定められています。

そのレベルを見ることでそのプロパティが新しいものかどうかを判断するヒントになることもあります。

CSSのレベルは誰が決めているの？

CSSはW3Cという団体により標準化されています。

W3Cとは、インターネット技術の基準を世界で統一するために作られた非営利団体で、正式名称は「World Wide Web Consortium」です。CSSが作成された1994年に創設されました。

現在でも同様にW3CがCSSを標準化させようと世界で活動しています。

CSSのレベルが決まる順番としては、下記の5つの手順を踏みます。

1. 作業草案
2. 最終草
3. 勧告候補
4. 勧告案
5. 勧告

作業草案の時点で、一般には公開されますが、どのブラウザでも動く保証はない状態です。

5つのステップを踏んで、ようやくブラウザ間の互換性が保証されることになります。

W3Cの活動は、HTMLやCSSを保守していく上で非常に重要な役割を担っています。世界が繋がるインターネット上の技術を統一してくれるからです。

ここからは、現在のCSS3までの歴史とこれからのCSS4について紹介します。

CSS1

1996年にCSS1が提唱されました。

CSS1の正式名称は、「カスケーティングスタイルシートレベル1」です。レベルであることは覚えておきましょう。

CSS1ではCSSの基本的なプロパティが追加されています。

しかしながら、CSS1が勧告された当初は、CSS1に対応するブラウザがなく、使用される機会は非常に少ない状態でした。

CSS1で追加された機能やプロパティを紹介します。

W3Cが勧告したサイトを参照しています。

分類	詳細
フォントプロパティ系	・font-family・font-style・font-varian・font-weight・font-size・font
カラー及び背景プロパティ	・color・background・background-color・background-image・background-repeat・background-attachment・background-position
テキストプロパティ	・word-spacing・letter-spacing・text-decoration・vertical-align・text-transform・text-align・text-indent・line-height
ボックスプロパティ	・margin (margin-top, margin-right, margin-bottom,’margin-left)・padding (padding-top,’padding-right, padding-bottom, padding-left)・border-width(border-top-width, border-right-width, border-bottom-width, border-left-width)・border (border-color, border-style, border-top, border-right, border-bottom, border-left)・width・height・float・clear
分類プロパティ	・display・white-space・list-style(list-style-type, list-style-image, list-style-position)
その他	・＠import・important!
CSS1で実装されていた擬似要素と擬似クラス	・擬似クラス（ :link, :visited, :active ）・first-line擬似要素・first-letter擬似要素
CSS1で実装されていたセレクタ構文	LI {…}UL LI {…}UL OL LI {…}LI.red {…}UL OL LI.red {…}#x34y {…}

CSS1の時点で基本的なプロパティが実装されていることがわかります。

widthやhaight、displayなど現在でも頻繁に使うプロパティがあることから、これらのプロパティがCSSの基本であり、重要であると認識できます。

CSS2

CSS2は1998年に発表されました。しかし、CSS2は定義がわかりにくく、開発者の間で互換性の低さが指摘されました。

それを受けて2011年にCSS2.1が開発され、互換性の改善やエラーの解決、実装されないプロパティの除外を行いました。

基本的にはCSS2はCSS1のプロパティを使用できるように設計されています。

CSS2、CSS2.1で追加された機能の一部を紹介します。

分類	詳細
ボーダープロパティ	・border-bottom-color・border-bottom-style・border-collapse・border-left-color・border-left-style・border-right-color・border-right-style・border-spacing・border-top-color・border-top-style
アウトラインプロパティ	・outline・outline-color・outline-style・outline-width
ポジションプロパティ	・position
最大、最小値指定	・max-height・max-width・min-height・min-width
ブロック要素をコントロールするプロパティ	・overflow・page-break-after・page-break-before・page-break-inside・z-index・content
サウンドや音声に関わるプロパティ	・azimuth・cue・cue-after・cue-before・elevation・pause・pause-after・pause-before・pitch・pitch-range・play-during・richness・speak・speak-header・speak-numeral・speak-punctuation・speech-rate・stress・voice-family・volume

CSS2では、主に音声やサウンドに関するプロパティが多く追加されました。

他にも最大値や最小値を指定するmax、minは現在でも頻繁に使用するプロパティです。

上記のプロパティの他にもCSS1で追加されたプロパティを継承したり、再定義しているものもあります。聞きなれないプロパティもあると思うので、時間があるときに検索して勉強してみてください。

CSS3

CSS3からは、それぞれのモジュールやプロパティに対してレベルが振り分けられました。

その理由としてW3Cは、まとめて機能を更新するよりも、個々で更新することで効率的で簡単に更新できるからと発表しています。

全体のプロパティの中でもレベル3のものをまとめてCSS3と呼ばれているのです。

ここでは、CSS3で新しく追加されたプロパティの一部を紹介します。

分類	詳細
radiusプロパティ	・border-radius
カラープロパティ	・rgb()・rgba()・HSL/HSLA
透明度	・opacity
シャドウプロパティ	・box-shadow・text-shadow
グラデーション	・linear-gradient・radial-gradient
変形処理	・transform(rotate(),skew(),translate(),scale())
バックグラウンド	・background-size・background-origin・background-clip
画像のレイアウト	・object-fit・object-position
画面サイズから幅を指定	・vw・vh・vmin・vmax
擬似要素	・::after・::before・::first-letter・::first-line
擬似クラス	・:checked・:disabled・:enabled・:target・:empty・:only-of-type・:only-child・:last-of-type・:first-of-type・:last-child・:nth-last-of-type()・:nth-of-type()・:nth-last-child()・:nth-child()

上記の他にもアニメーションなどWebサイトに動きをつけるCSSも追加されています。現在のWebサイト制作には欠かせないプロパティばかりですので、それぞれの役割を理解しておきましょう。

CSS3からはたくさんの擬似要素も追加されています。擬似要素は現在のWebサイト作成で頻繁に使われています。どの擬似要素がどのような働きをするかを理解しなければなりません。

CSS4

CSS4は存在しないけれど、それぞれのモジュールやプロパティがレベル4以上に到達することはあるとW3Cは発表しています。

CSS3以降はモジュールやプロパティごとにレベルが定められているため、CSS言語をまとめてバージョンアップすることはないのです。

これからCSSを学んでいく際に気をつけなければならないのは、それぞれのモジュールやプロパティで新しい機能が更新されるということです。

まとめて更新するわけではないので、常に注意して情報を得る必要があります。

さらに、既存のプロパティが更新され続けるだけでなく、新しいプロパティも追加され続けることを理解しておきましょう。

CSSレベル4の一部を紹介

W3Cが発表している最新のCSSの中でレベル4に達しているモジュールやプロパティの一部を紹介します。

詳細はW3Cのサイトに掲載しているので、詳しく知りたい人はW3Cのサイトをご覧ください。英語ですが、Google翻訳で十分に理解できます。

下記にCSSでレベル4に達しているモジュールを紹介します。

カスケードおよび継承レベル4ではimportルールについて機能が更新されています。

他のメディアクエリやカラープロパティもレベル4で新しい表現方法が更新されているので、最新情報を常にチェックしておく必要があります。

CSS4で新しく使えるプロパティ

ここでは、今後新しく追加されるであろうCSSプロパティについて紹介します。

今回紹介するプロパティは、まだブラウザでの対応がされてないものが多く、W3Cでも草案のプロパティです。

しかし、今後W3Cが開発を進め、勧告することで使用できるようになる可能性があるため、先に情報を知っておく価値はあります。

今回は下記の3つについて紹介します。

まだブラウザによっては、対応していないものが多いので実務ではまだ使えません。参考程度に学習してください。

16進数で透過を指定できる

CSSレベル3までは、色を透過させたいときはrgba()かopacityを使うしかありませんでした。

しかし、今回CSSのカラーモジュールlevel4の中で16進数のカラーコードで透過できるように検討が開始されています。

下記に赤色を透過させたいときの例コードを示します。

CSS
/* 今までの透過 */
.box{
background-color: rgba(255, 0, 0, 0.5);
}
/* 16進数で透過 */
.box{
background-color: #ff000080;
}

後ろの2桁が透過の割合を示しています。このようにカラーモジュールlevel4では新しい色の表現方法も追加されています。

CSSで変数を指定できる

今までCSSの中で変数を指定したい場合はSassなどのプリプロセッサを使用しなければなりませんでしたが、今後CSSだけで変数を指定することができる予定です。

CSSで変数を扱うにはカスタムプロパティを使用します。このカスタムプロパティはW3Cでレベル1のモジュールになります。

ここからはCSSで変数を使う方法について解説します。

変数を指定できれば、コード量を減らすこともできますし、メンテナンスも容易になります。

今後必ず使用して行かなければならない方法になるので、ここで知識を蓄えておきましょう。

変数の宣言をする

変数を使うためには、まず変数を宣言しなければなりません。

変数の宣言は以下のように記述します。

CSS
:root{
--header-color:#ff0000;
--text-color:#000000;
--header-size:20px;
}

上記のように、変数名の前に「–」を付けて値を指定します。

変数名は、大文字と小文字が区別されるため注意が必要です。

CSS
:root{
--Header-color:#ff0000;
--text-Color:#000000;
--Header-Size:20px;
}

上記のコードは、先程の変数とは別物と判断されるので、変数名を指定する際は意識しておきましょう。

変数の宣言は、 –変数名 : 値という書式です。変数は、大文字と小文字が区別されます。

変数を呼び出す方法

変数を宣言したら、変数を使いたい場所で呼び出す必要があります。

変数の呼び出しは以下のように記述します。

CSS
h2{
color:var(--header-color);
}

varの後の()の中に変数名を指定することで、変数を呼び出すことが可能です。

変数名の大文字、小文字は識別されるので注意が必要です。

CSS
:root{
--Header-size:20px;
}
h2{
font-size:var(--header-size);
}

上記の記述では、h2の文字の大きさは変化しません。

変数を使うときは、スペルミスに気をつけて、全く同じ変数名を指定することを覚えておきましょう。

CSSにおける変数は、Internet Exploreなどのブラウザにはサポートされていません。

現時点で変数を使用したいのであれば、Sassを使うことをおすすめします。

セレクターの種類が増える

ここでは3つのセレクターについて紹介します。

CSSの中にはセレクターは数多く存在しますが、正確に使えるようになれば記述量を減らすこともできますし、メンテナンスも容易になります。

今後もセレクターは増えていくことが予想されるので、確実に覚えておきましょう。

擬似セレクター「:has」

擬似セレクターである「:has」は、特定の子要素や直接子を持っている要素のみを指定することができます。

コード例を紹介します。

CSS
a:has(>li){
font-size:16px;
}

上記のコードでは、liタグの中でもaタグに囲まれたliタグにのみCSSが適用されます。

CSS
h2:has(+p){
font-size:30px;
}

上記のコードでは、直後にp要素を持つh2要素にのみCSSが適用されます。

「:has」は、細かく要素を指定できるので、無駄にクラスを指定せずに記述が簡潔になります。

擬似セレクター「:not(s1,s2)」

擬似セレクターである「:not」は、CSS3から存在しています。

しかし、CSS3では一つの要素しか指定することができませんでしたが、CSS4の「:not」は複数の要素が指定可能になりました。

簡単なコード例を紹介します。

CSS
section:not(h2,p){
font-size:10px;
}

上記のコードではsectionタグで囲まれた中のh2要素とp要素以外にfont-sizeが適用されることになります。()の中の要素を除いた他の要素と捉えることができます。

「:not」はクラスに対して使うこともできます。

HTML
<ul>
        <li class="red">赤色</li>
        <li class="orange">オレンジ色</li>
        <li class="blue">青色</li>
        <li class="green">緑色</li>
 </ul>

CSS
li:not(.red,.blue){
color:red;
}

上記のコードでは、赤色と青色以外の文字が赤になります。クラス名でも複数を指定できるので、表現の幅が大きく広がります。

しかし、「:not」で複数を指定できるブラウザはまだ少ないので、今後の対応を待つしかありません。

擬似セレクター「:matches」

「:matches」は複数の要素に対してまとめてCSSを指定することができます。

コード例を紹介します。

CSS
:matches(header, footer, aside) p {
    font-size:18px;
}

headerとfooter、asideの中のp要素にのみfont-sizeを指定できます。

擬似セレクターはCSSの記述を簡素化する効果があり、記述量も減らすことができます。

今後も新しい擬似セレクターに注目です。

CSS4とCSSの歴史を振り返る:まとめ

CSSの概要と歴史、最新のCSS4について解説しました。

CSSが開発されてきた歴史を知ることで、どのプロパティが重要であり、頻繁に使われてきたかを知ることもできます。

さらに、時代の流れによりCSSに追加される機能も増えていくので、Web制作者としては最新の情報をキャッチしておく必要があります。

CSSは、各ブラウザによって表示や対応が異なるため、ブラウザ間の互換性も意識しましょう。

これからも最新の情報を取り入れて、開発者にとってもユーザーにとっても良いWebサイトを作成しましょう。

＼プログラミングスクールを比較／