Web制作におけるCSSで単位や値を使った設定まとめ
最終更新日: 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インチあたりのドット数を示す(スクリーンや印刷物の解像度などに使用) |
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories