CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)の使い方や書き方を入門者向けに解説しています。

CSSとは

CSS (Cascading Style Sheet)とは、HTMLに代わって文書の視覚的効果を表すもので、HTML と組み合わせて使用します。従来、HTML は文章の構造（タイトルやヘッダーなど）と視覚的効果（フォントや色など）をタグやその属性で表してきました。

しかし、文章の構造とその表現方法は明確に分けた方が良いとの機運が高まり、HTML 4.01 strict や XHTML では文章の構造のみを表現するようになり、視覚的効果を表すタグや属性は廃止されました。HTMLに代わり文書のレイアウトなどを表すものとしてスタイルシートが使われます。

プロパティ

CSSのプロパティ一覧
プロパティ 説明
clip 表示範囲
color 文字の色
cursor マウスカーソルの形状
font フォント
font-family フォントのファミリ
font-size フォントのサイズ
font-style フォントのスタイル
font-variant フォントの大文字化
font-weight フォントの太さ
line-height 行の高さ
背景 background
background-color
background-image
background-repeat
background-attachment
background-position
境界線 border
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-bottom
border-left
border-width
border-bottom-width
border-left-width
border-style
border-style
border-bottom-style
border-left-style
border-color
border-bottom-color
border-left-color
改行・空白 line-break
word-break
white-space
国際化 direction
unicode-bidi
writing-mode
表示方法 display
Flexbox flex-direction
回り込み float
clear
高さ height
max-height
min-height
IME ime-mode
レイアウト layout-grid
layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char
リスト list-style
list-style-type
list-style-position
list-style-image
マージン margin
margin-top
margin-right
margin-bottom
margin-left
不透明度 opacity
アウトライン outline
outline-width
outline-style
outline-color
オーバーフロー overflow
overflow-x
overflow-y
パディング padding
padding-top
padding-right
padding-bottom
padding-left
改ページ page-break-after
page-break-before
page-break-inside
位置 position
top
right
bottom
left
表 border-collapse
border-spacing
caption-side
empty-cells
table-layout
テキスト text-indent
text-decoration
text-underline-position
letter-spacing
word-spacing
text-transform
white-space
テキスト揃え text-align
text-justify
text-indent
vertical-align
幅 width
max-width
min-width
可視性 visibility
Z軸 z-index
その他 content
W3C非標準 -webkit-touch-callout
-webkit-user-select
-moz-user-select
-ms-user-select
ruby-align
ruby-overhang
ruby-position

擬似要素

擬似要素 説明
::after 要素の仮想的な最後の子要素
::before 要素の仮想的な最初の子要素
::first-letter 要素の最初の文字
::first-line 要素の最初の行

スタイルシート(CSS)の優先順位

セレクタによる優先順位

セレクタには次の優先順位がある。

  1. IDセレクタ
  2. クラスセレクタ
  3. タイプセレクタ
  4. 全称セレクタ

設定者による優先順位

設定者には次の優先順位がある。

  1. 製作者スタイルシート
  2. ユーザスタイルシート
  3. デフォルトスタイルシート

製作者スタイルシートとは、ウェブサイトの製作者が閲覧者にどのように見せたいかを設定するスタイルシートである。HTML文書内でスタイルシートを定義する。ユーザスタイルシート及びデフォルトスタイルシートより優先される。

ユーザスタイルシートとは、ウェブサイトの閲覧者が自分の見やすいように表示するよう設定するスタイルシートである。ウェブブラウザでスタイルシートを指定する。デフォルトスタイルシートより優先される。

デフォルトスタイルシートとは、ウェブブラウザのデフォルトのスタイルシートである。