【CSS】プロパティ・値・単位の一覧 基礎〜応用

1. レイアウト

1.1 ボックスモデル

プロパティ値の例説明
width300px要素の幅を指定
height200px要素の高さを指定
margin10px要素の外側の余白を指定
padding5px要素の内側の余白を指定
box-sizingborder-boxcontent-box・・・要素の幅と高さにpaddingやborderが含まれない

border-box・・・要素の幅と高さにpadding、borderが含まれる

width,height

要素の横幅、高さを指定するプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

margin,padding

要素の外側、内側に余白をつけるためのプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

box-sizing

要素にborderやpaddingを含むかどうかを決めるプロパティです。
値にcontent-boxを設定した場合は元の要素にborderやpaddingが足されるため要素のサイズが変わり、
一方border-boxを設定した場合は元の要素の中にborderやpaddingを含むため要素のサイズが変わりません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.2 ポジショニング

プロパティ値の例説明
positionstatic, relative, absolute, fixed,sticky要素の配置方法を指定

static・・・デフォルト値で通常の配置
relative・・・通常の配置からの相対的な配置
absolute・・・親要素に対して配置
fixed・・・ビューポートに対して配置
sticky・・・定義された位置にビューポートが到達した際に固定
top, right, bottom, left10px要素の位置を指定
値はpx、%、またはauto(デフォルト値)など
floatleft, right要素を左または右に浮かせる
clearboth要素の両側にフロートされた要素がないようにする

position

要素の配置方法を決めるためのプロパティです。
同時に、具体的にどの位置に配置をさせるのか方向と数値を指定します。

position:static

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:relative

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:absolute

親要素にはposition:relative、子要素にposition:absoluteを指定することにより、
親要素を起点にしどこに配置するか決めることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

position:fixed

画面に対してどの位置に固定するかの指定が可能です。
下記のResult画面をスクロールしても常に位置が固定されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.


position: sticky

スクロール後に要素が特定の位置に表示されたときにその要素を固定することができます。
下記の例ではtop:0;と指定することで上から0pxの位置(=ページの一番上)になったときにメニューが固定されています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

float

要素を左(=left)もしくは右(=right)に浮かせることでレイアウトを作るためのプロパティです。
※通常一般的な横並べのレイアウトは、後述のFlexboxを使用します(2023年12月現在)

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

clear

floatが適用された要素に、別の要素を回りこませるかどうかの設定が可能です。
下記の例は「Lorem ipsum〜」の例文にclearプロパティを設定しておらず、結果float:rightが命令された「これはテキストです」の左に回りこんでいます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

clear:both を設定することで、回り込みを防ぐことができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.3 Flexbox

プロパティ値の例説明
displayflexFlexコンテナを指定
justify-contentflex-start, flex-end, center,
space-between, space-around
水平軸方向の要素の配置を指定
flex-start・・・開始部分
flex-end・・・終了部分
center・・・中央
space-between・・・均等に配置
space-around・・・均等に配置され、周囲にも余白をとる
align-itemsstretch, flex-start, flex-end, center, baseline垂直軸方向の要素の配置を指定
stretch・・・デフォルトで要素がコンテナに合わせて伸縮
flex-start・・・クロス軸の開始部分
flex-end・・・終了部分
center・・・中央
baseline・・・ベースライン(文字の基準線)
flex-directionrow, row-reverse, column, column-reverse要素の配置方向を指定
row・・・横方向(デフォルト)
column・・・縦方向
row-reverse・・・横方向逆順
column-reverse・・・縦方向逆順
flex-wrapnowrap, wrap, wrap-reverse要素の折り返し方法を指定
nowrap・・・折り返さない(デフォルト)
wrap・・・折り返す
wrap-reverse・・・逆順に折り返す

display:flex

flexコンテナを指定します。
子要素を直接囲む親要素に命令を出すことで、すべての子要素を水平方向に並ばせます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

justify-content

display:flexを指定した要素に対してこの命令を出すことで、水平方向の配置方法の設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

align-items

display:flexを指定した要素に対してこの命令を出すことで、垂直方向の配置方法の設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

1.4 Grid

Gridレイアウトについての詳細や事例はこちらを参考にしてください。

レイアウト作成のためのdisplay:gridを分かりやすく解説!【初・中級者向け】

2. タイポグラフィ

2.1 フォント

プロパティ値の例説明
font-family‘Arial’, sans-serifフォントの種類を指定
font-size16pxフォントサイズを指定
font-weightnormal, bold, bolder, lighter, 100, 200, …, 900フォントの太さを指定
normal・・・デフォルト、通常の太さ
bold・・・太字
bolder・・・より太い
lighter・・・より細い、
数値・・・100が最も細く、900が最も太い
line-height1.5行の高さ(行送り)を指定

font-family

HTML要素のフォント(書体)の種類を指定するためのプロパティです。
具体的なフォント名と一緒にフォントの総称名(ゴシック体や明朝体など)を記述することで、指定したフォントが閲覧環境に無い場合、該当の書体のデフォルトフォントを表示します。

複数のフォントを指定する場合、初めに書かれたものから順番に検索し、最初に見つかったものを表示します。
下記の例では、「Helvetica」が優先的に表示され、それがない場合は「Arial」、それもない場合はゴシック体(sans-serif)のデフォルトフォントが使用されます。

また、フォント名にスペースを含む場合は“”で囲んで記述します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-size

HTML要素の文字の大きさを指定するプロパティです。
数値にpxや%などの単位をつけて大きさを設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

font-weight

HTML要素の文字の太さを指定するプロパティです。
値にはboldなどのキーワード、もしくは400、800などの数値を設定します。数値は、数が大きいほど太いフォントになります。
太さのバリエーションがフォントによって異なるため、フォントごとに確認してから設定する必要があります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

line-height

文字1行分の高さ(行送り)を設定するためのプロパティです。
これを使うことにより、複数行の文章があった場合行と行の間隔の調整ができます。
行間の数値を直接指定するわけではないため注意しましょう。

値には「20px」など具体的なサイズのほかに、「2」のようにフォントサイズの何倍の行の高さにするかを指定することも可能です。
下記の例では文字のサイズが16pxに対し、行の高さを2倍=1行の高さが32pxとなっています。
結果、1行分の高さの行間がつくことになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.2 テキストスタイル

プロパティ値の例説明
text-alignleft, right, center, justifyテキストの水平方向の配置を指定
left・・・左寄せ
right・・・右寄せ
center・・・中央寄せ
justify・・・両端寄せ
text-decorationnone, underline, overline, line-throughテキストの装飾を指定
none・・・なし
underline・・・下線
overline・・・上線
line-through・・・中央線
text-transformnone, uppercase, lowercase, capitalizeテキストの大文字・小文字変換を指定
none・・・変換なし
uppercase・・・全て大文字
lowercase・・・全て小文字
capitalize・・・各単語の先頭を大文字

text-align

テキストの水平方向の配置を指定します。
親要素の左端・中央・右端・両端のどこに揃えるかの設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

text-decoration

下線など、テキストの装飾を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

text-transform

テキストの大文字・小文字を変換できるプロパティです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

2.3 テキスト効果

プロパティ値の例説明
letter-spacingnormal, 2px文字間のスペースを指定
normal・・・デフォルト(通常のスペース)
数値・・・指定したピクセル数分のスペースを設定
word-spacingnormal, 5px単語間のスペースを指定
normal・・・デフォルト(通常のスペース)
数値・・・指定したピクセル数分のスペースを設定
text-shadow2px 2px 4px #333テキストに影を付ける
x方向のずれ、y方向のずれ、ぼかしの半径、色を指定

letter-spacing

文字と文字の間のスペースの大きさを指定します。
normal、もしくは数値+pxや%、emなどの単位を使って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

word-spacing

スペースで区切られた単語と単語の間の大きさを指定します。
normal、もしくは数値+pxや%、emなどの単位を使って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

3. カラーと背景

3.1 カラー

プロパティ値の例説明
color#333テキストの色を指定

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

3.2 背景

プロパティ値の例説明
background-color#f0f0f0背景色を指定
background-imagenone, url(‘background.jpg’)背景画像を指定
none・・・デフォルト(背景画像なし)
url()・・・()の中に画像のパスを指定
background-sizeauto, cover, contain背景画像のサイズを指定
auto・・・デフォルト(画像のサイズそのまま)
cover・・・コンテナ全体に画像を表示
contain・・・画像全体を等倍で表示
background-positioncenter top, left bottom背景画像の位置を指定
値は水平位置と垂直位置を指定
background-repeatno-repeatrepeat・・・背景画像が縦方向および横方向に繰り返される(デフォルト)
repeat-x・・・背景画像を横方向に繰り返す
repeat-y・・・背景画像を縦方向に繰り返す
no-repeat・・・背景画像は繰り返されず、一度だけ表示

space・・・背景画像が横・縦方向に繰り返され、画像の周りに余白をつける(画像は見切れない)

round・・・背景画像が横・縦方向に繰り返され、画像の周りに余白をつけない(画像は見切れない)

background-color

要素に対して背景色の設定を行います。
同じ要素にbackground-imageを設定する場合、背景色は一番後ろに設定されます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-image

要素に対して背景画像の設定を行います。
後述のプロパティで背景画像の細かな設定を行います。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-size

背景画像のサイズを指定します。
決められたキーワードのほか、具体的な数値を指定することも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-position

背景画像の位置を指定します。
水平方向(left・center・right)と垂直方向(top・center・ bottom)の値をスペースで区切って設定します。具体的な数値を指定することも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

background-repeat

背景画像を繰り返し表示させるかどうかの設定ができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

4. ボーダー

4.1 ボーダーの設定

プロパティ値の例説明
border1px solid #cccボーダーの設定を指定
border-color#dddボーダーの色を指定
border-stylenone, dotted, dashed, solid,
double, groove, ridge, inset, outset
ボーダーのスタイルを指定
none・・・ボーダーなし
dotted・・・点線
dashed・・・破線
solid・・・実線
double・・・二重線
groove・・・浮き出るような立体効果
ridge・・・めくれ上がるような立体効果
inset・・・くぼむような立体効果
outset・・・浮き出るような立体効果
border-radius5pxボーダーの角を丸く設定

border

要素に枠線を引くためのプロパティです。
値に「太さ(=border-width)」「種類(=border-style)」「」の3つを設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

border-width、border-color、border-styleとプロパティを分けて設定することも可能です。
その際、必ずすべてのプロパティが適用されている状態にしましょう。どれか一つでも欠けてしまうと枠線の設定ができません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

border-radius

要素の角丸表現をするためのプロパティです。
例えば10pxと設定した場合、10pxの半径の円の角丸表現になります。
margin・paddingプロパティと同じような考え方で、値を1つ設定すると四角すべてを同じ角丸にでき、異なる値を入れることでそれぞれの角丸を調整も可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

4.2 ボックスシャドウ

プロパティ値の例説明
box-shadow3px 3px 5px #888888要素にボックスシャドウを追加
x方向のずれ、y方向のずれ、ぼかしの半径、色を指定
outline2px solid red要素のアウトラインを指定

box-shadow

要素にボックスシャドウを適用させるプロパティです。
値にx軸方向のずれ・Y軸方向のずれ・ぼかしの範囲系・色 の4つをスペースで区切って設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

outline

要素の外側の枠線(アウトライン)を設定するためのプロパティです。
borderプロパティとは異なり、要素のサイズを変更しません。
下記の例ではoutlineとborderプロパティの比較をしています。
それぞれのBOXをマウスオーバーすると、outlineは要素のサイズが変わらないのに対し、borderは要素のサイズも変化しています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

5. アニメーション

animation、transitionプロパティについての詳細や事例はこちらを参考にしてください。

CSSだけでOK! transition・animationで動き・アニメーションを実装する

6.変形

transformプロパティについての詳細や事例はこちらを参考にしてください。

移動・拡大・回転・3D表現もできる!transformプロパティを学習しよう【CSSアニメーション】

7.フィルター

7.1 Filter

プロパティ説明
filternoneフィルターなし。デフォルト値。
blur(n)画像をnピクセルぼかす。
brightness(n)画像の明るさをn倍に調整。
contrast(n)画像のコントラストをn倍に調整。
drop-shadow(x, y, blur, color)影を追加。xおよびyは影の位置、blurはぼかし量、colorは影の色。
grayscale(n)画像を白黒にする。nが0.0(デフォルト)なら白黒にせず、1.0なら完全に白黒にする。
hue-rotate(angle)画像の色相をangle度回転。
invert(n)画像の色を反転。nが1.0なら完全に反転。
opacity(n)画像の透明度をnに設定。
saturate(n)画像の彩度をn倍に調整。
sepia(n)画像をセピア色にする。nが1.0なら完全なセピア。

filter

画像にさまざまな効果を適用できるプロパティです。

blur(n)

画像のぼかし具合を設定します。blur(5px)のように数値を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

brightness(n)

画像の明るさを設定します。brightness(150%)(=1.5 でも可)のように数値で倍率を設定します。
100%(=0)を下回る数値を設定すると暗くすることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

contrast(n)

画像のコントラストを設定します。contrast(150%)(=1.5 でも可)のように数値で倍率を設定します。
100%(=0)を下回る数値を設定するとコントラストを下げることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

drop-shadow(x, y, blur, color)

画像にドロップシャドウをつけることができます。
drop-shadow()の中にX軸方向のずれ、Y軸方向のずれ、ぼかし、色をスペースで区切って指定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

grayscale(n)

画像のグレースケールを設定します。0〜100%(0〜1)の間で設定し、100%(=1)で完全なグレーにします。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

hue-rotate(angle)

画像の色相を変更させることができます。
hue-rotate(45deg)のように()には角度を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

invert(n)

画像の階調を変更することができるプロパティです。
0〜100%(0〜1)の間で設定し、100%(=1)で諧調が完全に反転します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

opacity(n)

画像の不透明度を変更することができるプロパティです。
0〜100%(0〜1)の間で設定し、0に近いほど透明度が高くなります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

saturate(n)

画像の彩度を変更することができるプロパティです。saturate(150%)(=1.5 でも可)のように数値で倍率を設定します。
100%(=0)を下回る数値を設定すると彩度を下げることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

sepia(n)

画像の色をセピアに変更することができるプロパティです。
0〜100%(0〜1)の間で設定し、100%(=1)で完全なセピアになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

8. CSSで使用される主な単位

単位説明
pxピクセル(画素)単位
emフォントサイズに対する相対単位
1em=親要素のフォントサイズ
remルート要素(通常は<html>要素)のフォントサイズに対する相対単位
cmセンチメートル
mmミリメートル
inインチ
ptポイント(1/72インチ)
pcパイカ(1/6インチ)
%パーセント
要素の寸法に対する相対単位
vwビューポートの幅に対する相対単位
1vwはビューポートの幅の1%
vhビューポートの高さに対する相対単位
1vhはビューポートの高さの1%
vminビューポートの幅と高さのうち、小さい方に対する相対単位
vmaxビューポートの幅と高さのうち、大きい方に対する相対単位
ex現在のフォントの”x”の高さに対する相対単位
ch“0”(ゼロ)文字の幅に対する相対単位

px、em、rem

pxが絶対単位なのに対し、emは親要素のフォントサイズ・remはルート要素のフォントサイズに対する相対単位となります。

下記の例ではhtml要素の文字サイズを62.5%としています。
これはブラウザのデフォルト文字サイズが16pxに設定されており、62.5%×16px=10pxとすることでrem単位の計算を簡単にしています。(こうすることで1rem=10pxとなります)

一方bodyの文字サイズを10pxとすることで、em指定する場合も計算が楽になります。(1em=10px)

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

%

親要素のサイズによって変化する相対単位です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

vw、vh

vw(=viewport width)とvh(=viewport height)は、ブラウザの表示領域に対する相対的な単位です。
1vwは表示領域の幅の1%に相当し、1vhは表示領域の高さの1%に相当します。
これらを使用することで、画面サイズに応じて要素のサイズを調整することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

vmin、vmax

vminはビューポートの幅(=vw)と高さ(=vh)のうち小さい方の値を採用し、vmaxは大きい方の値を採用します。
下記の例では.boxの縦横に50vminを設定することで、常にビューポートの幅と高さで小さい方の値の半分のサイズで可変するような設定になっています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】

    VIEW MORE
  • 【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

    VIEW MORE
  • コンテンツ内(要素内)でのスクロールを作成・制御する方法【overflowプロパティ】

    VIEW MORE

CONTACT

contact