【初心者必見】CSS3って何?CSSとの違いやHTML5との関係を徹底解説

2024.01.03
CSS初心者入門

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


「独学でのプログラミング学習に苦戦していませんか?」

独学でのプログラミング学習の挫折率は9割以上と言われています。

プログラミングを身につけて、年収をUPさせたい
ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料を読んでみてください!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

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プロパティの指定は正しく解釈され、文字色は赤色で表示されるはずです。


「プログラミング学習に苦戦しているあなたへ」

独学でのプログラミング学習の挫折率は9割以上と言われています。

プログラミングを身につけて、年収をUPさせたい
ITエンジニアになって、働き方を変えたい
✔生活を変えたいけど、何からやればよいか分からない

と思っているあなたへ向けて、
挫折率9割に負けない「プログラミング学習必勝法」を無料でプレゼントします!

完全無料なので、悩む前に今すぐ下のバナーをクリックして資料をGETしましょう!

\簡単30秒/

下のバナーからLINE友だち追加をして、無料で限定資料をGET!

CSS3新プロパティの例

■角の丸い枠を作る

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

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

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

気軽に利用できるCSS3

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

まとめ

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

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

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5