HTMLで書いてみよう！
（中級編）
中級編では、主にスタイルに関するタグの説明をします。



・特殊文字を表示する

    以下の文字は特殊文字なので、エスケープします。<BR>
&amp;<BR>
&lt;<BR>
&gt;<BR>
&quot;<BR>
&copy;<BR>
&reg;<BR>
&yen;<BR>
&sect;<BR>
    ★「&lt;」は「&LT;」と書くことはできません。


    結果は以下のようにになります。

    以下の文字は特殊文字なので、エスケープします。
    &
    <
    >
    "
    ©
    ®
    ¥
    §




・フォーマットどおりに表示する

    <PRE>
一行に書かれている文章は、どれだけ長くなっても、どれだけ長くなっても、どれだけ長くなっても、どれだけ長くなっても、改行されません。
また改行した場合には、&lt;BR>タグを入れなくても、改行してくれます。
</PRE>
    ★IEではフォントサイズが小さくなるようです。


    結果は以下のようにになります。

    一行に書かれている文章は、どれだけ長くなっても、どれだけ長くなっても、どれだけ長くなっても、どれだけ長くなっても、改行されません。
また改行した場合には、<BR>タグを入れなくても、改行してくれます。




・前後にインデントを入れる

    一行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。<BR>
<BLOCKQUOTE>
二行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。<BR>
<BLOCKQUOTE>
三行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。<BR>
</BLOCKQUOTE>
四行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。<BR>
</BLOCKQUOTE>
五行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。<BR>


    結果は以下のようにになります。

    一行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。
    二行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。
    三行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。
    四行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。
    五行目です。もともと引用という意味ですが、文書整形のために使用される場合が多いようです。




・リストをつくる

    以下がリストです。<BR>
<UL>
<LH>ヘッダーをつけることもできます。
<LI>標準です。
<LI TYPE="disk">●です。
<LI TYPE="circle">○です。
<LI TYPE="square">■です。
</UL>


    結果は以下のようにになります。

    以下がリストです。
      ヘッダーをつけることもできます。
    • 標準です。
    • ●です。
    • ○です。
    • ■です。






・リストをつくる（番号型）

    以下がリストです。<BR>
<OL>
<LH>ヘッダーをつけることもできます。
<LI>標準です。
<LI TYPE="1">数字です。
<LI TYPE="A">アルファベット大文字です。
<LI TYPE="a">アルファベット小文字です。
<LI TYPE="I">ローマ数字大文字です。
<LI TYPE="i">ローマ数字小文字です。
</OL>
    ★任意の数字から始める場合は<OL START="??">、途中で任意の数字に変える場合は<LI VALUE="??">とします。


    結果は以下のようにになります。

    以下がリストです。
      ヘッダーをつけることもできます。
    1. 標準です。
    2. 数字です。
    3. アルファベット大文字です。
    4. アルファベット小文字です。
    5. ローマ数字大文字です。
    6. ローマ数字小文字です。




・リストをつくる（定義型）

    以下がリストです。<BR>
<DL>
<DT>ゆたかの世界
<DD>ゆたかの趣味、思想、興味などを自由に表現するサイトです。</DD>
<DT>もーもー補完計画
<DD>ホームページの作成を支援するサイトです。</DD>
</DL>


    結果は以下のようにになります。

    以下がリストです。
    ゆたかの世界
    ゆたかの趣味、思想、興味などを自由に表現するサイトです。
    もーもー補完計画
    ホームページの作成を支援するサイトです。




・フォントを変更する

    <FONT FACE="Arial,Chicago,HelveticaBold">
This is orderd font!<BR>
</FONT>
This is normal font!<BR>
<FONT FACE="ＭＳ 明朝">
これはＭＳ明朝フォントです。<BR>
</FONT>
これは標準フォントです。<BR>
    ★フォントの候補をコンマで区切って並べます。


    結果は以下のようにになります。

    This is orderd font!
     This is normal font!
    これはＭＳ明朝フォントです。
     これは標準フォントです。
    ★ブラウズするパソコンに指定されたフォントがないとダメです。わたしのWIN+NN4.5ではANKは正常に機能していないようです。




・イメージとテキストの並べかた

    <IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100 ALIGN="top">
上揃えです。<BR>
<HR>
<IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100 ALIGN="middle">
中揃えです。<BR>
<HR>
<IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100 ALIGN="bottom">
下揃え（標準）です。<BR>
<HR>
<IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100 ALIGN="left">
イメージ左配置で<BR>
テキストは改行し<BR>
て、回り込みます。<BR CLEAR="left">
<HR>
<IMG SRC="hana.jpg" ALT="花の写真" BORDER=0 WIDTH=100 HEIGHT=100 ALIGN="right">
イメージ右配置で<BR>
テキストは改行し<BR>
て、回り込みます。<BR CLEAR="right">


    結果は以下のようにになります。

    花の写真 上揃えです。
    花の写真中揃えです。
    花の写真 下揃え（標準）です。
    花の写真 イメージ左配置で
    テキストは改行し
    て、回り込みます。
    花の写真 イメージ右配置で
    テキストは改行し
    て、回り込みます。




・テーブルとテキストの並べかた

    <TABLE BORDER=1 ALIGN="left" WIDTH="100" HEIGHT="100"><TR><TD>これはテーブルです。</TD></TR></TABLE>
テーブル左配置で<BR>
テキストは改行し<BR>
て、回り込みます。<BR CLEAR="left">
<HR>
<TABLE BORDER=1 ALIGN="right" WIDTH="100" HEIGHT="100"><TR><TD>これはテーブルです。</TD></TR></TABLE>
テーブル右配置で<BR>
テキストは改行し<BR>
て、回り込みます。<BR CLEAR="right">


    結果は以下のようにになります。

    これはテーブルです。
    テーブル左配置で
    テキストは改行し
    て、回り込みます。
    これはテーブルです。
    テーブル右配置で
    テキストは改行し
    て、回り込みます。




・文書内の特定の場所へのリンクする

    <A NAME="name1">ここです</A><BR>
<A HREF="#name1">「ここです」にリンクします。</A><BR>
    ★<A HREF="URL#name">とすれば、URLのnameにリンクします。


    結果は以下のようにになります。

    ここです
    「ここです」にリンクします




・リンクを特定のウィンドウに表示する

    Ａという名前のウィンドウに表示します。<BR>
<A HREF="a.htm" TARGET="A">a.htm</A><BR>
<A HREF="b.htm" TARGET="A">b.htm</A><BR>


    結果は以下のようにになります。

    Ａという名前のウィンドウに表示します。
    a.htm
    b.htm




ホームページへ戻る