0%

Designデザインワークショップ

Posted:2016.04.18

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インチあたりのドット数を示す(スクリーンや印刷物の解像度などに使用)

 

 

このように、サイズや長さ、色や時間、角度などさまざまな数値を取り扱うことができます。それに伴って数多くの単位が登場しますので、ぜひ覚えて有効に活用していきたいですね。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】