CSSとは - web-0127のブログ

CSS（Cascading Style Sheets）

文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

メリット

サイトの重さ軽減（SEO対策にも効果あり）
自由なレイアウト（文章構造を保ちながら可能）
編集が簡単（外部スタイルシートを利用することにより変更部分を見つけやすい）
読み込みが早い（ソースコードの行数が少なくなる）
高齢者や障害者も含めた誰もが情報を取得・発信できることに利用できる

デメリット

ブラウザによる表示の違い（特に Internet Explorer での表示に問題があります。

CSS デザインの美

現在、2011年09月時点でこの内容が、ベストかといえばそうではありません。
しかし、現在のようにCSSが普及するための礎を作ったサイトであることは、間違いありません。
何がそうさせたのか。「悟り」の境地をのぞいてみましょう。

Wordでスタイルを指定する

CSSの設定方法（記述する位置）

基本的には

（１）外部リンク
（２）エンベッド
（3）要素（タグ）に直接記述

の順で使用されことが多い。
反映される優先順位は、（3）（２）（１）の順でページ内部に記述されているCSSが優先されます。

記述してあるCSSは行数の最後に出現するものが、優先順位が高くなります。
実際には、「外部リンク」で設定することがほとんどです。

要素を使用して外部のCSSファイルを読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="style.css" media="screen, print">
</head>
<body>
<h1>About wine</h1>
<h2>Chianti Classico Riserva</h2>
<p>1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあります。<br>
15世紀から現在に至るまで、キャンティワインの造り手たちの先導者であり続けるマッツェイの歴史は、キャンティワインの歴史といっても過言ではありません。キャンティの最高峰と呼ばれるマッツェイは、もっぱら地元の人のために造られる量り売りを飲んでいたぼくにとって、憧れのワイナリーでした。当時はおじいちゃんになったら飲めるかなと思っていましたが、こうして日本で、ましてや自分の店のリストに加えることができるなんて驚きです。</p>
</body>
</html>

media属性は、携帯電話などに重い画像が表示されないように「PC画面用」と「印刷用」を記述します。

適用先（セレクタ）の指定方法

スタイルの適用先を示す部分のことを「セレクタ」と呼びます。

記述の仕方は、波括弧で改行をいれます。
これは、記述したものが視覚的に探しやすくする工夫です。

波括弧（なみかっこ）は、ブレース・ブレイス (brace) およびカーリーブラケット (curly bracket) ・カール (curl) とも言う。

　適用先　 {　表示方法の指定　}

　要素名　 {　プロパティ：値；　}

外部CSSファイルの記述

@charset "UTF-8";

body {
    background-color:#8fbc8b;
}
h1 {
    font-size:26px;
    color:#ffffff;
}
h2 {
    font-size:20px;
    color:white;
    padding-left:10px;
    background-color:#bc8f8f;
}
p {
    font-size:16px;
    line-height:2em;
    padding:10px;
    color:#333333;
    background-color:#f5f5dc;
}

style要素を使用してHTML文書にまとめて設定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>style要素</title>
<style>
<!--
h1 {
    color:darkcyan;
}
h3 {
    color:white;
    background-color:#778899;
}
p {
    color:#000080;
}
-->
</style>
</head>
<body>
<h1>style要素</h1>
<h3>style element</h3>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

style属性を使用してタグに直接設定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>style属性</title>
</head>
<body>
<h1 style="color:darkcyan">style属性</h1>
<p>この方法は<span  style="color:magenta">インラインスタイルシート</span>といいます。</p>
</body>
</html>