WEB 第８回 HTMLとCSSの仕組み--2.CSSの基本
読み方を間違いやすいHTMLタグやCSSタグ
HTMLタグの読み方辞典
http://www.coolwebwindow.com/cssref/html-tag-ref.html
今さら聞けない！読みづらいCSSプロパティの正しい読み方
http://creativememomemo.com/css_property_readings/
以下
より引用
スタイルシートが必要な理由
現在、ウェブページを制作する言語として広く利用されているHTML4.01やXHTML1.0には、 <center>や<font>などの装飾目的の要素（タグ）や属性が存在しています。 また、<table>タグでレイアウトをまとめるなどの方法を駆使すれば、 HTMLだけでウェブページの見栄えを制御することもできなくはありません。
しかし、ウェブページのスタイリングにHTMLを用いるべきではありません。
HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、 文書の情報構造がでたらめになってしまうからです。
コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。
また、HTMLの要素（タグ）をどのように表示するかは、ユーザーエージェント（ブラウザ）によって異なることがあります。 HTMLタグを駆使してある閲覧環境では見栄え良くレイアウトできたとしても、 他の閲覧環境ではまったく意図しないレイアウトになってしまうこともありえます。
文書構造とスタイル指定を分離する
HTML4.01やXHTML1.0の仕様では、 HTML文書から見栄えに関する指定を分離することが望ましいとされています。 HTMLでは文書構造のみを定義して、 スタイルについてはスタイルシートで指定することが推奨されています。
HTML4.01やXHTML1.0では、センター揃えをする<center>、フォントの見栄えを指定する<font>などの装飾目的の要素や、 色・サイズ・ボーダーなどを指定する装飾目的の属性については非推奨（deprecated）とされながらも使用することができますが、 HTMLの次世代バージョンとなるHTML5では、 <center>や<font>などは 廃止される予定 となっています。
ポイント： HTMLは骨組み、CSSは装飾
CSSを使用したWEBレイアウトの基本
方法A＝HTMLソースに<div>〜</div>を直打ちする
方法B=画面上のバー「挿入>レイアウトオブジェクト>Divタグ」
方法C=挿入パネルの「Divタグの挿入」
(2)divボックスに名前を付ける
方法Aの場合＝<div id="~">...</div>または<div class="~">...</div>と直打ち
idとclassの違い
■[id] =１ページ内で１つのみ
それぞれの要素は1つのidしか持つことが出来ません。個々のページでそのidを使用した要素もまた、たった1つでなければなりません。
もし同じidを2つ以上の要素で使用すると、バリデーションチェックでエラーが出てしまいます。
例：バナー画像は１ページに１つしかないのでidで設定する
■[class]=1ページ内で複数
複数の要素で同じclassを使用することが可能。複数のclassを同じ要素内で使用することも可能。
もしページ上で何度も使用されるスタイル設定ならば、classを使う。
例：ページの中で複数箇所を赤文字表示にしたい場合はclassで設定する。
方法B・Cの場合
＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
・dreamweaver上でdivボックスを選択し、
選択した状態でCSSスタイルのパネルの右下の
「新規CSSルールのボタン」をクリック。
という感覚ではなく、
「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
を使ってレイアウトする感覚で操作していくとわかりやすい。
外(がわの余白)＝パディング padding
３種類の方法で指定できるスタイルシート
1.外部スタイルシート
CSSファイルの呼び出しは<head></head>内に記述する。
2.head要素のスタイルシート
HTMLからCSSファイルを呼び出す方法
CSSファイルをHTMLファイル内で呼び出す方法を紹介する。CSSファイルの呼び出しは<head></head>内に記述する。
CSSファイルの呼び出し – HTMLファイル
CSSファイルへのパスは相対パス、絶対パスのどちらでも良い。
<title>タイトル</title>
<linkrel=”stylesheet” href=”CSSファイルへのパス” type=”text/css” />
</head>
2.head要素のスタイルシート
headタグ内への記述する方法
headタグ内への記述は以下の通り。今回h1タグに対して、margin:0（余白ゼロ）
とfont-size:3em（文字の大きさを3emにする）のスタイル指定をする。
head内でのCSSの記述例 – HTMLファイル
この記述方法のデメリットとして、まず、SEOの効果が下がる事が挙げられる。これは、CSSファイルを呼び出す方法と比べてbodyタグの位置が下に来るからである。詳しくは関連記事を参考にしていただきたい。
<head>
<title>タイトル</title>
<styletype=”text/css”>
h1 {
margin: 0;
font-size: 3em;
}
</style>
</head>
他にも、「1つのファイルが長くなるため単純に見づらいコードになる」、「それぞれのHTMLファイルにいちいち記述しなければならない」などのデメリットが挙げられる。
3.インラインスタイルシート
特定のpタグに対するCSSの記述例 – HTMLファイル
この記述方法のデメリットとして、
<pstyle=”color: red; font-size: 20px;”>
このpタグに対してスタイルを指定する。
</p>
「全てのpタグに手動で書かなければならず、変更の際に面倒」
「コードが見づらくなる」などが挙げられる。
できる限りHTMLからCSSファイルを呼び出した方が良いだろう。
※教科書ではHTMLからCSSファイルを呼び出す方法が使われています。
しかし、間違ってhead要素のスタイルシート や インラインスタイルシート
になってしまっている場合があります。
意図的に使い分けをする以外はHTMLからCSSファイルを呼び出すようにしましょう。
スタイルシート3種類の適用方法の練習
以下のHTMLコードをコピーしてstyle.htmlを作成し、
style.cssというファイルとリンクして
コード内の指示に従って色を設定しましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>スタイルシート３種類の適用方法</title>
</head>
<body>
<div align="center" id="ichi">
<p><br />
<br />
<br />
<font size="18px">この文字を外部スタイルシートで#ff0000の色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
<div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をhead要素のスタイルシートで#00ff00の色にせよ。</font></p>
<p> </p>
<p> </p>
</div><div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をインラインスタイルシートで#0000ffの色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>スタイルシート３種類の適用方法</title>
</head>
<body>
<div align="center" id="ichi">
<p><br />
<br />
<br />
<font size="18px">この文字を外部スタイルシートで#ff0000の色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
<div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をhead要素のスタイルシートで#00ff00の色にせよ。</font></p>
<p> </p>
<p> </p>
</div><div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をインラインスタイルシートで#0000ffの色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
サンプル(回答例)
styletest.html
styletest.css
styletest.html
styletest.css