HTML編 15/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
レイアウト
そのまんま表示する
横線を引く




そのまんま表示する

●<PRE>
<BR>やら<DIV ALIGN>やら、めんどくさい…というあなたにお勧めのタグです。今入力しているテキストエディタに表示している通り、タグを使わずに文字を表示するという、横着者向けの(笑)タグがあります。<PRE>と</PRE>に挟まれた部分は途中で改行すれば、<BR>と入力しなくても改行されますし、スペースなどもそのまま表示してくれます(タブは使えません)。但し、ブラウザの幅に合わせて自動的に改行したりすることはできません。横着するには、それなりにどこかをあきらめなければなりません。テキストは全て等幅フォントになります。
「◆◆〜」の下に<PRE>を使って「おしながき」部分を作ってみましょう。はスペース、半角スペースを入れています。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
<FONT SIZE="2" COLOR="#3300ff">◆</FONT>
<FONT SIZE="2" COLOR="#6600ff">◆</FONT>
<FONT SIZE="2" COLOR="#9900ff">◆</FONT>
<FONT SIZE="2" COLOR="#cc00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00cc">◆</FONT>
<FONT SIZE="2" COLOR="#ff0099">◆</FONT>
<FONT SIZE="2" COLOR="#ff0066">◆</FONT>
<FONT SIZE="2" COLOR="#ff0033">◆</FONT>
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
</DIV>

<PRE>
-----------------------------------------------------------
     おしながき
-----------------------------------------------------------
●Profile いわゆる自己紹介ってやつです。
●Macintosh私が使ってきた歴代の愛機をご紹介します。
●Travel  旅行先で撮った写真を掲載しています。
    まぁ、笑ってやってくださいませ。
●Enquete アンケートにご協力ください。
-----------------------------------------------------------
</PRE>
</BODY>
</HTML>




横線を引く

●<HR><HR NOSHADE>
線を引くこともできますが、残念ながら縦や斜めの線は引けません。また下の2種類以外に色を付けることも基本的に出来ません(IEでのみ色を付けられます)。線は<HRの>タグを書きます。立体的な線になりますが、オプションにNOSHADEを付けることでただの線になります。<BR>同様単独のタグですので、閉じタグは必要ありません。
<HR>の前後(上下?)は自動的に改行されてしまうので、文字に続けて線を引くことも出来ません。

<HR>です。
<HR NOSHADE>です。

●<HR(NOSHADE) SIZE="n" WIDTH="n" ALIGN="n">
<HR>のオプションタグはNOSHADE以外にも色々付けられます。
SIZEは線の太さです。パラメータに1〜100まで指定できます。単位はピクセルです。何も指定しないとデフォルトの太さ「2」となります。上の例は「SIZE="5"」にしています。環境によってはデフォルトのSIZE="2"では、HRとHR NOSHADEの差が出ないためです。デフォルト(SIZE="2")の太さはこの大きさです。
WIDTHは長さです。長さは2種類の指定方法が選べます。一つはピクセルで指定する絶対的なサイズ、もう一つはブラウザの幅に対して何%の長さにするという相対的なサイズです。絶対数値での指定はパラメータに数字を入力してください。相対数値で指定する場合は50%と「%」で指定します。50%ならブラウザの半分の長さで表示され、ブラウザをリサイズするごとに線の長さも変わります。WIDTHを指定しなければ100%の長さです。
<Hn>や<P>同様ALIGNオプションで位置の指定も可能です。パラメータには「left」「center」「right」を入れます。デフォルトはcenterです。色々と試してみてください。長さを短くして、太さを太くすれば100ピクセルまでの縦線も可能ですね(笑)。View

「ようこそ!」と「Kimura's Room」の間に太さ5ピクセル、長さ321ピクセルの線を入れました。「おしながき」の部分にも線を入れてみました。

<HR SIZE="5" WIDTH="321">
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
<FONT SIZE="2" COLOR="#3300ff">◆</FONT>
<FONT SIZE="2" COLOR="#6600ff">◆</FONT>
<FONT SIZE="2" COLOR="#9900ff">◆</FONT>
<FONT SIZE="2" COLOR="#cc00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00ff">◆</FONT>
<FONT SIZE="2" COLOR="#ff00cc">◆</FONT>
<FONT SIZE="2" COLOR="#ff0099">◆</FONT>
<FONT SIZE="2" COLOR="#ff0066">◆</FONT>
<FONT SIZE="2" COLOR="#ff0033">◆</FONT>
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
</DIV>
<PRE>
<HR NOSHADE SIZE="5" WIDTH="400" ALIGN="left">
           <B>おしながき</B>
<HR SIZE="7" WIDTH="400" ALIGN="left">
●Profile  いわゆる自己紹介ってやつです
<HR WIDTH="400" ALIGN="left">
●Macintosh 私が使ってきた歴代の愛機をご紹介します。
<HR WIDTH="400" ALIGN="left">
●Travel   旅行先で撮った写真を掲載しています。
       まぁ、笑ってやってくださいませ。
<HR WIDTH="400" ALIGN="left">
●Enquete  アンケートにご協力ください。
<HR NOSHADE SIZE="5" WIDTH="400" ALIGN="left">
</PRE>
</BODY>
</HTML>

backindexnext