文字や画像の位置を指定する
hnタグ、またはpタグにalign オプションを付け、<h2 align=center>のようにすることで、見出しや段落をセンタリングさせます。またalign=rightで右寄せ、align=leftで左寄せます。
改行して、さらにその下に一行あけるために使う「タグ」
<p>
強制的に改行する「タグ」
<br />
文字や画像を常にプラウザの中央に表示させる
- タグ<center>を使ったセンタリング:<center>-</center>で挟まられた内容はすべて中央揃えになります。
-
- 段落全体の場合:<p align=center>と</p>で挟む
- 見出しや文字の場合:<hn align=center>と</hn>で挟む (ここで、n=1,2,…)
- 画像の場合:<center> <img src=url> </center>
右側に表示させる
- 段落全体の場合:<p align=right>と</p>で挟む
- 見出しや文字の場合:<hn align=right> と</hn>で挟む(ここで、n=1,2,…)
- 画像の場合:<img src=画像ファイル名 align=right>
左側に表示させる
- 段落全体の場合:<p align=left>と</p>で挟む
- 見出しや文字の場合:<hn align=left>と</hn>で挟む (ここで、n=1,2,…)
- 画像の場合:<img src=url, align=left>
例
HTML | 画面表示 |
---|---|
大阪府立大学経済学部 | 大阪府立大学経済学部 |
大阪府立大学<p>経済学部 | 大阪府立大学経済学部 |
大阪府立大学<br>経済学部 | 大阪府立大学 経済学部 |
<center>経済学部 </center> | 経済学部 |
<p align=center>経済学部</p> |
経済学部 |
<p align=right>経済学部</p> |
経済学部 |
<p align=left>経済学部 </p> |
経済学部 |
< img src=i1.gif align=left> | |
< img src=i1.gif align=right> |
文章の配置に関する他のタグ
- <address> と </address>:文書の作成者や連絡先を <address> と </address> で挟みます。
- <pre> と </pre>:このタグがなければ、HTMLで入力した半角スペースや改行コードなどは無視されます。HTMLでの文章の配置と画面上の表示を一致させるため, <pre>と </pre>タグを使います。
- 引用:<blockquote> と </blockquote> で挟んだ内容の左右がインデントされます。
- 改行なし:<nobr> と </nobr> で挟んだ部分は改行されません。
この中で改行したいときは <wbr> を使います。
例
HTML | 画面表示 |
---|---|
preを使っていない<br /> 1限 2限 3限 情報基礎 外書研究 基礎ゼミ |
preを使っていない 1限 2限 3限 情報基礎 外書研究 基礎ゼミ |
preを使っている<br /><pre> 1限 2限 3限 情報基礎 外書研究 基礎ゼミ </pre> |
preを使っている
1限 2限 3限 情報基礎 外書研究 基礎ゼミ |
<address> 学園町1-1 </address> <blockquote> 大阪府立大学<br> 経済学部 </blockquote> |
学園町1-1
|