【test1.htm】のHTML作成
HTML Table BuilderのＡ１セルに z を入力してHTMLを作成する。
ホームフォルダに【test1.htm】を作成し【表示】メニューのソースで開く
メモ帳に貼り付け上書き保存する。
１．青文字部を参考に記述してください。
上書き保存後【test1.htm】ファイルのアイコンをダブルクリックし結果を確認してください。
２．赤文字部を変更・書き加えてください。
上書き保存後【test1.htm】ファイルのアイコンをダブルクリックして変更・書き加えた効果
を確認してください。
１．完成サンプル ２．完成サンプル
<html lang="ja">
<head>
<title>タイトルバーに表示する文字をこの行に書き込む</title>
<style type="text/css">
<!--
@import url(qqq.css);
body{font-size:20pt;color:navy;background-color:lavender}
table{background-color:mintcream;width:750px}
td{font-size:14pt}
.fnt1{font-size:10pt;color:red}
.fnt2{font-size:16pt;color:blue}
-->
</style>
</head>
<body>
<div align="center">
この部分はbodyタグ内にありスタイルシートの設定<br>
body{font-size:20pt}<br>
が適用される結果、文字サイズが20ポイントになる。<br><br>
スタイルシートの設定で使われるタグ（名）をセレクタという。
<br><br>
<table>
<tr><td><br>
この部分はtdタグ内にありスタイルシートの設定<br>
td{font-size:14pt}<br>
が適用される結果、文字サイズが14ポイントになる。<br>
タグのtdがセレクタに使用されている。<br><br>
次ぎにクラスと呼ばれるスタイル設定を説明する。<br><br>
スタイル設定で次の.fnt1と.fnt2のセレクタが設定されている。<br>
.fnt1{font-size:10pt;color:red}<br>
.fnt2{font-size:16pt;color:blue}<br>
クラスによるスタイルシート設定はドット.で始まる。<br>
ドット．に続くfnt1およびfnt2がクラス名でクラス名は自由に命名できる。<br><br>
クラスの使用法<br>
この領域はtdタグ内にある。<br>
この様に他に適当なタグが無い場合はspanタグとセレクタとしてclassを併用する。<br><br>
<span class="fnt1">１．クラス:fnt1 文字サイズ：10ポイント 文字色：赤</span><br>
<span class="fnt2">２．クラス:fnt2 文字サイズ：16ポイント 文字色：青</span>
</td></tr>
</table>
</div>
</body>
</html>
スタイルシート解説参照 class
タグ解説参照 <span>タグ
|