Web制作におけるCSSで単位や値を使った設定まとめ
コーディング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インチあたりのドット数を示す（スクリーンや印刷物の解像度などに使用） |
このように、サイズや長さ、色や時間、角度などさまざまな数値を取り扱うことができます。それに伴って数多くの単位が登場しますので、ぜひ覚えて有効に活用していきたいですね。
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
