HTMLを考える
最初に
はじめに言っておくのは、このページは本来人に見せるために作ったのではないということである。
なんのことはない、自分がHTMLを書く場合に記憶が怪しくなったときに参照するために書いている。
また、本などの記述どおりに実際に動いている確認するという意味合いもかねている。
だが正直、私が知りたいと思っていたことは、他でも知りたがっている人がいるのではないだろうか?
そう考えて、このページを外部にさらすことにした。単に私が外でHTMLを書くときに参照したいという意味合いも少々ある。
たいしたことは書いていけないだろうが、何かしらの役に立ったなら幸いである。
時雨堂〜統合店〜
要素
<code> </code>
HTML中にコードを書くときに使う。
特殊な処理は行われず、構造的に明確さを示すためにのみ用いられる。
<code> </code>の中に<pre> </pre>を入れて、コードを記述どおりに表示させるのが一般的な用法である。
ただし、<pre>要素の中であっても、『<』『>』は、タグの一部とみなされてしまうので、『&tl;』『>』と変換しておくことが大切である。
<col>
<table>の列に対する操作を行う要素。連続して記述することで左側から1列ずつに対応。
<em> </em>
この要素で囲うことで文字を強調する。
特に特殊な処理が施される要素ではなく、あくまで使用者が表記の明確性を求めて用いるにすぎない。
より強い強調には<strong>
構造として強調するという意味でのみで用いること。装飾目的での使用は控えるべきであろう。装飾はあくまでスタイルシートを用いるべきである。
<strong> </strong>
この要素で囲うことで文字を強調する。
<em>よりも強い強調を示したいときに用いる。
特に特殊な処理が施される要素ではなく、あくまで使用者が表記の明確性を求めて用いるにすぎない。
構造として強調するという意味でのみで用いること。装飾目的での使用は控えるべきであろう。装飾はあくまでスタイルシートを用いるべきである。
トラブルシューティング
直接入力できない文字の表示
ある程度HTMLになれてくると困るのが、直接入力で表示できない文字の取り扱いである。
例としては、『& < > "』などである。
これらは、普通に入力しても、HTMLのコードの一部と認識されてしまう場合が多い。HTMLの文法として誤った場所で使われれば、入力どおりに表示はされるが、そうなれば自ずと使える状況が限定されて来る上、文法上のミスをあえてHTML上で犯すのは得策ではないだろう。
では、どうやって表示すればよいのだろうか？
このような特殊な文字には文字コードが存在している。
表示の方法には、数値実体参照と文字実体参照の二つがある。
数値実体参照は、文字一つ一つと関連付けられた数値を入力することで文字を表示する。
用例としては『&#***;』の『***』の部分に文字に対応する数値が入る。例えば、『Å』とかけば『Å』が出力される。
文字参照一覧は、市販のHTML辞典を参照するしかないだろう。
自力で対応表を作るのも、不可能ではないだろうが…。
使用例
コード
"<br />
&<br />
<<br />
=<br />
><br />
表示結果
&
<
=
>
実際問題として、文字に対応する数値を覚え、記憶を維持するのは至難の業である。そこで登場するのが文字実体参照である。
文字実体参照は、数値実体参照と同様に、一つの文字を対応する文字列で表記する方法である。文字実体参照は、その文字に関連する文字列を使用しているため、数値実体参照よりも記憶に残りやすい。
使用するならば、文字実体参照を使用する方がいいだろう。
用例としては『&***;』の『***』の部分に文字に対応する文字列が入る。例えば、『Å』とかけば『Å』が出力される。
ここで注意すべきは、文字列は大文字と小文字を識別するということである。
先の例を用いると『&ARING;』も『å』も、正しく文字が表示されることはない。当然ながら、『&aRing;』でも同様である。
使用例
コード
Å<br />
&ARING;<br />
&arind;<br />
&aRing;
表示結果
&ARING;
&arind;
&aRing;
使用頻度の高そうな文字参照を上げておこう。
| 文字実体参照 | 文字数値参照 | 文字 | 説明 |
|---|---|---|---|
| " | " | " | 引用符 |
| & | & | & | アンバーサンド |
| < | < | < | 小なり記号 |
| > | > | > | 大なり記号 |
表のセルの大きさが、うまくかわらない
HTMLを製作しているとき、表のセルの大きさを指定したくなることがよくある。<td>や<th>要素内に、属性widthやheight、スタイルシートのwidthやheightで変更できることもあるが、うまく変更されてくれないことも多い。
機能したりしなかったりする原因を特定するよりは、確実に機能する方法を取る方が現実的だ。では、いかにするか？
横幅の定義は、列ごとにスタイルを適用するのが早い。
表の列の指定には要素<col>を使う。
要素<tr>より前で指定すべきである。
表の列に対し、<col>要素は、左の列から順に一対一対応していく。
例として、4つの列を持つ表の、左から3つ目を80pxに設定するには、
コード
<table>
<col>
<col>
<col style="width:80">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
表示結果
| 1 | 2 | 3 | 4 |
コードを見てもらえればわかるが、属性のない<col>２つが左から1番目2番目の列を示している。
この例を見てもわかるように、<col>は表の列の最大数まで定義しきる必要はない。また、当然ながら表の列の数を超えて定義しても意味はなく、誤作動の要因となりうるので注意が必要である。
画像の周りの枠を消す
画像をHTML内で表示すると、周りに枠がついている場合が多い。これは、IEのデフォルト設定のせいである。
いわゆる『border』属性がデフォルトである数値に設定されてしまっているからである。
つまりこれを避けるには、こちら側からあらかじめ『border』属性を0に設定しておけばよい。
設定方法としては、属性で書き換える方法
コード
<img src="----.---" border="0">
コード
<img src="----.---" style="border:0px">
属性での変更は非推奨だそうですが、一方スタイルシートの方は一部のブラウザで正常に機能しないそうです。
一長一短ですね。
個人的はスタイルシートでデフォルトとして<img>要素すべてに定義してしまった方が簡単でコードもわずらわしくないと思いますね。
テーブル内に隙間なく画像を表示するには
table要素のtd要素内に画像を張り込むということは、わりと頻繁に発生する事態である。一番、よくあるのがリンク集のバーナーの表示である。
そんな中で、バーナーをテーブルの枠に隙間なく埋め込みたいのに、隙間ができてしまったり変な枠が余分に発生することがある。
これはどちらも、ブラウザでの初期設定のせいである。変な枠に関したは、「画像の周りの枠を消す」の項でも解説したように、img要素のborder属性のせいである。そして、賀像周りの余白に関してはtable要素内のtd要素のmarginのせいである。
imgの枠の消し方は「画像の周りの枠を消す」を参照して欲しい。こちらは、img要素のborder属性かスタイルシートのいずれかを操作すればよい。
一方、余白の方だが、tdのmarginを操作するのは、スタイルシート以外に方法がない。
コード
<table>
<tr>
<td style="margin:0px">
<img src="----.---" />
</td>
</tr>
</table>
コードをうまく表示するには
HTML中にコードを書くときには<code> </code>を使う。
<code> </code>の中に<pre> </pre>を入れて、コードを記述どおりに表示させるのが一般的な用法である。
ただし、<pre>要素の中であっても、『<』『>』は、タグの一部とみなされてしまうので、『&tl;』『>』と変換しておくことが大切である。