基金訓練に行ってきました。(31日目)

基金訓練(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.スタイル指定のルール

セレクタ { プロパティ : 値 ; プロパティ : 値 ; }

・セレクタ・・・スタイル指定をする対象。(h2、ID、クラス名等)
・プロパティ・・・スタイル属性。何を指定するか示すもの。(color、width等)
・値・・・プロパティに対する値。(red、200px等)
・「;」(セミコロン)までをひとつの区切りとし、複数の宣言をセミコロンで続けて指定可能。
・値には「”」(引用符)の使用不可。

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>&nbsp;</td> とする。
・<margin>や<padding>は、テキストやイメージが生成する範囲を基準とする。ただし、IE6の場合、文書型宣言の1行目(<!DOCTYPE html・・・・・・>)を省くと外枠が基準となる。

  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す