【初心者入門】CSS3って何?CSSとの違いは?徹底解説!

2021.09.09

みなさんはCSSの学習をしていませんか?

今回の記事ではCSSとCSS3の違いを解説します!

CSS3とは

「CSS3」はCSSの最新版になります。

「Cascading Style Sheet(カスケーディング・スタイルシート)」の略であり、ウェブページの見栄えを定義する言語として広く使われています。
単に「スタイルシート」ととも呼ばれます。

ここでは、CSS3を使う上で覚えておくこと、旧バージョンとの違いは何なのかを要点をあげて説明します。

CSSバージョンの最新版

最初のCSSである「CSS1」の規格は、1996年に勧告されました。(仕様が確定ということです)

その後、仕様に改良を加えた「CSS2」が1998年、「CSS2.1」が2011年に勧告されています。その次の規格として2011年から策定が進んでいるのが「CSS3」です。一部勧告されていますが、全体はまだです。

「新しいCSS」ではなく、「便利な仕様が増えたCSS」

CSS3は、まったく新しいバージョンというわけではありません。従来のCSSと互換性があります。これまでのCSSに、新しく便利な仕様を加えた規格がCSS3です。CSS 2.1を中核とし、新たな機能の追加や改良を行っているものになります。基本的な文法(記述方法)に変化はほぼありませんから、従来のCSSで使用していた記述方法はそのままCSS3としても使えると考えて問題ありません。

従来の記述と混在が可能

1つのCSSファイルやソースの中で、新旧のCSSを混在させることが可能です。例えば、「CSS3の記述」と「CSS2.1の記述」を一緒に記述する等です。

従来の記述はそのまま使用可能なので、「CSS3で新しく追加されたプロパティを使いたい」という場合でも、既存部分は何も書き換える必要はありません。今使っているCSSの並びにCSS3の記述を追記するだけで使えます。

HTML5との利用が必須ではない

「HTML5+CSS3」のように表記されることがよくありますが、CSS3はHTML5と一緒に使わなければならないわけではありません。

例えば、HTML4.01で記述されているウェブページを、CSS3を使ってデザインすることもできます。あくまで実行環境が対応していれば、HTML5にこだわる必要はありません。

特に準備作業なしで使用可能

CSS3の仕様は、そのすべてが勧告されてわけではないですが、代表的な各ブラウザでのCSS3への対応はアップデートで順次進んでいます。

今では、Microsoft Edge, Firefox, Chrome, Safari, Operaなど多くのブラウザでCSS3の記述方法が使えます。ただし、各社で対応状況が違いますので、自身の使用したい機能が実装済みかどうかは調べる必要があります。


プログラミングスキルを身につけて、アプリケーションWEBサービスを作りたい方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

CSSの書き方に変更はない

CSS3のソースは、従来のCSSソースと何か異なるでしょうか? 結論から言えば、基本的な部分は何も違いません。自分の記述しているCSSソースが、CSS1なのかCSS2なのか、それともCSS2.1なのかを意識したことのある方は少ないのではないでしょうか。 なぜなら、CSSソースには「バージョンを示す記述」が存在しないからです。 以下のCSSソースは、p要素の文字色を赤色にするだけの簡単なCSSです。

[html]

p {
color: #ff0000;
}

[/html]

このソースは、CSS1とも言えますし、CSS2とも言えますし、CSS2.1とも言えますし、CSS3とも言えます。

W3Cが公開しているCSSの文法チェッカー「CSS Validator」などでチェックしてみれば、どのCSSレベルとして調べてもすべて「正当」だと判定されます。CSSには下位互換性があり、過去の記述方法がそのまま使えるためです。

CSS3未対応のブラウザでも、全部が無視されるわけではない

以下のCSSソースを見て下さい。

[html]

p {
color: #ff0000;
opacity: 0.5;
}

[/html]

ここでは、先ほどのCSSに加えて、opacityというプロパティを記述しています。opacityプロパティは透明度を指定するプロパティで、CSS3で新しく追加されました。したがって、上記は「CSS3ソース」ということになります。

しかし、opacityプロパティ以外の部分の記述は、先ほどと一切変わっていません。このように、「CSS3を使いたい」場合でも、単に「既存のソースにCSS3の記述を追記するだけ」で良いのです。

このように「CSS3に対応していないブラウザ」で上記のCSSを表示させた場合でも、全部のCSSソースが無視されることはありません。opacityプロパティの指定は無視されますが、colorプロパティの指定は正しく解釈され、文字色は赤色で表示されるはずです。


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎未経験からでも実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

CSS3新プロパティの例

■角の丸い枠を作る

ボックスの角を丸くしようと思うと、従来は画像を駆使するしかありませんでした。しかし、CSS3で追加されたborder-radiusプロパティを使えば、たった1行のソースでボックスの四隅を丸くできます。

■文字やボックスに影を付ける

何かに影を付けたい場合も、従来なら画像を駆使する必要がありました。しかし、CSS3では文字に影を付けるtext-shadowプロパティや、ボックスに影を付けるbox-shadowプロパティが追加されたため、簡単に影が付けられます。

気軽に利用できるCSS3

このように、今あるCSSソースの中にそのまま新しい記述を追記するだけでCSS3の機能を利用できるわけですから、とても気軽に利用できると言えるでしょう。今では多くのブラウザで表示可能ですから、ぜひ活用してみて下さい。

まとめ

初心者の方向けにCSSとCSS3の違いを紹介していきましたが、いかがでしたか?

CSSを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5