CSSの基本概要について分かりやすく説明していきます。

～CSSって何？～

【Cascading Styleb Sheets】の略称を＜CSS＞といいます。

HTMLのようなマークアップ言語です。

HTMLとの違いは、CSSはデザインの装飾のために作成されるということです。

～CSSとHTMLの違いは～

CSSは、HTMLやXHTMLで作成された文章にデザインを加える為の言葉です。

背景色や、文字色を加えたり、余白の調整、表示位置の調整をします。

スクリプトと合わせることでマウスの動きに装飾を変更させたり、表示・非表示が切り替わるタブ機能の実現や、場合に応じてアニメーションさせたりできます。

＊装飾の作成とはいえCSSソース自体はテキストデータ＊

CSSもHTMLと同様テキスト形式のデータです。

HTMLソース内にCSSソースを入れることもできますが、単独のCSSファイルに独立させている状態でHTMLから読み込む形式もよく使われています。

どちらにしても、基本的に＜どこに、どんな装飾を施すか＞というように、適応対象と適応内容の対応を１つずつ記述していく簡単な仕組みになっています。

基本の構造を取得すれば、記述は難しくないでしょう。

～CSSソースの書き方・方法～

CSSは、ソースを自らで記述することも可能ですし、作成ソフトを使用して作成することも出来ます。CSSはテキスト形式データなのでテキストデータの編集できるソフトウェアなら自由に作成できるといえます。

ですが、予備知識やスキルが何もないところから、１から記述するのは極めて困難です。

最初のうちは、CSS記述のサポートをしてくれる便利なソフトウェアを利用して、作成していくのが、簡単でしょう。

～CSS作成機能・CSSソース編集の補充機能～

CSS記述のサポート機能として、特に初心者に便利なのは、＜ダイアログからCSSソースを自動で出力してくれる機能＞といえます。

ただこの方法が慣れてきた時に、上記の方法では手間を感じるかもしれません。

その際便利になってくるのが、CSSソースの記述をリアルタイムに自動補充してくれる機能です。

～レスポンシブ　ウェブデザインって何？～

CSSに関して＜レスポンシブ　ウェブデザイン＞という用語を目にした事があるかとおもいますが、その＜レスポンシブ　ウェブデザイン＞とは、ウェブサイトをスマートフォンやタブレットなどの、モバイル端末対応によく使用されるCSSの記述方法です。

CSSの＜メディアクエリ＞という記述方法を使用すれば、閲覧者の環境に応じてスタイルを変えることが出来ます。例えば

 

＊閲覧者画面≫≫600～1,200pxなら2段階で表示

 

＊閲覧者画面≫≫1,200pxより広ければ3段階表示

 

＊閲覧者画面≫≫600pxより狭ければ段階なし表示

 

というようなデザインが可能です。上から順番に『タブレット用デザイン』『PC用デザイン』『スマートフォン用デザイン』となります。

＊HTMLは共通。CSSだけ切り替えによってモバイル端末、PC両対応に。

＜レスポンシブ　ウェブデザイン＞の最大メリットは、多くの環境に適したデザインをCSSだけで用意することが可能なので、HTMLは１つで済むという点です。

HTMLが１つで済むことによって閲覧環境ごとに同じコンテンツをいくつも用意する手間が省けます。環境ごとに異なっていくURLにする必要のなく、誰に向けても統一したURLを紹介するだけになります。

～CSS3・CSS4って何？～

CSSの後に数字がついている＜CSS3＞や＜CSS4＞という名称も目にしたことがあるかと思いますが、それらについて簡単に説明します。

＊CSS　バージョン

CSSの仕様にはバージョン(別名;レベル)のような番号があります。

≫≫CSS2.1　CSS3　CSS4のように、＜CSS＞数値を加えて表します。

HTMLと同様、CSSの仕様も段階的に公表され、最初の成稿から最終確定の勧告までにいくつかステップがあります。

＊CSS3・CSS4という単一での規格は無い

CSS3以降は使用が部分単位で策定される方針に変更された為、＜CSS3＞や＜CSS4＞とういう単一の規格はありません。

例えるなら、「CSS　Color Module Level 3」や「CSS　Fonts Module Level 3」のように、機能単位で仕様が分かれおり、それらの総称して＜CSS3＞と呼びます。

～まとめ～

ここまでCSSの概要を紹介してきましたが、どうでしたか？

CSSの基本的構造・書き方などについては、別ページで紹介して行きますのでそちらも見て参考にしていただければ嬉しく思います。ここまでお読みいただきありがとうございました。