CSSの基礎

CSS(Cascading Style Sheet)はWebページのレイアウトを定義する技術としてW3C(World Wide Web Consortium)により1996年に勧告されました。HTML本来の「文書構造の定義」と、色やフォントサイズなどの「体裁の指定」とを分離させるべく考案されたものです。

【例　大見出しを16pt・赤、段落を青で表示する場合】

  • HTMLのみ

    HTML

    <h1> <font color="red" size="16"> 大見出し </font> </h1>
<p> <font color="blue"> これは段落です。</font> </p>

    HTMLでは文書構造の定義（h1要素、p要素など）と体裁の指定（font要素など）が混在しています。

  • HTML+CSS

    HTML

    <h1> 大見出し </h1>
<p> これは段落です。 </p>

    CSS

    h1 {
  color: red;
  size:16pt;
}
p {
  color:blue;
}

    HTML+CSSでは、HTMLの要素は文書構造の定義に使用するものに限定し、CSSで体裁の指定を行うことにより、文書構造と体裁を分離します。

また、文書構造の定義用の要素もブラウザによって体裁がついて表示されるものがあります。例えば、見出し（h1〜h6）要素で文字サイズや文字の太さが変更されたり、引用（blockquote）要素でインデントがかかったりします。これらは、ブラウザごとに大きさが異なったりするため、ブラウザにより見た目が違ってしまう一因となります。

CSSを使うことにより、インデントをかけるためにblockquote要素を使用するとか、レイアウトのために表（table）を使うといった、本来の目的と異なる使い方をする必要がなくなります。

CSSのメリット

CSSを利用するメリットとしては、以下のものがあげられます。

  • Web標準：　様々なブラウザへの対応が楽になる。（後述）
  • サイト管理:　複数個所の同じ書式やレイアウトをまとめて指定・変更できる。
  • データ削減:　複数のページに共通する書式やレイアウトを一つのデータにできる。
  • 表現力：　CSSでしか指定できない書式が指定できる。
  • SEO（Search Engine Optimization: 検索エンジン最適化）ができる。
  • デザインにCSSを使用しているブログのカスタマイズができる。

Web標準

Web標準（またはウェブスタンダード）は、Webにおける共通の取り決めです。今日では携帯電話などWebを見る手段が多様化し、PCでのブラウザも多種多様になり、個々の環境に対応したWebページを作るのは困難になっています。Web標準は、こうしたさまざまな環境に対応できるように設計されたもので、WebページもブラウザもWeb標準を満たすべきだという考え方が普及してきています。

Web標準には、構造化言語、プレゼンテーション言語、DOM(Document Object Model)、スクリプト言語などの種類があります。構造化言語としては、HTML4.01、HTML5、XHTML1.0、XMLなどがあげられ、プレゼンテーション言語としては、CSS1、CSS2、CSS3などがあげられます。近年では、HTMLとCSSの組み合わせでWebページを作成することが標準化されています。

この講義では、HTML5とCSS3の組み合わせを扱います。

ブラウザのCSS対応

CSSの対応は、ブラウザとそのバージョンごとに異なっています。「Can I use」はブラウザの対応状況を調べることができるサイトです。Can I useの後ろの空欄に、HTMLやCSSなどのキーワードを入力すると、各ブラウザでの対応状況を教えてくれます。横方向がブラウザの種類、縦方向がブラウザのバージョンを表しています。緑が対応、赤が非対応でグラデーションで表示されます。

【小課題】Can I use」のサイトを使って、以下のHTMLタグの対応状況を調べなさい。

  • 自分の知っているHTMLタグ
  • 「blink」
  • 「font」
  • 「section」

また、ブラウザによっては、Web標準に準拠した表示（標準準拠モード）と旧バージョンの表示（後方互換モード）の2種類の表示モードを持ったものがあります。EdgeやIEもその一つです。HTML文書の最初にDTD（Document Type Definition：文書型宣言）があるものはWeb標準に準拠した表示を、ないものは従来の表示を行います。CSSでページを作る際には、必ずDTDを入れてブラウザにWeb標準に準拠した表示をさせましょう。

この講義では、Chromeを使ってCSSを学習します。

CSSのためのHTML

W3Cでは、HTML4.01のタグをCSSとの組み合わせを考慮して、要素を推奨・非推奨・フレームの３種類に分類しています。CSSによるWebデザインをする際には、W3C推奨要素のみ使用します。属性にも非推奨なものがあるので注意しましょう。

　 推奨 非推奨 フレーム
ブロック要素 address, blockquote, div, dl, form, h1〜h6, hr, ol, p, pre, table, ul, fieldset, noscript dir, center, isindex, menu, xmp 　
インライン要素 a, acronym, abbr, b, bdo, big, br, button, cite, code, del, dfn, em, img, i, input, ins, kbd, label, map, object, q, samp, script, select, small, strong, sub, sup, span, textarea, tt, var, iframe basefont, font, s, strike, u 　
その他 html, head, body, title, meta, li, dd, dt, thead, tfoot, tbody, tr, td, th, caption, colgroup, col, link, base, param, applet, area, option, optgroup, legend plaintext frameset, frame, noframes

推奨要素のほとんどが文書構造の定義のものであることがわかります。

div、spanは、指定した範囲をブロック要素、インライン要素にするためのものであり、CSSと合わせて使用します（詳細は後述）。

また、共通属性として、以下のものが使われます（詳細は後述）。

id要素に固有の識別子をつけます。文書中に一箇所しか使えません。
class要素を分類する識別子をつけます。文書中の複数の要素で共有できます。
また、空白でしきった複数の識別子を記述することもできます。
styleスタイルシートによるスタイルを指定します。

HTML5では、推奨要素しか使われません。また、HTML5になって意味が変わったタグもあります。

【小課題】以下のHTMLタグについて調べなさい。

  • 「blink」
  • 「font」
  • 「section」

DTD（Document Type Definition： 文書型宣言）

DTDは、文書が基づいているルールを宣言します。HTML文書としては省略しても構いませんが、前述のとおり、CSSでウェブデザインをする際には、ブラウザをWeb標準での表示にするため必ずDTDを記述します。

HTML5のDTD

<!DOCTYPE html>

HTML4.01でのDTD【発展】

HTML4.01では３つのルールがありました。

HTML 4.01 厳密型DTD （非推奨要素・属性、フレームを含まない）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

もっとも厳密なルールにそって作られるHTML文書です。非推奨要素や非推奨属性を使用することができません。

HTML 4.01 移行型DTD （非推奨要素・属性を含む）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

非推奨要素や非推奨属性を使用することができますが、フレームに関する要素を使用することができません。

HTML 4.01 フレーム型DTD （非推奨要素・属性、フレームを含む）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

非推奨要素や非推奨属性に加えてフレームに関する要素を使用することができます。

したがって、HTML4.01でCSSを使う際には、DTDはHTML4.01厳密型（Strict）を記述します。

HTML推奨テンプレート

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>
</body>
</html>

Validチェック

また、Web標準を目指すのであれば、Validな（正しい）HTMLを記述すべきです。ValidなHTMLにはルールがいくつもあるのですが、いくつかポイントを紹介しておきます。

  • 見出しには大見出し(h1要素)から昇順でつける。間の数値を飛ばさない。また、ページ内にh1要素は一箇所しか使用しない。
  • img要素には必ずalt属性を付ける。

興味がある人はValidかどうかのチェックをしてくれるW3Cのバリデータもあるので調べてみてください。

css Zen Garden

CSSに関する有名なサイト「css Zen Garden」を紹介します。このサイトでは、このサイトのCSSを募集してデザインの優秀さを競えるようになっています。これは、同じHTMLのファイルに対して、異なったCSSを用いることでここまで表現が変わるということを示している良い例です。

日本語で読みたい人は、css Zen Garden(日本語訳)を見てください。

css Zen Gardenの歩き方

最初のページの右側のメニュー上部には、「select a design」という箇所があり、その下にはデザインの名前がついたリンクがあります。このリンクを辿ると異なったデザインになります。デザインが異なっても文書の中身が変わっていないことに着目してください。

css Zen Gardenのソース

最初のページの左上には、「download html file and css file」という箇所があり、「html file」と「css file」には各々のファイルに対するリンクがあります。「html file」をクリックすると、CSSの適用されていないHTML文書が表示されます。css fileをクリックすると、CSSファイルの中身が表示されます。

課題

css Zen Gardenに掲載されているWebページで自分の気に入ったページを一つ選択し、その理由を述べよ。

CSS

CSSリファレンス

Valid HTML 4.01 Strict

正当なCSSです!