トップページへ戻る / タグ辞典トップに戻る / HP作成講座トップへ戻る

レイアウトタグ
▲改行する
本日は<BR>晴天なり。
本日は
晴天なり。
  • 改行のタグです。<BR>のある位置で次の行へ移動します。
▲改行を禁止する
<NOBR>この例ではわかりませんが、この文章は自動的に改行されません。</NOBR>
この例ではわかりませんが、この文章は自動的に改行されません。
  • ブラウザには、テキストラップという機能があって、ウィンドウ幅におさまりきらない文字列は、ウィンドウの右端で自動的に改行されて表示されます。このタグを用いれば、この機能を無視して、全て1行で表示されます。
▲センタリング(中揃え)する
<center>本日は晴天なり。</center>
本日は晴天なり。

  • このようにcenter内の部分がセンタリングされます。
  • <div align=center>でも同じような指定ができます。
▲左揃え、中揃え、右揃えを指定する
<div align=left>左向け左！！</div>
<div align=center>前習え！！</div>
<div align=right>右向け右！！</div>
左向け左！！
前習え！！
右向け右！！
  • このように表示位置の指定ができます。
  • <center>タグよりよりもこちらのタグを推薦します。
▲段落の位置を揃える
<p align=left>左向け左！！</p>
<p align=center>前習え！！</p>
<p align=right>右向け右！！</p>

左向け左！！

前習え！！

右向け右！！

  • divでの指定に似ていますが、少しだけ違います。このタグでは、pで囲まれた段落の直前、直後に1行スペースが入ります。
▲罫線(横線)を引く
<HR>
<HR size=3 width=200 align=center color=red noshade>
  • 横線を引くタグです。管理人はこのタグが好きなので、多用しています。もちろんこのページにも。
  • 書式は、size=線の太さ、width=線の長さ、align=位置、color=線の色、noshadeを付けると影を消えます。
  • 何も指定しない<HR>だけの場合は、size=2の影付きの罫線がページ横幅一杯に引かれます。
▲リストを作る
番号なしリストを作る
<ul>
<li>箇条書き１
<li>箇条書き2
<li>箇条書き3
</ul>
  • 箇条書き１
  • 箇条書き2
  • 箇条書き3
番号つきリストを作る
<ol>
<li>箇条書き１
<li>箇条書き2
<li>箇条書き3
</ol>
  1. 箇条書き１
  2. 箇条書き2
  3. 箇条書き3
  • <ul>で囲めば、番号なしリスト。
  • <ol>で囲めば、番号つきリスト。
リストの見出しを指定する
<ul>
<li type=circle>箇条書き１
<li type=disk>箇条書き2
<li type=square>箇条書き3
</ul>
  • 箇条書き１
  • 箇条書き2
  • 箇条書き3
番号つきリストの表示形式を指定する
<ol>
<li type=A>箇条書き１
<li type=a>箇条書き2
<li type=Ⅰ>箇条書き3
</ol>
  1. 箇条書き１
  2. 箇条書き2
  3. 箇条書き3
  • 指定には、「A、a、Ⅰ、ⅰ、1」。順に、英語大小文字、ローマ大小文字、数字があります。
番号つきリストの番号を指定する
<ol>
<li value=4>箇条書き１
<li>箇条書き2
<li>箇条書き3
</ol>
  1. 箇条書き１
  2. 箇条書き2
  3. 箇条書き3
  • valueで番号の値を指定する。
▲文字列を入力した通りに表示する
<pre>
　ＪＪＪ　ＡＡＡ　　ＣＣ　Ｋ　Ｋ	ＰＰＰ　ＯＯＯ　ＤＤ
　　Ｊ　　ＡＡＡ　Ｃ　　　ＫＫ	ＰＰＰ　Ｏ　Ｏ　Ｄ　Ｄ
　ＪＪ　　Ａ　Ａ　　ＣＣ　Ｋ　Ｋ	Ｐ　　　ＯＯＯ　ＤＤ
</pre>

　ＪＪＪ　ＡＡＡ　　ＣＣ　Ｋ　Ｋ	ＰＰＰ　ＯＯＯ　ＤＤ
　　Ｊ　　ＡＡＡ　Ｃ　　　ＫＫ	ＰＰＰ　Ｏ　Ｏ　Ｄ　Ｄ
　ＪＪ　　Ａ　Ａ　　ＣＣ　Ｋ　Ｋ	Ｐ　　　ＯＯＯ　ＤＤ
  • タグの機能を無視した表示ができるため、裏技的な利用ができます。
  • あまり、オススメできるタグではありませんが、アスキーアートなんかにはいいかもしれませんね。
  • 観覧者のブラウザのデフォルトフォントによっては、レイアウトが崩れるかもしれません。あらかじめフォントを指定しておくと、確実に期待通りの効果が得られると思います。