|
|
|
|
|
最近どのサイトにも多くなったのにテーブルの使用があります。
テーブルを使用することで、テーブルの横にも文字や画像、テーブルが配置が可能となります。
| １． |
テーブルを使う目的
テーブルを横に複数並べるには、セルを増やしてその中にテーブルを配置することで可能となります。
（セルの高さが同じであればセルを左右に増やせば良く、幅が同じの場合は上下に追加すればバランスが良い） |
| ２． |
そのテーブルにさらにテーブルを配置出来ますが、データサイズが大きくなるために、読み込みの時間が長くなる場合もありますので、HTMLファイルサイズ30KB以下になる工夫が必要になります。
（ページの分割など） |
| ３． |
画像を横に並べても配置が崩れません。 |
|
具体例
| 枠線を表示の場合 |
|
枠線を非表示で
横に画像配置 |
|
セル間のスペースを０にして画像と文字を配置した場合 |
|
|
→ |
|
→ |
|
| <TABLE border="1"> |
|
<TABLE> |
|
<TABLE cellspacing="0"
cellpadding="0"> |
|
|
|
|
これも最近特に多くなったWebページの現象です。スタイルシートはページ単位でヘッダータグの間に数行の記述でも可能ですし、専用ファイルとしてもどちらでも可能です。
ページ単位で記述する場合
<HEAD>
<STYLE type="text/css">
<!--
B{font-size : 15px;line-height: 24px;}
BODY,TD,TR{font-size : 14px;line-height: 20px;}
A {text-decoration;color:#0000FF;}
A:hover {text-decoration;color:#FF0066;}
}
-->
</STYLE>
</HEAD>
|
通常の場合の場合（文字の大きさと行間隔にご注目下さい）
| 最近特に多くなったのが「スタイルシート」の使用です。これはページ単位でヘッダータグの間に数行の記述でも可能ですし、専用ファイルとして設定してもどちらでも可能です。 |
スタイルシートの場合の表示
| 最近特に多くなったのが「スタイルシート」の使用です。これはページ単位でヘッダータグの間に数行の記述でも可能ですし、専用ファイルとして設定してもどちらでも可能です。 |
ブラウザの「表示」→「文字の大きさ」→「中」「最大」「最小」と設定を変えることで文字の大きさが変化するのが通常の場合です。
（注意）このことからも一種の差別化が行われるのがスタイルシートでもあるのです。 |
|
|
|
これは簡単なJva-Scriptで行う例をご紹介します。
ポップアップウィンドゥサンプル
プログラムソース
<HEAD>
<SCRIPT language="JavaScript">
<!--
function newwin(str) {
if (str != "") {
if (navigator.appVersion.substring(0,1) >= "3") {
popup=window.open(str,'popup','width=400,height=300,resizable=no,scrollbars=no,left=10,top=10');
popup.location.href=str;
popup.focus();
} else {
popup=window.open(str,'popup','width=400,height=300,resizable=no,scrollbars=no,left=10,top=10');
window.open(str,'popup','width=400,height=300,resize=no,scrollbars=no,left=10,top=10');
popup.location.href=str;
}
}
}
// -->
</SCRIPT>
</HEAD>
リンク部分
<A href="javascript:newwin('001.htm')">公園の花壇</A> |
通常は一度最小画面になると再表示はマニュアルでしか再表示出来ませんが、この場合はリンク箇所の再クリックで再表示されます。（行方不明になりません） |
|
|
|
アニメは一般には複数の画像を表示して、動いているように見せる画像ですが、ここでは左右に移動する場合のアニメを<MARQUEE></MARQUEE>を使用して動かすアニメをご紹介します。
このアニメは『ホームページ楽々講座』(http://www.salty1.com/)さんのアニメです。
プログラムソース
<TABLE width="100%">
<TR>
<TD background=train-2/town.gif>
<DIV style="MARGIN-TOP: 6pt">
<MARQUEE scrollAmount=2 scrollDelay=72 direction=right>
<IMG src="train-2/train4.gif">
</MARQUEE></DIV><BR>
<DIV style="MARGIN-TOP: -23pt">
<MARQUEE scrollAmount=4><IMG src="train-2/train3.gif">
</MARQUEE></DIV><BR>
<DIV style="MARGIN-TOP: -25pt">
<MARQUEE scrollAmount=15 direction=right><IMG src="train-2/train2.gif">
</MARQUEE></DIV><BR>
<DIV style="MARGIN-TOP: -25pt">
<MARQUEE scrollAmount=6><IMG src="train-2/train1.gif"></MARQUEE></DIV>
</TD></TR>
</TABLE>
|
|
<MARQUEE></MARQUEE>タグは通常は文字のスクロールに用いますが、このように画像でも可能です。
このように平面的に左右もしくは上下に移動する場合はGFT画像アニメよりデータサイズを小さく出来ます。
|
|
|
ワンポイントやラインに用いられる画像もきちんと余白が透過処理をしないと違和感がある画像になってしまい、その効果も半減してしまいます。
Webページには欠かせない画像処理です。
| 透過処理しない状態 |
|
透過処理後 |
 |
|
 |
この透過処理はMicrosoft Office に含まれている「Microsoft Photo Editor」ソフトで充分に透過処理が可能です。
|
 |
|
上の「透過色に変更」ボタンをクリックしてマウスポインタを画像の上に乗せると左図のようにポインタが変わり、透過処理をする場所でクリックすることで透過処理が可能となります。 |
|
|
|
|
↓ |
|
|
 |
|
透過処理されると、その部分が白/灰の格子状に変化します。目的の色がこの状態になったら保存します。 |
|
↓ |
|
|
|
|
|
←ブラウザで表示された状態 |
|
|
|
|
この小タイトルのように配置する方法にはテーブルが簡単です。
先ず2列1行のテーブルを配置してセルにそれぞれ文字を入力します。
右のセルに「align="right"」を入力すると右側セルの文字は右端に寄ります。
（分かりやすいように枠を表示してあります）
プログラムソース
<TABLE width="100%" cellspacing="0"
cellpadding="0" bgcolor="#D6DDED">
<TR>
<TD>６．文字を一行に左右に配置する</TD>
<TD align="right"><A
href="#top">このページのTopに戻る</A></TD></TR>
</TABLE> |
|
このページのトップに戻る 戻る Homeに戻る
|
|
