基金訓練(Webデザイン・プログラミング科)の31日目に行ってまいりました。
本日は、HTMLプログラミングの実習です。
本日の内容は下記のとおりです。
CSS（Cascading Style Sheets）について
1.CSSのバージョン
・CSS1・・・1996年
・CSS2・・・1998年
・CSS2.1・・・2006年←現在の主流
・CSS3・・・未勧告
2.W3C準拠（CSS）の必要性
・SEO対策になる。
・アクセシビリティがよい。（HPの表示動作が軽快)
・メンテナンス性(保守性)がよい。
・開発効率がよくなり、作業時間が短縮。
3.スタイル宣言をする場所
・HTMLファイル内で、適用させる要素に対して、直接指定。（ボディ<body>内）
保守性が悪い。
・HTMLファイル内で、ヘッダ<head>部にstyle要素を使って記述。
ページ内を一括して変更しやすい。
・外部ファイルに記述し、参照する。
サイト内の複数ページを一括して変更しやすい。
4.スタイル指定のルール
セレクタ ｛ プロパティ ： 値 ； プロパティ ： 値 ； ｝
・セレクタ・・・スタイル指定をする対象。（ｈ2、ID、クラス名等）
・プロパティ・・・スタイル属性。何を指定するか示すもの。（color、width等）
・値・・・プロパティに対する値。（red、200ｐｘ等）
・「；」(セミコロン)までをひとつの区切りとし、複数の宣言をセミコロンで続けて指定可能。
・値には「”」(引用符)の使用不可。
5.スタイル属性（プロパティ)
・width：
幅を指定。（例 width:50％)
・height:
高さを指定。（例 height:100px)
・background-color:
背景色を指定。(例 background-color:red)
・marigin:
周辺の余白を指定。(例 margin:5px)
・padding
枠と内容の間の余白を指定。(例 padding:5px)
・font-size:
文字のサイズを指定。(例 font-size:75%)
・line-height:
行間を指定。(例 line-height:15px)
・float:
回りこみを指定。(例 float:left)
TABLE・・・表組み
<table border=”x” cellspacing=”y”>
<tr>
<td>zzz</td>
・
・
・
</tr>
</table>
・tr要素 表組みの行を定義
・td要素 表組みの列を定義
・x 表組みの外枠の太さ(ピクセル)
・y セル同士の間隔(ピクセル)
・zzz セルに表示する内容
今日のポイント
・ひとつのテーブルで<tr>～</tr>内の<td>～</td>の数を同じにしないと罫線が欠けるので、空白セルを作るときは <td> </td> とする。
・<margin>や<padding>は、テキストやイメージが生成する範囲を基準とする。ただし、IE6の場合、文書型宣言の1行目(<!DOCTYPE html・・・・・・>)を省くと外枠が基準となる。
