コンピュータ基礎実習(上級) 第二回

コンピュータ基礎実習(上級) 第九回
スタイルシート
清水淳紀
はじめに

今回の内容

スタイルシート(CSS)とは何か



CSSの役割
CSSの利点
スタイルシートの基本


CSSの記入方法
基本的なCSSの例
スタイルシート(CSS :Cascading Style Sheet)

スタイルシートとは何か？

HTMLの見栄えに関する設定がひとまとめになったもの。


文字の大きさ・色・行間・装飾・レイアウトなど。
CSSの利点


複数ページから同じCSSを参照すると、
ページの見栄えを統一できる。
CSSを入れ替えることでデザインを簡単に変更できる。


HTMLからレイアウトに関する設定を分離できる。



(例) wikiのスキン機能など
HTMLがすっきりして文章構造が把握しやすくなる。
ページごとにレイアウトの設定を書かなくてすむ。
HTMLでは不可能な細かなデザイン調整が出来る。
スタイルシートでページのデザインを行うのが最近の主流。
CSSでサイトのデザインをする例


CSSを使ってサイトのデザインをさまざまに調整できる。
別のCSSを使えば、内容は同じで全く異なるデザインに
できる。
CSSファイルを使い分けるだけの簡単な修正で
大幅にデザインが変えられる。
CSSの基本構文

CSSの例
(基本要素だけを含む断片的な例)
p#id { color : #ff3300; }
p#id
セレクタ。スタイルの効果が及ぶ範囲をあらわす。
{ ～ }
宣言ブロック。設定を記入する場所。
color:#ff3300;
宣言。具体的なスタイルの記述。
color
プロパティ。：の左側部分。属性ともいう。
#ff3300
値。：の右側部分。
;
デリミタ(区切り文字)。宣言の最後は；で終える。
；で区切って複数の宣言を列挙できる。
構文自体は比較的シンプルである。
プロパティの種類が多く、さまざまなデザイン効果が実現できる。
ネット上のCSS解説サイトなどが参考になる。
(解説サイトの例)
http://www.tohoho-web.com/css/
http://www.htmq.com/
など
CSSの書き方

CSSの適用方法３通り

1.
前のスライドで説明した基本構文は３種類の方法で書ける。
HTMLタグごとにCSS設定を記入

2.
HTMLファイルの先頭にCSS設定を記入

3.
タグ単位で細かな調整が可能。その都度微調整を行いたい場合に便
利。
1ページ内でデザインをそろえる際に便利。
別ファイル (xxxx.css) にCSS設定を記入

サイト全体のデザインをそろえる際に便利。
CSSの書き方具体例1

HTMLタグごとに個別に記入


HTMLタグのタグ名の後ろに、style要素を付け加えてCSS構文
を記入できる
(例) H3タグ (見出しレベル3) の場合
<h3>これは見出しです</h3>
↓
<h3 style="background-color:red;">これは見出しです</h3>
※この例では、見出し部分の背景色(background-color)が赤(red)になる。
H3タグに限らず、ほとんどのタグに対して設定できる。
CSSの書き方具体例1

HTMLタグごとに個別に記入の応用

好きなな範囲にCSS設定を適用したい場合
2つの方法でCSS適用範囲を決められる。
ブロック要素を使って範囲指定
インライン要素を使って範囲指定
テスト
<div style="background-color:red">
サンプル文章
</div>
テスト
テスト
<span style="background-color:red">
サンプル文章
</span>
テスト
テスト
テストサンプル文章テスト
サンプル文章
テスト
CSSの書き方具体例1

ブロック要素の詳細


<div>~</div>タグで囲った部分が長方形の範囲となってCSS
設定が適用される。
通常は<div>タグの前後で勝手に改行される。
ブロック要素を使って範囲指定
テスト
<div style="background-color:red">
サンプル文章
</div>
テスト
テスト
サンプル文章
テスト
•長方形部分の背景に画像を表示した
りもできる。
•あるプロパティを使えば、長方形部
分の幅、高さ、位置などを細かく指定
できる。
•テキストボックスを作れるイメージ。
•ページ全体のレイアウトにも使える。
(上部メニューエリアを作ったり、
画像をページの右端に置いたり、
文章の二段組みをしたりできる。)
CSSの書き方具体例1

インライン要素の詳細


<span>~</span>タグで囲った部分CSS設定が適用される。
<div>タグと違って前後で勝手に改行されない。
インライン要素を使って範囲指定
テスト
<span style="background-color:red">
サンプル文章
</span>
テスト
•文章中の一部の文字だけにCSS設定
を適用したい場合に便利。
テストサンプル文章テスト
•下線、太字、文字色変更などを設定
する場合に適している。
CSSの書き方具体例2

HTMLファイルの先頭に記入

ページの先頭部分<head>～</head>の間に
例のように記入する。
<html>
<head>
<title>CSS例</title>
<style TYPE="text/css">
<!-h1 { color: red; }
-->
</style>
</head>
<body>
<h1>はじめに</h1>
このページはテストページです。
</body>
</html>
この例では h1タグに対して
文字の色(color)が赤(red)になるよう
設定している。
HTMLファイルの先頭にCSSを記入すると、この
ページ内のすべてのh1タグに、color:red; を設定し
たことになる。
スタイルシートに対応していないブラウザのため
に  でCSS命令がコメントアウトしてある。
CSSの書き方具体例3

別ファイル (xxxx.css) に設定をまとめて記入


別ファイルたとえば xyz.css を用意して、CSSをまとめて記入
HTMLファイルの先頭部分で、xyz.cssファイルを使うよう指定
xyz.cssファイルの内容
h1 {color:blue;}
h2 {color:green;}
h1タグはすべて文字色(color)が青(blue)
h2タグはすべて文字色(color)が緑(green)
と指定されている。
CSS構文以外に余計な命令を書く必要は
ない。
index.htmlファイルの内容
<html>
<head>
<title>CSSテスト</title>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>
<body>
<h1>はじめに</h1>
このページはテストページです。
</body>
<head>～</head> の範囲内に <link～> タグで
使いたいCSSファイルを指定する。
このページ内のh1 と h2 タグはすべて、
xyz.css に書かれた設定の影響を受ける。
CSSを使う際の注意点

CSSに未対応のブラウザもある



古いブラウザや、携帯のブラウザなどでCSSに対応していないことが
ある。
CSS未対応ブラウザでは、CSS設定はすべて無視される。
ブラウザによって動作が違うかもしれない


Internet Explorer や Firefox 、Google Chrome などさまざまなブラウ
ザがありますが、CSSの結果の画面表示は若干異なることがある。
出来れば各ブラウザで表示結果を確認したい。
CSSの応用

様々なプロパティが存在する





プロパティを使い分けて様々なデザインを実現しよう。
(例) h2タグに対してCSS設定をする例
h2 { color:red; } 文字色が赤色
h2 { background-color:red; } 背景色が赤色
h2 { border:solid 1px red; } 枠線が実線幅1ピクセル赤色
<div style="width:300px">ブロック</div>
幅が300ピクセルのブロック要素を作成
プロパティ数は多すぎて覚え切れない。
まずはCSS解説サイトや、解説本を参考によく使うプロパティ
から覚えていくと良い。
幾つかのサンプルを例示しますので、各自試してみてくださ
い。
次週に続く

Download Report