css についてtieo.jpn.org/tieo/bfc_pwi/applied/redume/no12.pdfcss でネストを行...

Web 講習会レジュメ(applied) 平成１９年１０月１０日

Ｎｏ．１２ CSS について作成者：池田大樹

BF 委員会 Web ページ URL http://www.sgu.ac.jp/bfc/

連絡先：広報部 Web 担当 [email protected]

1

CSS について

✓スタイルシート（CSS）とは CSS とは「Cascading Style Sheets」の略です。スタイルシート=CSS というイメージが

ありますが，これは違います。 CSS はスタイルシート言語の１つであるだけで，スタイルシートといっても実は様々な

言語があります。

スタイルシート言語は，標準のもので，

✓CSS（Cascading Style Sheets） ✓DSSSL（Document Style Semantics and Specification Language）;文書スタイル意味

指定言語

✓XSL（Extensible Stylesheet Language）;拡張可能スタイルシート言語 ✓XSLT（XSL Transformations） ✓XSLFO（Extensible Stylesheet Language Formatting Objects）

非標準だと， JSS（JavaScript Style Sheets）ただし，Netscape Navigator 4.x 系列のみ対応となっています。

出典：ウィキペディア http://ja.wikipedia.org/wiki/

ただ，スタイルシートで最も普及率があるのが CSS のため，一般的にスタイルシートというと，CSS をイメージしてしまいます。

✓なぜスタイルシートが必要なのか？ HTMLはそもそも，デザインを装飾するという機能は本来持っていません。そこでHTML

を補う目的でデザインを指定するスタイルシートが誕生しました。 W3C は HTML でデザインをする際，スタイルシートで装飾するように強く勧告しまし

た。

そんなのシカッティングしておけばいいじゃんと思うかもしれませんが，実は私，皆さ

んが使用している HTML の中には W3C が推奨していない，非推奨のものが数多くあります。





2

非推奨ということは，いずれ廃止される可能性があるということです。

廃止される可能性がある（非推奨の）タグの代表例をあげると，

font の後に続く size,color,face などがあります。font 自体は非推奨ではありませんが，その後に続くものは非推奨となっています。また basefont は全てが非推奨。また table などで使われる align も非推奨となっています。つまり非推奨のものは，タグで書くのではなく，CSS などスタイルシートを使用して記

述しなさいということです。ただ，現在いつ廃止されるというような明確な情報はありま

せん。

✓CSS をどんな時に使うのか？

講習会の Web ページ，シラバスを見るとこのようになっています。

これはテーブルタグを使用していますが，左側のセルは背景が「#006633」，文字サイズが「11pt」，文字色は「#FFFFFF」，「太字」設定，横位置が「center」，縦位置が「middle」，横幅「165px」と設定してあります。

一方右側のセルは背景が「#99FF66」，文字サイズが標準の「80%」，文字色は「#000000」，横位置は「left」設定，縦位置は「top」設定，横幅「465px」と設定されています。





3

さて，これを HTML だけで打っていくと，結構面倒です。

[左側] HTML だと 11pt と指示できないので 4 と指定

[右側] 80%も HTML では指示できないので 2 と指定。

もし 10 行あれば，これを 10 回繰り返さなければいけません。最悪の場合コピーすればいいのですが，後で見たときタグがやたらと長くて，見にくくな

ります。

しかしこれを CSS でデザインすると，

[左側] ○○

[右側] △△

これで終わりです。もちろん，別に CSS を用意していますので，そちらに書くことになりますが，例え 10 行あったとしても 1 回記述するだけで，何回でも使えます。





4

✓CSS ってどこに書くの？とりあえず１つだけ教えます CSS を HTML に反映させる，つまり組み込み方は大きく分けて３つあります。ただ，記

述方法を教えるので，まず一番簡単でポピュラーな方法を教えます。

新しくメモ帳を開きます。そこに書くだけです。書く内容はこれから学びます。 ezHTML で作ってみましょう。

新規作成のアイコンの右側に「▼」があると思うので，そこをクリック。

「CSS」を選択します。

何も書かれていないものが出てきたと

思います。

後は，これから学ぶ方法を入力していくだけです。HTML のときのように，などの前置きは一切いりません。１行目から書いちゃって下さい。そして保存します。保存する際は○○○.css と保存して下さい。拡張子は「.css」です。

○○○は HTML の時と同じルールです。

ただし！これだけではダメです。今度はスタイルシートを反映させようと思う HTML を開いてください。

を～内に必ず書き入れてください。 ○○○は反映させたいCSSの名前です。





5

✓CSS の記述方法

さて，どのように CSS を書けばいいのかというと，簡単です。

例えば次のように書いたとします。

h1{ fontsize:12pt }と指定したとします。すると，HTML の～のものは全てフォントの大きさが 12pt となります。

もっと設定すると

h1{ fontsize:18pt; color: #000000; }

ちなみに次の宣言をするときは「;」をつけると書きました。上の例の場合「color:#000000」の後は宣言がないので，「;」はいらないんじゃないの？と思います。これはあっても，なくても大丈夫です。ただ，後で書き足すときにあったほうが便利ということで一般的には書

きます。

ちなみに空白や改行は無視されるので，HTML の時同様，自分の見やすいように作成しましょう。

これが基本の書き方です。ちょっと専門用語の勉強をしましょう。上の

「h1」の部分を「要素名」といいます。「fontsize」や「color」のことを「プロパティ」といい，「18pt」や「#000000」のことを「値」といいます。

つまり基本的な書き方は

要素名{ プロパティ:値; プロパティ:値; }

ということになります。

～のものは全て，次の設定にしますっていう宣言

フォントサイズは 18pt にして，色は#000000 にしますっていう宣言。なお，次の宣言をする場合は宣言の末尾に必ず「;」セミコロンをつける。





6

✓継承（inheritance）

皆さんもHTMLでやったことがあるのではないでしょうか？例えばこのような文書を作りたいとします。

するとタグは

となります。

○がついている～はの中にあります。こういうのを入れ子，専門用語だと「ネスト」と言います。





7

CSS でネストを行った場合，継承されます。例えば，CSS をこのように作ったとしましょう。

そして，HTML はこう記述します。

これをブラウザで表示すると，

この場合，本来であれば，色を２色設定しているので（最初のh1のところの blueと strong の red），ハミルトンの部分には両方の色の設定がされるはずだが，strong の red が優先されます。





8

✓属性を２つ以上使いたい。でも色や文字サイズを変えたい，そういうときに使うのが ID

属性とクラス属性です。

★ID 属性について例えば，次のようなページを作りたいとしましょう。

全て h1 で作成。マクラーレン・メルセデスは文字サイズ「150%」，文字色「#A7A7A7」スクーデリア・フェラーリは文字サイズ「125%」，文字色「#FF0000」 IMG・ルノーは文字サイズ「100%」，文字色「#0000FF」

CSS は次のように作成します。

要素名の後に#をつけます。その後に ID をつけてあげます。つまり「h1#mclaren」ならば「maclaren」が ID となります。そして HTML は次のように作成します。

なお，ID はアルファベットから始めなければいけません。数字から始めると，反映されなくなりま

す。また「_」や「:」，「.」なども使えません。

HTML はこうなります。

の部分に ID を記述することで，ID の設定のみ反映されます。





9

ただし，ID というのは１回しか使えません。

このように重複して ID を使うと，一応対応はしてくれますが，CSS の本来の使用方法ではありませんので，やめましょう。

それを解決するのがクラス属性です。次はこのようなページを作りたいとしましょう。

１位：ルイス・ハミルトンはフォントサイズ

「150%」，文字色は「#FF0000」，クラス名は「first」

２位：フェルナンド・アロンソはフォントサイ

ズ「125%」，文字色は「#0000FF」，クラス名は「second」

３位：キミ・ライコネンはフォントサイズ

「100%」，文字色は「#00FF00」クラス名は「third」

４位：フェリッペ・マッサ，５位：ジェンソン・バトンはフォントサイズ「80%」，文字色は「#000000」，クラス名は「other」

マクラーレンはフォントサイズ「80%」，文字色は「#A7A7A7」，クラス名は「mclaren」

フェラーリはフォントサイズ「80%」，文字色は「#FF0000」，クラス名は「ferrari」

ホンダはフォントサイズ「80%」，文字色は「#888888」，クラス名は「honda」





10

このような場合，CSS は次の通りになります。

要素名の後に.（ドット）をつけます。その後にクラス名をつけてあげます。つまり「h1.first」ならば「first」が ID となります。そして HTML は次のように作成します。

なお，ID はアルファベットから始めなければいけません。数字から始めると，反映されなくなりま

す。また「_」や「:」，「.」なども使えません。

HTML はこうなります。

どうでしょうか？CSS の基本的な書き方は理解していただけたでしょうか？

続いて，前に１つしか教えていませんでしたが，組み込み方です。





11

✓CSS ってどこに書くの？今度は全部教えます CSS を HTML に反映させる，つまり組み込み方は大きく分けて３つあると書きました。

どの方法をとっても，先ほどやった記述方法にほとんど変わりはありません。

１．インライン記述方式

インライン記述方式とは，タグのようにその場でどんどん入力していくというものです。

先ほどやった記述方法とは少し変わります。

この～～～～～～～～～～の部分に「fontsize:100%;color: #888888」と書いていきます。 { }は不要です。{ }の中に書いていたものを，今度はの～～～～～～～～～～の部分に書き入れます。

なお，～内にはを書き入れてください。

なお，この方法はクラスや ID は使えません。（多分）





12

２．ヘッダ記述方式

ヘッダ記述方式とは～の中に全部まとめて書いてしまいましょうやっていう組み込み方です。

書き方はほとんど変わりません。～内に

～～～～～～～～～～～と書くだけです。

～～～～～～～～～～～は一番最初に学んだ方法と同じ方法で書きます。





13

３．外部記述方式

外部記述方式は今までずっと学んでいた方法です。外部に別に CSS ファイルを作り，そこへリンクを貼ります。

リンクの貼り方は

です。

この方法が一番簡単で，ポピュラー，そして最大限に CSS の力を発揮できると思います。

ちなみに CSS は高度なデザインをすることが可能ですが，全てのブラウザで同じように表示されるわけではありません。あまりにこだわったデザインはブラウザによっては，問

題を起こすことがありますので，注意しましょう。

またまたちなみに，CSS の基本的な書き方は要素名{プロパティ：値;}と教えました。

しかし，クラスや IDのように要素名の後に値を書くことがあります。こういうことから，要素名は「セレクタ」というのが本来正しいです。

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

が正しい表現です。

またまたちなみにですが，要素名って何が使えるのか？というと，HTML タグの要素名ならほとんど使えます。

，，，，，

，などなど。またも要素名ですので，ページ全体の文字サイズを設定するときなどは便利です。





14

✓CSS のプロパティと値 CSS の基本的な書き方を覚えましたが，じゃあ，フォントの大きさを変えたい時は

div{ }

の{ }の中にはどんなプロパティと値が入るの？と思います。このプロパティと値について簡単に紹介します。

プロパティと値は HTML と同じものもあれば，違うものもあります。

✓フォントの大きさを指定する div{fontsize:○○;}

となります。もちろん div は要素名ですので，div 以外にもたくさんあります。例えばテーブルのセルの中のフォントを変えたいときは，td{fontsize:○○;}とすれば OK です。

んで，○○に入る値は，HTML と違い，とても細かく指定できます。数字で指定する場合は必ず単位をつけます。単位は大きくわけると，次の２種類あります。

✓絶対単位………パソコンの環境に関係なく，指定できる。

単位読み方説明 mm ミリメートル cm センチメートル in インチ１インチ=2.54cm pt ポイント 72pt=１インチ=2.54cm pc パイカ 1pc=12 ポイント=1/6 インチ組版用語

✓相対単位………パソコンの解像度に依存する単位。

単位読み方説明 em エム組版用語：アルファベットの M のサイズ。高さを意味する。 ex エックスアルファベットの x の高さ px ピクセル 1024×768 や 800×600 など解像度によってサイズが変化





15

また，%でも指定することができます。文字の大きさの初期値が 100%ですので，それより上げたり，下げたりすることで指定できます。

その他にワードを入れることによって指定できます。 xxsmall → xsmall → small → medium → large → xlarge → xxlarge

この 7 段階で調整できます。xxsmall が一番小さく，xxlarge が一番大きいです。右にいくほど大きくなります。なお，標準は medium となります。１段階上がることに，1.2 倍，フォントが大きくなります。

✓フォントの太さを指定する

セレクタ{fontweight:○○;}

○○に入る値は，数値若しくはワードで指定します。

数値で指定する場合は 100，200，300，400，500，600，700，800，900 の９段階で指定します。しかし，太さが 9 種類用意されているフォントはあまりないため，数値を上下させても太さが変化しないことがあります。標準の太さは 400 で，数値が小さくなるほど細く，大きくなるほど太くなります。

ワードで指定する場合は，

normal 標準の太さです。（数値で 400 を指定した場合と同じ）

bold 一般的な太字の太さです。（数値で 700 を指定した場合と同じ）

lighter 相対的に一段階細くします。

bolder 相対的に一段階太くします。

となります。





16

✓フォントを斜体やイタリック体に指定する

セレクタ{fontstyle:○○;}

○○に入る値は normal 標準の状態 italic イタリック体 oblique 斜体

✓フォントに線をつける

セレクタ{textdecoration:○○;}

○○に入る値は none 初期値 underline テキストに下線がつく overline テキストに上線がつく linethrough テキストに打ち消し線がつく

✓フォントの色を指定する

セレクタ{color:カラーコード若しくは英語表記;}

✓背景色を指定する

セレクタ{backgroundcolor:カラーコード若しくは英語表記;}

✓背景画像を指定する

セレクタ{backgroundimage: url(../images/kabe01.gif");} なお，背景画像の場所は HTML からの相対パスではなく，CSS から見た相対パスを記入。

✓背景について一括で指定する

セレクタ{background:カラーコード若しくは英語表記 url("背景画像の場所");} なお，背景画像の場所は HTML からの相対パスではなく，CSS から見た相対パスを記入。





17

✓横位置を指定する

セレクタ{textalign:○○○;}

○○○に入るのは，次の値 left 左寄せ center 中央寄せ right 右寄せ justify 均等割り付け

✓縦位置を指定する

セレクタ{verticalalign:○○○;}

○○○に入るのは，次の値 top 上端揃え middle 中央揃え bottom 下端揃え texttop テキストの上端に揃える textbottom テキストの下端に揃える super 上付き文字として揃える sub 下付け文字として揃える baseline 初期値

若しくは数値で指定することができます。

数値に px や em や ex などの単位をつけて指定します。ベースラインが揃った状態を 0 として，指定した数値分だけ上方向へ移動します。下方向へ移動させる場合には負の数値

を指定します。





18

✓縦幅を指定する

セレクタ{width:○○○;}

○○に入る値は， auto 状況に応じて自動設定する。（初期値）数値で指定数値に px などの単位をつけて指定します。 px とは 1 ピクセルを 1 とする

単位で、実際に表示されるサイズは 72dpi や 96dpi といったモニタの解

像度により変化します。

%で指定

✓縦幅を指定する

セレクタ{height:○○○;}

○○に入る値は，width と同じです。

✓ボーダーを指定する

セレクタ{border: ○○ △△ □□;}

○○はボーダーのスタイルを指定するもので，○○に入る値は，

none ボーダーは表示されず，太さも 0 になります。表のセルなどのボーダー

が重なり合う場合は他の値が優先されます。これが初期値です。

hidden ボーダーは表示されず，太さも 0 になります。表のセルなどのボーダー

が重なり合う場合はこの値が優先されます。

solid 1 本線で表示されます。

double 2 本線で表示されます。

groove 立体的に窪んだ線で表示されます。

ridge 立体的に隆起した線で表示されます。

inset 上と左のボーダーが暗く，下と右のボーダーが明るく表示され，ボーダ

ーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の

一部だけに指定しても立体感は出ません。

outset 上と左のボーダーが明るく，下と右のボーダーが暗く表示され，ボーダ

ーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右

の一部だけに指定しても立体感は出ません。





19

dashed 破線で表示されます。

dotted 点線で表示されます。

△△はボーダーの太さを指定するものです。△△に入る値は，

数値で指定する方法とワードで指定するものがあります。

数値で指定する場合は，px などの単位をつけて下さい。

ワードで指定する場合は， thin（細い），medium（普通），thick（太い）のうち，いずれかを指定します。キーワードで指定する場合，実際に表示される太さはブラウザにより異なります。

□□はボーダーの色を指定するものです。□□にはカラーコードか英語表記で色を指定

して下さい

ここで紹介したものは，一部です。他にもたくさんありますので， Webページなどを見て，

調べてみてください。なお，オススメは，

HTML クイックリファレンス http://www.htmq.com/

です。

なお，解説文を書くにあたり，HTML クイックリファレンス（http://www.htmq.com/）よ

り，いくつか出典及び参考としております。

出典及び参考：HTMLクイックリファレンス

http://www.htmq.com/

また，ブラウザによっては対応していない CSSもありますので，ご注意下さい。

css についてtieo.jpn.org/tieo/bfc_pwi/applied/redume/no12.pdfcss でネストを行...

Documents