9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!


みなさんは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の記述方法が使えます。ただし、各社で対応状況が違いますので、自身の使用したい機能が実装済みかどうかは調べる必要があります。

CSSの書き方に変更はない

CSS3のソースは、従来のCSSソースと何か異なるでしょうか?

結論から言えば、基本的な部分は何も違いません。自分の記述しているCSSソースが、CSS1なのかCSS2なのか、それともCSS2.1なのかを意識したことのある方は少ないのではないでしょうか。
なぜなら、CSSソースには「バージョンを示す記述」が存在しないからです。

以下のCSSソースは、p要素の文字色を赤色にするだけの簡単なCSSです。


p {
color: #ff0000;
}

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

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

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

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


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

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

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

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

CSS3新プロパティの例

■角の丸い枠を作る

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

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

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

気軽に利用できるCSS3

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

まとめ

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

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

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

*カウンセリング予約に面倒な電話の必要はございません!


おすすめの記事