常用CSS属性値

CSSでよく使われる属性値を整理しました.

カラー(Color)

cssで色を表す方法は、色名で表す方法、RGBの色値で表す方法、16進数の色値で表す方法の3つがあります.

色名で表す

標準色名を入力して表示します.

{
  color:black;
}

RGB色の値として表示

RGB範囲0～255の数字の組み合わせの色表現.

{
  color:rgb(0,0,255);
}

16進数で表示

これは16進数で表される色の表現です.

{
  color:#0000FF
}

背景(background)

cssバックグラウンドショートカットプロパティでは、色、画像、原点、サイズ、繰り返しなど、さまざまなバックグラウンドスタイルを同時に指定できます.

background-color

background-colorこの要素の背景色を設定します.

background-image

background-imagは、その要素の背景となる画像を設定します.

background-size

background-size要素の背景画像のサイズを設定します.
属性値にはcontain、cover、auto、直接入力長さ値、パーセンテージ入力が含まれます.

テキストの整列

text-align

text-alignは、ブロック要素またはテーブルのセルボックスの水平位置を設定します.
属性値にはstart、end、left、right、center、previdenceなどがあります.

フォント(font)

css fontプロパティは複数ありますが、ここではfont-family、font-weight、font-sizeの3種類しか紹介しません.

font-family

font-familyプロパティを使用すると、選択した要素の優先順位をfontファミリー名と汎用ファミリー名に指定できます.
font-familyは1つのフォントしか設定できません.複数のフォントを同時に設定することもできます.
font-font-familyを使用する場合、フォントの名前が1つ以上の単語を使用する場合は、複数のフォントをリストするときにカンマで区切る引用符で囲む必要があります.

font-weight

font-weightプロパティは、テキストの太さを設定します.

font-size

font-sizeプロパティは、テキストのサイズを設定します.
サイズを指定する方法は、絶対サイズと相対サイズの2つです.

絶対サイズ

[絶対サイズ](Absolute Size)テキストのサイズを指定したサイズに設定します.
つまり、すべてのWebブラウザで同じサイズで表示されます.
単位はpx,ptなどである.
px(ピクセル):スクリーンピクセルを基準とした絶対サイズ.
pt(点数):点数サイズの絶対サイズを表します.

相対サイズ

相対サイズは、テキストサイズが同じように変化する方法です.
単位は%,em,rem,vw,vhなどである.
%:デフォルトのサイズをパーセントで100%に設定し、相対的なサイズを設定します.
Em:フォントのデフォルトサイズを1 emに設定し、相対サイズを設定します.
rem:htmlのフォントサイズを1 remに設定し、相対サイズを設定します.
vw(Viewport Width):ブラウザの幅の値の1パーセント.すなわち、1 vwはビューポート幅の1%に等しい.
vh(Viewport Height):ブラウザの高さ値の1パーセント.すなわち、1 vhはビューポートの高さの1%に等しい.
反応型サイトが増えるにつれて、絶対単位より相対単位を多く使うようになった.