CSSとは

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

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

CSSの指定方法

スタイルシートを指定するには、次の2つの方法があります。

HTML文書の中でスタイルシートを指定

HTML文書の中でスタイルシートを指定するには、次の2つの方法があります。

HTMLの各要素のstyle属性にスタイルシート属性を指定する

スタイルシートをHTMLの各要素のstyle属性に指定することができます。

<要素タイプ名 style="スタイルシート属性"> ... </要素タイプ名>

セミコロン記号で区切って複数のスタイルシート属性を指定することもできます。次はH1要素タイプにスタイルシートを指定した例です。

<h1 style="font-size:large; color:red">スタイルシート</h1>

style要素にセレクタを記述する

HTMLのstyle要素セレクタを記述すると、セレクタにマッチする要素にスタイルシートが適用される。HTMLのstyle要素にセレクタを記述する例を次に示す。

<html>
  <head>
    <title>CSS sample</title>
    <style type="text/css">
      h2 {
        font-size: large;
        color: red;
      }
    </style>
  </head>

上記の例の場合、このHTML文書に含まれるすべてのh2要素に対して、 font-size:largecolor:red の2つのスタイルシート属性が適用される。

スタイルシートを記述した外部ファイルを用意して、HTML文書の中で外部ファイルのURLを指定

スタイルシートを外部ファイルで定義した場合は、HTMLの LINK要素タイプでその外部ファイルのスタイルシートを参照するように指定します。

<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

外部ファイル stylesheet.css の中でスタイルシートの定義を行います。

h1 { font-size: large; color: red }

CSSのコメント

/* 」と「 */ 」に囲まれた部分はコメント(注釈)となる。コメントは複数行にわたってもよい。ただし、入れ子(ネスト)にすることはできない。

他の言語にあるような「 // 」や「 # 」といった単一行コメントは、CSSスタイルシートには無い。

コメントの使用例を次に示す。

h1 {
    background-color: red;    /* 背景は赤色 */
}

プロパティ

文字間隔と行間隔
分類 プロパティ
背景 background
background-color
background-image
background-repeat
background-attachment
background-position
境界 border
border-top
border-right
border-bottom
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
フォント font
font-style
font-variant
font-weight
font-size
line-height
font-family
高さ height
max-height
min-height
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
アウトライン 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
width
max-width
min-width
位置 position
top
right
bottom
left
テキストの回り込み float
clear
改行・空白文字 line-break
word-break
white-space
テキストの揃え方(水平・垂直) text-align
text-justify
text-indent
vertical-align
表(テーブル) border-collapse
border-spacing
caption-side
empty-cells
table-layout
国際化 direction
unicode-bidi
writing-mode
ユーザインタフェース cursor
ime-mode
テキスト text-indent
text-align
text-decoration
text-underline-position
letter-spacing
word-spacing
text-autospace
text-transform
white-space
その他 color
display
z-index
clip
visibility
content
opacity
W3C非標準のプロパティ -webkit-touch-callout
-webkit-user-select
-moz-user-select
-ms-user-select
ruby-align
ruby-overhang
ruby-position

擬似クラス

擬似クラスは、特例の外的要因や状態を持つ要素に対してスタイルを適用する。

擬似クラスは次の順番で指定する必要がある。

  1. :link
  2. :visited
  3. :hover
  4. :active
擬似クラス 説明
:first-child 親の最初の子供である要素
:link ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていない要素
:visited ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れている要素
:hover ホバーになった要素
:active アクティブになっている要素
:focus フォーカスを得た要素
:lang(lang) 言語が lang である要素

擬似要素

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

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

セレクタによる優先順位

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

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

設定者による優先順位

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

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

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

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

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

このエントリーをはてなブックマークに追加
スポンサーリンク