OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Web制作におけるCSSで単位や値を使った設定まとめ

最終更新日:2018.1.7 Update!!
CSSではHTMLで定義した文書を、見やすくレイアウトなどを整えデザインを起こしていきます。サイズや色、アニメーションなど単位や値を使って設定しますが、いろんな指定方法が存在し、いまいち違いがわからないケースもあったりしますよね。そこで今回はCSSのコーディングでの値と単位についてまとめてみたいと思います。  
1.絶対単位と相対単位
主にサイズを指定するときなどに用いる単位において、絶対単位と相対単位というものが存在します。絶対単位とは、表示される環境において変動しない一律の単位を指します。絶対単位にはpxやmmなどがあります。単位は一律ですが環境によって依存されることになります。そして相対単位とは、ある条件や状況下によって変動する単位のことを指します。相対単位にはemや%などがあります。相対単位を使うと状況に合わせて調整することが可能になります。  
2. サイズの指定について
ボックスの大きさやフォントサイズ、ボーダーの太さ、マージンの幅やウィンドウサイズなど、CSSではあらゆる部分でのサイズを設定します。  
px 絶対単位:デバイススクリーン上の最小単位である1つのドットの大きさ
相対単位:画面サイズや基準となる親要素に対しての割合
em 相対単位:基準となる要素のフォントサイズ(要素間でサイズの継承がされる)
rem 相対単位:ルート要素のフォントサイズ(要素間でサイズの継承がない)
ex 相対単位:基準となる要素の小文字「x」の高さ
mm 絶対単位:mmを基準としたサイズ(ピクセル換算で約3.78px)
in 絶対単位:inchを基準としたサイズ(ピクセル換算で約96px)
pt 絶対単位:印刷物などで用いられるポイントを基準としたサイズ(ピクセル換算で約1.33px)
vw 相対単位:ビューポートの幅を基準とした割合
vh 相対単位:ビューポートの高さを基準とした割合
vmin 相対単位:ビューポートの短い方を基準とした割合 (portraitの場合は幅、landscapeの場合は高さが基準となる)
vmax 相対単位:ビューポートの長い方を基準とした割合 (portraitの場合は高さ、landscapeの場合は幅が基準となる)
 
3. カラーの指定について
 
#rrggbb RGBのカラー値を16進数で表記したもの (#000000 → 黒、#ffffff → 白、#ff0000 → 赤 など)
rgb RGBのカラー値をそれぞれ0から255の数値で表したもの (0,0,0 → 黒、255,255,255 → 白、255,0,0 → 赤 など)
rgba RGBの0から255で表したカラー値に透明度(alpha)の値を追加したもの (0,0,0,1.0 → 黒の完全不透明、0,0,0,0.5 → 黒の透明度50%、0,0,0,0.0 → 黒の完全透明=透明 など)
hsl 色相(H)・彩度(S)・輝度(L)をそれぞれ指定したもの (180,70%,40% → 彩度70%・輝度40%のシアン など)
hsla 色相(H)・彩度(S)・輝度(L)に透明度(alpha)の値を追加したもの (180,70%,40%,0.5 → 彩度70%・輝度40%・透明度50%のシアン など)
 
4. その他の指定について
 
s 1秒間の時間を表す単位
ms 1000分の1秒間(ミリ秒)の時間を表す単位(1000ms=1s)
deg 角度を表す単位で0から始まる数値で360(度)で一周する
dpi 解像度を表す単位で1インチあたりのドット数を示す(スクリーンや印刷物の解像度などに使用)
    このように、サイズや長さ、色や時間、角度などさまざまな数値を取り扱うことができます。それに伴って数多くの単位が登場しますので、ぜひ覚えて有効に活用していきたいですね。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram