【CSSリファレンス】プロパティ詳細説明

12月更新・前月(11月)の人気記事トップ10 12/07/2023

【CSSリファレンス】プロパティ詳細説明

Posted on 2009-09-01
Last updated on 2016-06-11

CSSプロパティの詳細についての解説です。

CSSとは「Cascading Style Sheets」の略で、W3C(World Wide Web Consortium)が勧告している構造と修飾を分離するために提唱された仕様の一つです。【HTMLリファレンス】HTML等のWebページをCSS(スタイルシート)を用いてそのデザインを指示します。*W3Cとは世界のホームページの規格を策定している機関です。CSSのバージョンは複数あり、現在CSS1、CSS2、開発中のCSS3があります。

スタイルシート(CSS)の定義

基本的な定義方法は、セレクタ(属性：値)と記述します。例えば、p要素に文字色青を設定する場合は以下のように記述します。


p {
  color: #0000ff;
}

また、１つのセレクタに複数の属性を定義することもできます。属性と属性の区切りには「；」を使用します。例えばp要素に文字色とフォントサイズを設定する場合は以下のように記述します。


p {
  color: #0000ff; /*文字の色を青にする*/
  font-size: 1.5em; /*フォントサイズを1.5倍にする*/
}

途中で入力した半角スペースや改行、タブはブラウザには反映されませんので、後で見たときにわかりやすい記述にするとよいでしょう。コメントを記述するのもよい方法です。CSSでのコメントは「/*」「*/」を使用し間にコメントを記述します。また、最後に設定した属性には区切りの「；」を記述する必要はありませんが、記述もれをなくすために常に記述するクセをつけると良いと思います。

複数設定

同じスタイルを複数のセレクタに設定：セレクタ名を「,」で区切ります。


h1,h2 {
  color: #0000ff;
}

要素(HTML内)に複数のセレクタを設定：セレクタ名を「スペース」で区切ります。

CSS


.mojicolor {
  color: #0000ff;
}
.mojisize {
  font-size: 1.5em;
}

HTML


<p class="mojicolor mojisize">

セレクタ

基本セレクタdiv要素やp要素h1要素等。例えば、p要素に文字色青を設定した場合、HTML文書内すべてに記述されているp要素に反映され、青色で表示されます。


p {
  color: #0000ff;
}

IDセレクタ：ID名を定義します。定義方法は、ID名の前に「#」を付け、#ID名｛属性：値｝もしくは、基本セレクタ名#ID名｛属性：値｝と記述します。(基本セレクタ名と組み合わせて定義した場合は、組み合わせた要素に対してのみ有効です。)定義したIDは、1つのHTML文書内で1回しか使用できません。

CSS


#font-bule {
  color: #0000ff;
}

HTML


<p id="font-bule">

CLASSセレクタ：CLASS名を定義します。定義方法は、CLASS名の前に「.」を付け、.CLASS名｛属性：値｝もしくは、基本セレクタ名.CLASS名｛属性：値｝と記述します。(基本セレクタ名と組み合わせて定義した場合は、組み合わせた要素に対してのみ有効です。)定義したCLASSは複数の要素に使用することが可能です。

CSS


.back-bule {
  background-color: #0000ff;
}

HTML


<p class="back-bule">

擬似クラス：a要素等、文章の設定とは関係のない要素を設定します。定義方法は既に決められている予約語を組み合わせます。a要素には4つの予約語があります。

link：HTML文書内のa要素で設定しているリンク先を、まだ訪れていない(キャッシュが残っていない)場合のスタイルを設定します。


a:link {
  color: #008000;
}

visited：HTML文書内のa要素で設定しているリンク先を、訪れている(キャッシュが残っている)場合のスタイルを設定します。


a:visited {
  color: #ffff00;
}

hover：HTML文書内のa要素で設定しているリンク先に、カーソルをのせている場合のスタイルを設定します。


a:hover {
  color: #ff0000;
}

active：HTML文書内のa要素で設定しているリンク先を、クリックしている場合のスタイルを設定します。


a:active {
  color: #0000ff;
}

これらの設定を１つのCSSに記述する場合は上記の順番で定義をします。

HTML内での定義

CSSをHTML文書内で使用するにはhead要素の間にmeta要素でスタイルシートの種類を定義します。


<meta http-equiv="Content-Style-Type" content="text/css">

CSSの使い方

link要素を使用：HTML文書とは別に設定した外部スタイルシート(拡張子が「.CSS」の文書)を定義します。同じCSS文書を複数のHTML文書で共有できるので、すべてのスタイルを統一させる等、デザインを簡単に管理できます。


<link rel="stylesheet" href="sample.css">
<link rel="alternate stylesheet" href="alternate_sample.css">

style要素を使用1：１つのHTML文書内だけで使用するスタイルの設定等で使用します。style要素に対応していないブラウザで表示した場合、記述した内容が表示されてしまうため、コメント「」でくくって記述するとよいでしょう。


<head>
<style>
<!--
p {
  color: blue;
  font-size: 100%;
}
-->
</style>
</head>

style要素を使用2：インラインCSSと呼ばれ、HTML文書内の一部にだけスタイルの設定等します。


<p style="color: blue; font-size: 100%;">

【CSSリファレンス】cursor 【CSSリファレンス】outline