HTML入門 | HTML拡張 | HTMLスタイルシート(CSS)

Tags:

CSSとは?

CSSとはCascading Style Sheetsの略である。CSSは、HTML要素が各種メディアでどのように見えるかを定義する言語である。

HTML4以降、このようなすべての書式設定をHTML文書から分離できるようになった。

CSSの適用方法

HTML文書にCSSスタイルを適用する方法は次のとおりである。

  • インラインスタイル(Inline style)
  • 内部スタイルシート(Internal style sheet)
  • 外部スタイルシート(External style sheet)

インラインスタイル(Inline style)

インラインCSSとは、HTML要素内部でstyle属性を使用してCSSスタイルを適用する方法である。このインラインスタイルは、その要素だけにスタイルを適用できる。

<p style="color:green; text-decoration:underline">이 글은 녹색이고 밑줄이 있습니다.</p>

コード実行

内部スタイルシート(Internal style sheet)

内部CSSを利用する方法では、HTML文書の<head>タグ内に<style>タグを使用してスタイルを指定する。この内部スタイルシートは、そのHTML文書だけにスタイルを適用できる。

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

コード実行

外部スタイルシート(External style sheet)

外部CSSを利用する方法では、Webサイト全体のスタイルを1つのファイルで変更できる。スタイルを適用するすべてのWebページの<head>タグ内に<link>タグを使用して外部スタイルシートを含めればよい。

<link rel="stylesheet" href="/external_style_sheet.css">

コード実行

CSS適用の優先順位

上で説明したスタイル適用方法が混在して使用される場合、最終的に適用されるスタイルは次の順序で決定される。

  1. インラインCSS(Inline CSS)
  2. 内部 / 外部CSS
  3. Webブラウザのデフォルトスタイル

例えば、インラインスタイルが適用されたタグは、内部または外部スタイルシートに関係なく必ずインラインスタイルが適用される。また、内部スタイルシートと外部スタイルシートは、最後に適用されたスタイルシートが適用される。

より詳しい内容はCSSセレクタを参照すること。

CSSセレクタ(selector)

スタイルを適用するHTML要素を選択するために使用する代表的なセレクタは次のとおりである。

  • HTML要素セレクタ
  • IDセレクタ
  • クラス(class)セレクタ

HTML要素セレクタ

CSSを適用する対象としてHTML要素のタグ名を明示して選択できる。

p { color: red; font-size: 14px; }

上の例では、タグが<p>であるすべての要素に適用される。

IDセレクタ

IDセレクタは、CSSを適用する対象のIDが指定された要素を選択するときに使用する。このセレクタは、Webページに含まれる複数の要素の中から特定のIDに該当する要素だけを選択する。

このとき、選択する属性値の前にシャープ(#)を追加して記述する。

<style>
  #text { color: blue; font-weight: 600; }
</style>
...
<p id="text">이 문장은 파란색이고 두껍습니다.</p>

上の例では、idがtextであるすべての要素に適用される。

HTMLとCSSでは、1つのWebページに属する複数の要素に同じIDを使用しても大きな問題なく動作する。しかし、このように重複したIDでJavaScript作業を行うと、エラーが発生することがある。したがって、できるだけ1つのWebページに属するすべての要素のIDを異なるものにするか、クラスを使用するのがよい。

クラス(class)セレクタ

クラスセレクタは、あるグループの複数要素を一度に選択するときに使用する。このようなグループをクラス(class)と呼び、同じクラス名を持つ要素をすべて選択する。

このとき、選択する属性値の前にピリオド(.)を追加して記述する。

<style>
  .text { color: lime; text-decoration: overline; }
</style>
...
<p class="text">이 문장은 파란색이고 두껍습니다.</p>
<p>이 문장은 스타일 스타일이 적용되지 않았습니다.</p>
<p class="texts">이 문장도 파란색이고 두껍습니다.</p>

上の例では、classがtextであるすべての要素に適用される。