css
スポンサーリンク

あらすじ

CSSとはどのような言語で、どのような働きをするものなのでしょうか。

今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。
 
具体的には

  • CSSとは
  • CSSの文法
  • CSSのバージョン
  • CSSプロパティの代表例

といった項目に分けてご紹介していきます。

 

スポンサーリンク

CSSとは

 

css

 

CSSとはCascading Style Sheet(カスケーディング・スタイル・シート)の略で1994年に初めて提唱された言語です。

 

HTML文書の構造を形作る言語に対し、CSSそのHTML文書に色付けやレイアウトなどを施すことのできる言語となっています。

 

HTMLに関してはこちらの記事をご覧ください

 

具体的にこのCSSで何ができるかというと

  • 文字色を変更
  • 文字の大きさの変更
  • フォントの変更
  • 背景画像を変更

など多岐に渡ってウェブページのレイアウトを変えることができます。

 

「CSSをHTMLに反映する方法」に関してはこちらの記事をご覧ください

 

CSSHTMLとセットで書くことで初めてその能力を発揮することができます。

 

スポンサーリンク

CSSの文法

 

css

 

ではCSSはどのようにして記載すればいいのでしょうか。

 

CSSの要素には大きく分けて、

  • セレクタ
  • プロパティ

の3種類があります。

 

具体例

p {color:green;}

pセレクタ
colorプロパティ
greenとなります。

 

セレクタ

 

セレクタとは、CSSを反映したい範囲を指定してあげる際に使う要素です。

 

例えば、

h1 {
  color: red;
}

 

といった文法であれば、h1セレクタになり、すべてのh1要素が赤色になります。

 

また、

  • p
  • h1
  • body

といった、もともとあるタグをセレクタとして選ぶ方法の他に、

 

  • class
  • id

で特定の部分にだけCSSを反映する方法もあります。

 

詳しくはこちらの記事をご覧ください

 

プロパティ

 

プロパティとは「何を反映させるか」を記載する箇所です。

 

例えば、

body {
  background-color: blue;
  text-align: center; 
}

 

といった場合、background-colortext-alignプロパティとなります。

 

その他にも

  • color(色の変更)
  • font-size(フォントの大きさの変更)
  • background-img(背景画像の変更)
  • border-width(ボーダーの幅)
  • height(要素の高さ)

といった種類があり、プロパティ数だけでもかなりの数があるので、細かいレイアウトの変更が可能になっています。

 

 

最後にですが、とはプロパティに具体的な数値を反映する際に記載する要素です。

 

例えば

header {
  color: yellow;
}

 

であれば、プロパティではcolorが選択されており、これに対してのyellowとなっています。

 

その他の例では

  • text-align: center
    centerが値となる
  • border-width: 5px
    5pxが値となる
  • font-weight: bold
    boldが値となる

 

といった感じで、とはプロパティに対して、「どうするか」を決める要素となります。

 

CSSのバージョン

 

 

CSSにはバージョンがあり、現在までで4つあります。

 

memo
正式にはCSSではバーションではなくlevelで表現します。

 

基本的に現在ではlevel 3であるCSS3が使用されています。

 

それぞれのlevelが使用されるようになるまでには

草案

勧告候補

勧告案

勧告

といったステップを踏んで、最終的な勧告で利用できるようになります。

 

それぞれのlevelの勧告年は

  • level 1(1996年)
  • level 2(1998年)
  • level 2 revision 1(2011年)

となっています。

 

level 3に関してはモジュールというものがあり、モジュールによってそれぞれの勧告年が違います。

 

モジュールには

  • CSS Color Module Level3(2018)
  • CSS Fonts Module Level3(2018)
  • Selectors Level 3(2018)

*この他にもたくさんあります。

といったものがあり、これらを総称してCSS3と呼びます。

 

  • level 4

level4とはlevel3に次ぐバージョンとして開発されたものです。

しかし、実際にCSS4といった規格があるわけではなく

  • Media Queries Level4
  • Slectors Level4

といったモジュール単位で存在しています。

 

CSSプロパティの代表例

 

css

 

すでに上記で何個か出ていますが、よくスタイルシートで使用されるプロパティをご紹介したいと思います。

 

具体的には

  • color
  • background-color
  • width
  • height
  • font-size

の5つに絞ってご紹介したいと思います。

 

color

 

colorプロパティはその名の通り、文字の色を変更する際に使用するプロパティです。

 

色を指定する方法として、値を

  • 色の名前で指定 (red, blue, greenなど)
  • カラーコードで指定(#0011ffなど)
  • rgb値による指定(0, 0, 255など)

といった方法で指定することができます.

 

background-color

 

background-colorプロパティは背景色を変更する際に使用するプロパティです。

色の値の指定方法はcolorプロパティと同じです。

 

width

 

widthプロパティは要素の幅を指定することができます。

 

には

  • px
  • cm
  • %

といった長さを表す要素で指定することができます。

 

height

 

widthプロパティが幅を指定することができるのに対し、heightプロパティは高さを指定することができます。

値はwidthと同じ方法で指定することができます。

 

font-size

 

font-sizeプロパティはフォントのサイズを変更したい時に有効です。

 

値の指定方法には

  • em
  • px
  • %

といった要素があります。

 

まとめ

 

いかがだったでしょうか。

CSSについて多少は理解していただいたのではないでしょうか。

 

また、HTMLとの大きな違いは、HTML文書単体でもウェブページを作成することが可能ですが、CSS単体では不可能です。

よって、CSSは必ずHTMLとセットで記載してあげる必要があります。

 

これらを理解することでウェブページの構成がわかってくるはずです。

 

スポンサーリンク

Twitterでフォローしよう