Ｗｅｂデザイナー応用制作

授業 / Web

「ｔａｂｌｅ」レイアウト

まだまだ
必要とされている「ｔｅｂｌｅ」レイアウト

確かに、求人情報をみてると

  • Ｐｈｏｔｏｓｈｏｐ
  • Ｉｌｌｕｓｕｔｒａｔｏｒ
  • Ｄｒｅａｍｗｅａｖｅｒ
  • Ｆｌａｓｈ

が使用できる方
の中に。。。。
「ｔａｂｌｅ」制作できる方。
って募集がありました。。。。

気になっていたら。。。
今日の授業は「ｔａｂｌｅ」です！（＾_＾）！

＜!ＤＯＣＴＹＰＥ＞宣言は。。

「４．０１　Ｔｒａｎｓｉｔｉｏｎａｌ」で作りましょう！！

＜ｈｅａｄ＞ の記載

＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"＞
＜meta http-equiv="keywords" content=""＞
＜meta http-equiv="description" content=""＞
＜meta http-equiv="Content-Style-Type" content="text/css"＞
＜meta http-equiv="Content-Script-Type" content="text/javascript"＞
＜title＞しろうさぎ＜/title＞
＜link rel="stylesheet" href="style.css" type="text/css"＞
＜script type="text/javascript" src="common.js"＞
＜/script＞
＜/head＞

  1. ＜meta＞
  2. ＜title＞
  3. ＜link＞
  4. ＜script＞

の順番で記述すること

  • ＜body＞情報は新たにＣＳＳに作ること
  • ＜script language=""＞は＜script type=""＞にする

重箱（ｓｕｍｍａｒｙ＝”＿＿”）

重箱の要領で

  • ヘッター部
  • メイングラフィック
  • コンテンツ
  • ボタン

と順番に＜ｔｅｂｌｅ＞　〜〜〜〜　＜/ｔａｂｌｅ＞を重ねて作ること！

そして
＜ｔａｂｌｅ＞の中身は左側から、横に。。横に。。と作る
カギ形（「 ）にしてはダメ！

階層

階層は３階層まで

[情報]−[ｔａｂｌｅ要素の入れ子の深さを表示する]で深さの確認
「深１」「深２」「深３」と表示される

更新する場所を入れ子にする
重箱の要領で重ねていき、
更新する情報をその中に「入れ子」にして作成すること
他の場所は触れることなく更新したい場所だけ変更できるので。。

ｓｐａｃｅ．ｇｉｆ

＜ｔａｂｌｅ＞はセルの中に文字（情報）が入るのが前提なので
空白のセルを作ってはダメです。
＜ｔａｂｌｅ＞の崩れる原因です！！
１×１の透明なｓｐａｃｅ．ｇｉｆを作り、
スペースにするセルに必ず使用すること。

１０ｐｘのスペースを空けたくても
「空白（カラッポ）」状態のセルは
ブラウザに表示されると
初期値の１６ｐｘになってしまう（大きくなってしまう）

また、初期値の１６ｐｘよりも大きい場合でも
ｓｐａｃｅ．ｇｉｆを保険として使うこと！！

  • ｓｐａｃｅ．ｇｉｆを入れたら「幅」と「高さ」の指定をすること
  • 「ａｌｔ＝””」は「空（カラ）」にすること

ＣＳＳ（スタイルシート）

ｃｏｎｔｅｎｔには
｛ ｍａｒｇｉｎ： 0ｐｘ ａｕｔｏ； ｝

ｂｏｄｙには
｛ ｔｅｘｔ−ａｌｉｇｎ： ｃｅｎｔｅｒ； ｝

古いブラウザー「5.5」は「ａｕｔｏ」を読まないので
ｂｏｄｙに｛ ｔｅｘｔ−ａｌｉｇｎ： ｃｅｎｔｅｒ； ｝も記述すること！

ＣＳＳを使わない場合は
＜ｂｏｄｙ＞の下に
＜ｄｉｖ　ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞と記述する


｛ｔｅｘｔ−ｉｎｄｅｎｔ： −999ｐｘ；｝を使うと
点線ができる
この点線を消すために
｛ｏｕｔｌｉｎｅ： ｎｏｎｅ；｝を使うと点線は消えるが
クリックしたときの枠線も表示されなくなります。

そこで、１行非表示にするために
＜ｌｉ＞＜ａ＞＜ｅｍ＞　〜〜〜〜　＜/ｅｍ＞＜/ａ＞＜/ｌｉ＞で記述して
｛ｖｉｓｉｂｉｌｉｔｙ： ｈｉｄｄｅｎ；｝を使う