6月23日(火)1、2コマ目
今日、やったこと
- <style>タグ＋クラス
- スタイル定義は別ファイルで
- 表（テーブル）
今日のホワイトボード
前回の復習
文字色や大きさなどのデザインは<style>タグ内で
- タグに対して
- IDに対して
まとめて行うことができる。
全タグでもなく特定のIDだけでもなく
タグに対するデザイン定義を行うと、このタグはすべて同じデザインになる。
IDは同じHTMLファイル内には重複して指定することができない。
この中間の（すべてではない）複数の対象に対して同じデザインを適用したい場合には、クラスが使える。
クラスは１つのタグに複数のクラスを適用することもできる。
デザインとデータの分割
いままでは表示データ(おもに<body>～</body>)と、デザイン(おもに<style>～</style>)がHTMLファイル内にあった。
通常、１つのサイトには複数ページあり、デザインも統一したい。
各ページの<style>タグ内でデザイン定義をすると、変更の際に変更忘れが発生する可能性がある。
よって、デザイン定義（特にページ間で共通する内容）はHTMLファイルとは別にして、各HTMLファイルは同じデザイン定義を読み込むようにすれば、デザイン定義は1つだけにまとめることができる。
デザイン定義ファイル(style.css)をHTMLファイルから読み込むには以下のように行う。
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
href属性で指定しているファイルがデザイン定義ファイル。
なお、この場合は、HTMLファイルとstyle.cssは同じディレクトリにあることが前提。
表（テーブル）
多分、卒業までに一番使うタグかも。
表の行・列
<table>タグ、<tr>タグ、<td>タグ
各タグは下表のとおり。
| <table> | 表の定義は<table>タグで挟む |
| <tr> | 1行は<tr>で挟む |
| <td> | セルは<td>で挟む |
<TH>タグ
<td>タグと同じようにセル内のデータを定義するタグだが、<TH>は見出しに使う。
<TH>タグは太字＋中央寄せで表示される。
上下のセルを結合する
rowspan属性を使う。
上下2セルを結合する場合、結合する最上部のセルにrowspan属性を使って、結合するセル数(最上部セルも含めて）を指定する。
左右のセルを結合する
colspan属性を使う。
左右2セルを結合する場合、結合する最左側のセルにcolspan属性を使って、結合するセル数(最左側セルも含めて）を指定する。
上下左右のセルを結合する
colspan属性とrowspan属性の両方を指定することもできる。
指定するセルは最上部の最左側のセル。
コメント