2007年03月26日

[HTML]ホームページ作成講座その他タグ

さて、図表要素TABLEタグの説明も終わりましたので、これでほとんどHTMLのエッセンスはご理解いただけたと思います。

いよいよCSSと行きたいところですが、その前にちょっとした落ち穂拾いをしたいとおもいます。

普段あまり使われることがないかもしれませんが、こんなタグもあるよという話です。


<HR>


HR要素は文章中に横罫線を引くためのタグで、BRタグなどと同じように終了タグを持たないタグである。





インターネット上にあるこんな区切り線はHRタグで実現されていることが多いです。(たまにIMGタグで横に長い線の画像を貼っているものも見かけますが^^;


<UL></UL>
<OL></OL>


ULもしくはOL要素は箇条書きのための要素です。これら二つのタグはサブタグを持っていて、箇条書きされる個々の項目は<LI></LI>で括るようにします(LIタグは終了タグを省略して、まさに箇条書きのように書くこともできるようです)。また、ULとOLの違いはといいますと、下の例を見ていただければ分かるかと思いますが、

<UL>
<LI>すし</LI>
<LI>てんぷら</LI>
<LI>ふじやま</LI>
</UL>


  • すし
  • てんぷら
  • ふじやま

<OL>
<LI>ふじ <!-- <LI>タグは終了タグを省略してもよい -->
<LI>たか
<LI>なすび
</OL>

  1. ふじ
  2. たか
  3. なすび

このようにULで書いた箇条書きは●が打ってあるのに対して、OLでは数字が項目の前に勝手につきます。
また、この二つのタグは入れ子にすることもできます。その場合、LIの中にもう一つLIが入っていた場合文頭にある●が■や▼といったほかの記号に入れ替えられ、OLの場合に区別できるようにアラビア数字とギリシャ数字が使い分けられます。



また、箇条書きと似ていますが、定義リストを作成するための要素もあります。

<DL></DL>

定義リストとは、何かの項目について定義する場合に、定義文が改行されて字下げされているのを自動的にしてくれるものです。定義というとご大層な印象をうけますが、要するに説明するときに使われるものです。

定義リストでは定義する項目を<DT></DT>、その定義文を<DD></DD>で囲みます。

これも簡単な例を挙げてみましょう。

<DL>
<DT>HTML</DT>
<DD>Webページを記述するためのマークアップ言語W3Cが作成している規格で、最新版はHTML 4.01。</DD>
<DT>CSS</DT>
<DD>Webページのレイアウトを定義する規格。</DD>
</DL>


HTML
Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。
CSS
Webページのレイアウトを定義する規格。
このように説明する文章が勝手に字下げされているのがわかります。便利ですね〜普段使うことないと思いますけど^^;




<PRE></PRE>

PRE要素は整形済みテキストを表示するときに便利なものです。整形済みテキストとは、今までにも触れたようにHTMLは基本的に文章のレイアウトを苦手としています。たとえば、タグで括られた文章中で半角スペースをあけてもブラウザには無視されますし、TABスペースがいくつあってもきちんと反映されません。また、文の体裁を整えるために改行をいれようにもいちいち<BR>と書かなければいけません。

インターネットに公開したい文章には予めそのような体裁がすでに整えられていたり、またスペースの場所・間隔が大事な文章(例えばHTMLのコードもそうですね。スペースも改行も無視されて一行にずらっとならんだコードがあってもなかなか読めません)が多々あります。そんなときにこのPREタグを使えば便利です。いちいち<BR>と打たなくても改行してくれますし、半角スペースもTABスペースもきちんと表示されます。



しかし、あくまでもHTMLはマークアップ言語だということをお忘れずに☆使いすぎは禁物です。



文字参照

上でも言いましたが、HTMLにはタグなどのために<>&”などといった文字は特別な文字と認識され、そのままでは表示できません。しかしながら、これらの文字をどうしても表示させたい場合があります。そんなときには文字参照と呼ばれる方法を利用することが出来ます。

文字参照には数値文字参照文字実体参照の二種類がありますが、ここでは文字実体参照の方をご紹介します。
文字実体参照とはうえにあげたような特別な文字を特定の符号で表す参照方法です。

よく使われそうな参照文字をあげておきます。

<    &lt;
>   &gt;
&   &amp;
"   &quot;
 (半角スペース)   &nbsp;






さて、こんなもので、HTML編は終了したいと思います。まだまだ説明したくても説明しきれないことがたくさんありますが、それは出てきたときに説明していきますし、ここまで読んだみなさんのちからなら自分で調べることも出来ると思います。

インターネット上にはタグ辞書などと呼ばれるものも多数ございますので、そちらを参考にしてもいいかもしれません。

また、疑問・質問はコメント欄に書いてくだされば、お答えできる範囲で答えて行きたいと思います。



では、次回からはCSS編に突入したいと思います!!乞うご期待(
posted by ラリコ at 01:04 | Comment(0) | TrackBack(0) | 小技術
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。