CSS 基礎知識 | Shinta's Site

Cascading Style Sheet の基礎知識

CSSは、HTML文書を OSやブラウザに左右されずに正確にレイアウトしたり、レイアウトを拡張するための機能です（実際は、どのブラウザも CSSの実装方法が異なるため完全に同一レイアウトにはなっていません）。また、文書とレイアウトの分離も目的の一つです。

書式

CSS は次の書式で記述します。

セレクタ { プロパティ: 値 }

セレクタは、スタイルを適用する対象のことで、通常 HTMLのタグが該当します。タグに対してのスタイル定義では、適用範囲が細かく設定できないためクラスセレクタとIDセレクタというものがあります。違いは、ページ内で複数の内容にスタイルを指定するクラスセレクタに対し、唯一の内容にスタイルを適用するIDセレクタとなります。プロパティは、CSS1 や CSS2 などの仕様書で定義されているもので、セレクタにどのような効果を与えるか指定するものです。プロパティごとに指定できる効果が決まっています。プロパティはセミコロン（;）で区切って複数指定することができます。詳細は http://www.w3.org/TR/REC-CSS1, http://www.w3.org/TR/REC-CSS2/ を参照。

HTML 文書内で利用するには、文書内に直接記述する方法とCSSファイルを読み込む方法があります。複数のページがあり、変更しやすさを考えると別ファイルにすると良いでしょう。

文書内に記述する場合：

<html>
<head>
<title>CSS Sample</title>
<style type="text/css">
.title1 {
  color: #207870;
  font-weight: bold;
}
</style>
</head>
 
<body>
<div align="center" class="title1">CSS Sample</div>
<body>
</html>

CSSファイルを読み込む場合：

<html>
<head>
<title>CSS Samplet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
<div align="center" class="title1">CSS Sample</div>
<body>
</html>

複数セレクタ

セレクタは、カンマ（,）で区切って複数指定することができます。

h1, h2, h3 { color: #e05682; }

セレクタの組み合わせ（入れ子になったセレクタに影響）

セレクタとセレクタを半角スペースで区切って記述すると、初めに指定したセレクタの範囲内にある最後のセレクタにのみにスタイルを適用させることができます。

p strong { color: #e05682; }
...
<p><strong>data</string></p>          <!-- 適用される -->
<span><strong>data</string></span>    <!-- 適用されない -->

スペース以外にもあるがスタイルが複雑になるのでちょっと意味だけ...
セレクタ1 > セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタの構造の中でセレクタ1 より1レベル下位にある場合のみ
セレクタ1 * セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタの構造の中でセレクタ1 より少なくとも2レベル下位にある場合
セレクタ1 + セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタ1 と同じレベルにあり、セレクタの構造の中でセレクタ1 の直後に来る場合

属性により制限を受けるセレクタ

セレクタ[属性の名前] {プロパティ:値; ...} と [] で属性を指定することで、指定した属性を持つセレクタのみにスタイルを適用させることができます。

input[type="text"] { background-color: #e05682; }  /* type属性が text */
img[alt~="help"] { border: 2px; }                  /* altに helpが含まれる */
...

<input type="text" name="user" value="">    <!-- 適用される -->
<img src="fish.jpg" alt="command help">     <!-- 適用される -->

クラスセレクタ（`セレクタ.クラス名`）

クラスセレクタは、ページ内で複数の内容にスタイルを指定するために使用します。セレクタにピリオド（.）とクラス名をつけて識別します。

p.caution { color: #e05682; }          /* 注意！ */

<p class="caution">※ここに注目してね。</p>

セレクタ名を指定せずに、ピリオド（.）とクラス名だけを記述した場合（あるいは、セレクタ名の代わりにアスタリスクを記述した場合）、すべての要素でそのスタイルを指定できます。

.caution { color: #e05682; }           /* 注意！ */

<p class="caution">※ここに注目してね。</p>
<div class="caution">※ここには注意してね。</div>

また、ひとつの要素に複数のクラスを適用させるには、半角スペースで区切りクラス名を列挙します。

.caution { color: #e05682; }          /* 注意！ */
.box { border: 1px solid #444444; }   /* 枠 */

<div class="caution box">※ここには注目してね。</div>

IDセレクタ（`セレクタ#ID名`）

IDセレクタは、ページ内で唯一の内容にスタイルを指定するために使用します。セレクタにシャープ（#）とID名をつけて識別します。

p#attention { color: #e05682; }

<p id="attention">※ここには注意してね。</p>

セレクタ名を指定せずに、シャープ（#）とID名だけを記述した場合、指定した要素のスタイルを指定できます。

#attention { color: #e05682; }        /* 注意！ */

<div id="caution">※ここには注意してね。</div>

単位

スタイルシートで使用する長さには、数値と単位を設定することで様々な指定ができます。単位には、「相対値」と「絶対値」の2種類があります。（絶対値とはいっても、モニタの解像度がWindows では96dpiで Macintoshでは72dpi なので、正確に同一のレイアウトにはなりません）

単位	説明
`mm`	ミリメートル (絶対値)
`cm`	センチメートル (絶対値)
`in`	インチ [ 1 inch = 2.54 cm] (絶対値)
`pt`	ポイント [ 1pt = 1/72in ] (絶対値)
`pc`	パイカ [ 1pc = 12 pt ] (絶対値)
`em`	フォントの高さを基準とした大きさ (相対値)
`ex`	英字小文字の「x」の高さを基準とした大きさ (相対値)
`px`	画面のピクセル (相対値)
`%`	画面サイズや親要素に対する割合 [パーセント] (相対値)

色の指定

スタイルシートで利用する色の指定にも、いくつかの方法があります。

単位	説明
`#rrggbb`	RGB を 16進数で指定 (16bit)
`#rgb`	RGB を 16進数で指定 (8bit)
`rgb(x,x,x)`	RGB を 10進数で指定 (xは、0-255の範囲の整数)
`rgb(x%,x%,x%)`	RGB をパーセントで指定 (xは、0.0-100.0 の範囲)

フォント・ファミリー

ページ上で使うフォントを指定できるが、OSによって標準で装備しているフォントが異なります。そこで、デフォルトでどのようなフォントを想定してサイトを作成すると良いのか？

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,sans-serif;
}

ブロックレベル要素とインライン要素

HTML要素のうち、body内で使用される要素の多くは、ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類されます。これにより、どの要素の内側にどの要素を配置できるかなどのルールが決まっています。

ブロックレベル要素

ブロックレベル要素は、見出し・段落など文書を構成する基本となる要素で、一つのブロック（親要素の内容幅全体に配置）として認識されます。ブラウザでの表示も一つのかたまりとして扱われ、改行を伴います。通常、横に他の要素を並べることができません。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、
<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

インライン要素

インライン要素は、主にブロックレベル要素の内容に用いられ文章の一部として扱われます。文章の一部分にだけ意味づけや書式設定を行い改行が入りません。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、
<label>、<q>、<s>、<samp>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

width, height は指定できず、上下に対する margin, padding はレイアウトに影響を及ぼしません。また、インライン要素は通常ブロックレベル要素を子孫要素として持つことができません。

インラインブロック要素

インライン要素のように改行は伴わないのですが、widthやheightを持っています。レイアウトに関してはブロックレベル要素、文法上はインライン要素といったぐあいになります。

<button>、<img>、<input>、<object>、<select>

ボックスモデル

スタイルシートでは、ボックス・モデルという要素の配置に関する定義があります。要素（テキストや画像など）に対して、パディング、ボーダー、マージンというプロパティを持っています。

padding: 10px 15px 10px 15px;  /* top, right, bottom, left, */
padding: 10px 15px;            /* top and bottom, right and left */
padding: 10px;                 /* top and bottom and right and left */

要素のサイズの計算は

.element_a {
　　width: 300px;
　　margin: 5px;
　　padding: 5px;
　　border: 1px solid #000000;
}

<divﾂꀀclass="element_a">要素</div>

300px (要素) + 5px (left マージン) + 5px (right マージン) + 5px (left パディング) + 5px (right パディング) + 1px (left ボーダー) + 1px (right ボーダー)= 322px (全体の幅の合計)

画面と印刷ページ

CSS では、ブラウザによる表示と印刷時の表示を変えることができます。 headタグ内に以下のようなタグを追加します。先に印刷用を書いてしまうと、印刷用スタイルシートが適用されないことがあるので順番を間違えないようにします。

<link rel="stylesheet" type="text/css" href="theme/display.css" media="all">
<link rel="stylesheet" type="text/css" href="theme/print.css" media="print">

スタイルシートはmedia属性を加えることで、ページを閲覧する環境によって使うスタイルシートを切り替えることができます。media="all"は全ての環境で適用され、media="print"は印刷するときに適用されます。他にもテレビ(tv)や携帯端末(handheld)などがあります。

では実際にどのような使い分けをするのかというと以下のようなことが挙げられます。

フォントのサイズ(font-size:10px)や色(color:#000000;)を変更
不要な部分を印刷されないように非表示(display:none;)
ページの横幅の調整

スタイルの優先順位

スタイルの設定で競合する場合、設定者／セレクタ／指定場所によって優先される順番が異なります。

設定者による優先順位

スタイルシートには、ページ制作者によって設定された「制作者スタイル」、閲覧者によって設定された「ユーザースタイル」、ブラウザ標準の「ブラウザスタイル」があります。

制作者スタイル - ページ制作者が、自分のサイトをデザインする際に設定するスタイルシートです。最も優先されるスタイルです。
ユーザースタイル - 閲覧者が、自分が見やすいように設定したスタイルシートです（ブラウザで設定可能）。!importantを指定することにより、閲覧者の設定を優先させることが可能です。
ブラウザスタイル - ブラウザに標準設定されたスタイルです。上記二つのスタイルで設定されていない場合、このスタイルが適用されます。（例えば、h1要素内のテキストを大きめのサイズで表示、strong要素内のテキストを太字で表示といった基本のスタイル。）

セレクタによる優先順位

セレクタの種類による優先順位は次のようになります。

IDセレクタ - ひとつの要素に対する指定
クラスセレクタ - グループ単位の指定
要素名 - 要素の種類単位の指定
*（全称セレクタ）- 全ての要素に指定

#caution { color: red; }           /* 注意！ */
.notice { color: blue; }
<div id="caution" class="notice">ここには注意してね！</div>

ここには注意してね！

※ IDセレクタが優先されている

設定場所による優先順位

外部スタイルシート、head要素内の指定、要素に直接指定とそれぞれ設定した場合の優先順位は次のようになります。

<html>
<head>
<title>スタイルの優先度</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
p { color: green; }
-->
</style>
</head>
<body>
<p style="color: red;">この文字の色は赤</p>
</body>
</html>

要素に直接指定（color: red）
head内の指定（color: green）
外部スタイルシートの指定（color: blue）

headタグ内でスタイルを設定した場合は最後に設定したほうが優先される。

<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { color: green; }
-->
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>この文字の色は青</p>
</body>
</html>

外部スタイルシートの指定（color: blue）
head内の指定（color: green）

優先順位の変更（!important）

通常は、上記の各項目で説明したルールでスタイル指定の優先順位が決められます。しかし、!important を指定することで設定を優先することができます。「プロパティ: 値」の後に半角スペースで区切り、!importanを配置します。これは「プロパティ: 値」ごとに指定する必要があります。ただし、パフォーマンスの低下や可読性の低下につながるので利用は控えた方が良いでしょう。

#my_id {
    margin: 10px !important;
    color: #ffffff !important;
}

CSS3 の Tips

背景画像の複数指定

body {
    background:
      url(../images/corner1.png) top right fixed no-repeat,
      url(../images/corner2.png) top left fixed no-repeat,
      url(../images/corner3.png) bottom left fixed no-repeat,
      url(../images/corner4.png) bottom right fixed no-repeat;
    background-color:#ffffff;
}

ユーザー環境に左右されないフォントの指定

True Type フォントを配置する事で、PCにフォントが入っていなくても想定したフォントで表示する事が出来ます。

@font-face {
    font-family: GaramondPremrPro;
    src: url('http://www.example.com/fonts/GaramondPremrPro.ttf');
}
h1 {
    font-family: GaramondPremrPro;
    font-size: 2.4em;
    letter-spacing: 2px;
    text-align: center;
}

影付き文字と色

右へ 3px、下へ 1px、半径 2pxのぼかし、色を薄いグレーにして h1 タグに対して設定します。RGBAは、RGBと濁り度合い(Opacity)を指定しています。各色は 0-255、濁りは 0.0-1.0の範囲で指定できます。

h1 {
    text-shadow: 3px 1px 2px rgba(0,0,0,.4);
}

Letter Pressを表現するには以下のように指定する事で実現できます。

h1 {
    text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #000000;
}

丸い角

div {
    border: 2px solid #444444;
    padding: 8px;
    background: #eeeeee;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    width: 550px;
}

ローテーション

要素を回転させる事が出来ます。

.my_text {
    display:block; 
    position:absolute;
    right:-5px;
    top:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

マルチ・カラム

３つのカラムで隙間をフォント 1.5倍分空け隙間を細い線で区切り場合、以下のように指定します。

#my_id {
    text-align: justify;
    -moz-column-count: 3;
    -moz-column-gap: 1.5em;
    -moz-column-rule: 1px solid #cccccc;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: 1px solid #cccccc;
}

メディアクエリ

ディスプレイやデバイスの状態により異なるスタイルを適用した際に利用します。

/* 表示エリアの幅が 800px 以下のときに適用 */
@media screen and (max-width: 800px) {
    .sample {
        background: #333333;
    }
}

/* 表示エリアの幅が 1024px 以上のときに適用 */
@media screen and (min-width: 1024px) {
    .sample {
        background: #666666;
    }
}

/* デバイスの幅が 480px 以下のときに適用 */
@media screen and (max-device-width: 480px) {
    .iphone {
        background: #888888;
    }
}

/* デバイスの解像度が２倍(Retina)のとき適用 */
@media only screen and (-Webkit-min-device-pixel-ratio: 2) {
    .sample {
        background-image: url(sample@2x.png);
    }
}

CSS Basic

Cascading Style Sheet の基礎知識

書式

複数セレクタ

セレクタの組み合わせ（入れ子になったセレクタに影響）

属性により制限を受けるセレクタ

クラスセレクタ （セレクタ.クラス名）

IDセレクタ （セレクタ#ID名）

単位

色の指定

フォント・ファミリー

ブロックレベル要素とインライン要素

ボックスモデル

画面と印刷ページ

スタイルの優先順位

CSS3 の Tips

メインメニュー

Languages

Web

Wizardry

Design

Trivia

Links

クラスセレクタ（`セレクタ.クラス名`）

IDセレクタ（`セレクタ#ID名`）