CSSとは
CSSはCascading Style Sheetsの略で色や大きさ配置などWebサイトを作るうえでの主なデザインを定義する言語です。
CSSの構造は以下のような形で表されます。
selector{property: value;}
これはselectorのpropertyをvalueにするという意味です。
これではわかりづらいので例を出すと
h1{color:black;}
これはh1(selector)の文字の色(property)を黒(value)にするという意味を持っています。
CSSにはこういった事ができます。
CSSにはたくさんの数がありますがここでは実用的かつ基礎的なものを紹介します。
色に関するCSS
ここでは色に関するCSSを説明します。
色の表し方
まずは色の表し方について説明します。同じ色でも表し方は様々あります。
- カラーネームで表す方法
color:black;
これはカラーネームで表した黒色になります。
他の色を表すと以下のようになります
赤色はcolor:red;
緑色はcolor:green;
青色はcolor:blue;
白色はcolor:white;
表せることのできる色は約140種類と少ないです。
しかし、聞きなじみのあるものばかりのため普段使いや初めのころはとても便利です。
- 16進数で表す方法
color:#000000;
これは16進数で表した黒色になります。
1~9,A~Fの16進数を使い、初めの２つを赤色、真ん中の２つを緑色、終わりの２つを青色で色を表します。
例にすると以下のようになります。
#ff0000
#00ff00
#0000ff
#ffffff
表すことのできる色は全部で16,777,216色と非常に多いです。
表せる色の量が多い分使うのも大変です。
- RGB形式で表す方法
color:rgb(0%,0%,0%);
これはRGB形式で表した黒色になります。
（）の前にrgbと書くのが特徴です。初めが赤色、真ん中が緑色、終わりが青色を表します。
他の色を表すと以下のようになります。
rgb(100%,0%,0%)
rgb(0%,100%,0%)
rgb(0%,0%,100%)
rgb(100%,100%,100%)
表せることのできる色は16,777,216色です。
％での表し方ではなく以下のような表し方もできます。
color :rgb(255,255,255) 白色
他にも
「hsl」といった色を色相、彩度、明度の成分によって表現する方法や
「rgba」や「hsla」といった透明度を表す「a」が入った表現方法もあります。
色の要素
- color
h1{color:black;}
これは初めに例を出したものでh1の文字の色を黒にするというものです。
文字の色を変えたいときに使います。
- background-color
h1{background-color:black;}
これはh1の背景色を黒色にするというものです。
背景の色を変えたいときに使います。
CSSのボックスモデル
ボックスモデル
CSSの要素はBOXでできており以下のようになっております。
CONTENT BOX
ボックスの一番内側にあります。この中にテキストが入ります。
- width・・・CONTENT BOXの横幅を指定する
- height・・・CONTENT BOXの縦幅を指定する
BORDER
PADDINGの外側にあります。枠線を設定することができます。
枠線のデザインは以下のように設定します。
-
border-width・・・BORDERの太さを設定する
-
border-color・・・BORDERの色を設定する
-
border-style・・・BORDERのスタイルを設定する
-
border-radius・・・BORDERの角に丸みを設定する
PADDING
CONTENT BOXの外側にあります。
CONTENT BOXとBORDERの間の間隔を設定することができます。
MARGIN
BORDERの外側にあります。
MARGINを設定することでそれぞれのBOX同士に間隔を持たせることができます。
配置や並びに関するCSS
FLEXBOX
行や列にレイアウトするための方法です。
空間を柔軟に調整できるのが強みです。
設定は以下の通りに行います。
display:flex;
FLEXBOXでは軸の概念が生まれます。
横幅を主軸、縦幅を交差軸といいます。
flex-direction
主軸に対してどのように要素を配置するかを設定します。
- row
主軸に対して右方向に設定します。（デフォルト）
flex-direction:row;
- row-reverse
主軸に対して左方向に設定します。rowが右方向ですからその反対(reverse)の左ということです。
flex-direction:row-reverse;
- column
主軸に対して下方向に設定します。
flex-direction:column;
- column-reverse
主軸に対して上方向に設定します。columnが下ですからその反対(reverse)の左ということです。
flex-direction:column-reverse;
justify-content
- start
先頭に寄せて配置されます。（デフォルト）
justify-content:start;
- end
末尾に寄せて配置されます。
justify-content:end;
- center
中央に寄せて配置されます。
justify-content:center;
- space-between
左右にスペースがなく等しい間隔のスペースが間に作られます。
justify-content:space-between;
- space-around
左右にスペースがありますが間の間隔だけが等しく作られます。
justify-content:space-around;
- space-evenly
左右のスペースも間のスペースも等しい間隔で作られます
justify-content:space-evenly;
align-items
交差軸に対してどのように要素を配置するかを設定します。
- start
先頭に寄せて配置されます。（デフォルト）
align-items:start;
- end
末尾に寄せて配置されます。
align-items:end;
- center
中央に寄せて配置されます。
align-items:center;
まとめ
ここでは普段使いの多い「色」「ボックス」「フレックスボックス」について簡単にまとめました。
ここで紹介したものはほんの一部でまだまだたくさん存在します。
以下のサイトではCSSについてより詳しく書かれています。また、HTMLやJSといったほかの言語もあるので参考にしてください。
最後までご覧いただきありがとうございました。