#
多くの人が見れるようなHTMLの書き方
Tag(s):
Webデザイン
Webページを書くときは,見る人の環境が多様なことに注意する必要がある。Webブラウザをいくつも用意するのが大変なら,HTML 4.0に適合するようにタグ(要素)を書くだけでもずいぶん良くなる。
画面が狭い場合の表示も考慮しよう。しばしばtable要素で1行の長さを固定したデザインのWebサイトを見かけるが,ウィンドウの大きさがそれより小さいと,いちいちスクロールさせないといけなくて,大変見づらい。Webブラウザのウィンドウ枠をドラッグして大きさを小さくするだけで,実際にどのように表示されるか確認できる。
で,ちょっとHTMLファイルを見してもらったが,fontタグなんかを書く場所がおかしい。例えばsasa.htmだが,今はこうなってる。
<body background="chess.gif">
<br><br>
<font color=navy>
<table align="center">
<h3>
<strong><u> ○○○○氏の作詞集 </U></h3></font>
うーん,なかなか難しい書き方をしてる。私ならスタイルシートで何とかするが,一応HTMLだけでいくなら,次のようになるか。
<body background="chess.gif">
<h1 align="center">
<font color="navy"><u><strong> ○○○○氏の作詞集 </strong></u></font>
</h1>
<p align="center"><font color="teal">
<strong>- Soul of XXXXX XXXXXXX -</strong></font>
HTMLでは,要素は入れ子になってないといけないし,どの要素の内側にどの要素を書けるかも決まっている。すなわち,<font><h3>hogehoge</font></h3>ではなく,<h3><font>hogehoge</font></h3>と書かないといけない。
その次もシンプルにできそう。元はこう。
<br><br><br>
<table align="right">
<tr><td><h6>
<p><span style="background:cyan">
<u><h4>○○○○ PROFILE</h4></u></span></p>
<font color=gray>
<img src="sasab4.jpg"><br><br>
(略)
<br>
<br>
(略)
<br></font>
</table>
<table>
<tr><td>
<table align="left">
<tr><td>
<h5><br><br><br>
<u><h4>『(略)』</h4></u>
(略)
<br><br>
</table></table>
<tr><td>
<table align="center"><br><br><br><br><br>
tableとbr要素を駆使した,しかもtableタグでalign属性を指定するとfloating boxになることを利用したかなりの力作。
tableで左右に分割する場合は左側の内容を先に書いた方がどうやってもシンプルになる。tableタグ,tdタグにwidth属性を付けてみる。cyanという色名はNetscape Navigatorなどでは使えるものの,HTML 4.01には書いてないから,aquaを使う。u, span, font要素はh4要素の内側。
<br><br><br>
<table border=0 width="100%">
<tr><td width="80%">
<h4 align="center"><u>(1曲目のタイトル)</u></h4>
(詞。改行はBRタグ)
<h4 align="center"><u>(2曲目のタイトル)</u></h4>
(詞。改行はBRタグ)
<td width="20%">
<h4 align="center">
<span style="background-color:aqua"><u>○○○○ PROFILE</u></span>
</h4>
<img src="sasab4.jpg" alt="顔">
<font color="gray">
(ここにプロフィール。改行はBRタグ)
</font>
</table>
なお,table,tdタグのwidth属性は%Lengthであり,'*'は書けないことになっている。
次に,画面中央を空けて左右に書くのは,次のようにすればできる。
<br><br>
<table border=0 width="100%">
<tr><td valign="top">
<h4 align="center"><u>(ここに3曲目のタイトル)</u></h4>
(ここに詞。改行はBRタグ)
<td width="30%">
<!-- empty -->
<td valign="top">
<h4 align="center"><u>(ここに4曲目のタイトル)</u></h4>
(ここに詞。改行はBRタグ)
</table>