タイトルロゴ


■ 改行する

改行したい場所に<BR>を書くだけです。

HTMLソース結果
改行したいな<br>すぐできた!! 改行したいな
すぐできた!!





■ 自動改行を禁止する

ブラウザには、テキストラップという機能があり、画面内に入りきらない場合、右端で自動的に改行しています。

このテキストラップの機能を制限し、改行されないように設定できるのが、<NOBR>タグです。

<BR>タグと違って、<NOBR>文章</NOBR>という風に、終了のタグが必要です。

■ 改行したい場所を指定する

<NOBR>〜〜</NOBR>のなかで、この位置なら改行しても良い、という場所に<WBR>というタグを記述します。

改行位置を強制的に決定する<BR>タグに対し、<WBR>タグは、改行位置を許可するといった関係になりますので、<WBR>タグを指定した位置で必ず改行されるわけではありません。

改行されるかどうかは、ブラウザの画面幅によって決定されるので、画面幅が広い場合だと、<WBR>を指定しても無視される場所も出てくる場合があります。





■ 文字の大きさを指定する

特定の文字の大きさを自由に変えるには、文字を <FONT size="x">〜</FONT>で囲みます。"x"には、1から7までの数字でサイズを指定することができます。ちなみに、文字の標準サイズ(デフォルトサイズ)はサイズ3と同じ大きさです。

※このぺージはスタイルシートで11ポイントと設定していますので、標準サイズ(デフォルトサイズ)ではありません。

HTMLソース結果
<font size="1">サイズ1</font>
<font size="2">サイズ2</font>
<font size="3">サイズ3</font>
<font size="4">サイズ4</font>
<font size="5">サイズ5</font><br>
<font size="6">サイズ6</font>
<font size="7">サイズ7</font>
サイズ1 サイズ2 サイズ3 サイズ4 サイズ5
サイズ6 サイズ7





■ 文字の種類を指定する

文字の種類を変えるには、文字を <FONT face="x">〜</FONT>で囲みます。"x"には、任意のフォント(種類)を指定することができます。
しかし、表示したいフォントが相手先のパソコンにインストールされていないと、そのOS標準のフォントで表示されます。ちなみに、文字の標準フォントはウィンドウズでは「MS 明朝」。マックOSでは「Osaka」。

HTMLソース結果
<font face="恋文ペン字">恋文ペン字</font><br>
<font face="ふみゴシック">ふみゴシック</font><br>
<font face="Times new Roman">Times new Roman</font><br>
<font face="Impact">Impact</font><br>
<font face="Amaze" size="5">Amaze</font>
恋文ペン字
ふみゴシック
Times new Roman
Impact
Amaze





■ 文字のスタイルを指定する

文字には,特殊効果をつけることができます。この特殊効果を「スタイル」といいますが、スタイルには以下のものがあります。

HTMLソース結果
<B>太字</B><br>
<I>イタリック</I><br>
<U>下線</U><br>
<STRIKE>取消し線</STRIKE><br>
<TT>等幅文字</TT><br>
<SUP>上付き文字</SUP><br>
<SUB>下付き文字</SUB>
太字
イタリック
下線
取消し線
等幅文字
上付き文字
下付き文字





■ 文字色を指定する

特定の文字の色を変えるには,FONT要素にcolor属性をつけます。属性値は、カラーコードかカラーネームで指定します。

HTMLソース結果
<font color="#808080">グレー</font><br>
<font color="#ff0000">赤</font><br>
<font color="#008000">緑</font><br>
<font color="#ffff00">黄色</font><br>
<font color="#0000ff">青</font><br>
グレー


黄色





■ 文字に背景色をつける

<SPAN>要素に属性 style=background:をつけています。N.Nにも対応しています。

HTMLソース結果
<span style="background:red; color:white">
赤帯に白い文字
</span>
赤帯に白い文字


またTABLE要素を使って同じような効果が出せます。(少し背景が太くなります)
関連項目---
テーブルについて---

HTMLソース結果
<table border="0" bgcolor="red">
<td>
<font color="white">
これも赤帯に白い文字
</font>
</td>
</table>
これも赤帯に白い文字





■ 文字をスクロールする

スクロールさせたい文字を <marquee></marquee> で囲います。N.N未対応です。

HTMLソース結果
<marquee>
文字が見にくいです!!やめましょう!!!
</marquee>
文字が見にくいです!!やめましょう!!!





■ 文字を点滅させる

点滅させたい文字を <blink></blink> で囲います。I.E未対応です。

HTMLソース結果
<blink>
文字が見にくいです!!
</blink>
文字が見にくいです!!





■ 行揃えを指定する

ページ内での文字列の表示位置を「行揃え」といいます。「行揃え」には,左(left)、中央(center)、右(right)がありますが、DIV要素(<DIV>)に align属性をつけることで、行揃えが指定できます。ちなみに無指定の場合は、左(left)と同じになります。

HTMLソース結果
<DIV align="left"> 左寄せ </DIV><br>
<DIV align="center"> 中央揃え </DIV><br>
<DIV align="right"> 右寄せ </DIV>
左寄せ

中央揃え

右寄せ





■ センタリングする

<DIV align="center"></DIV>のタグは<center></center>のタグに置き換えることが出来ます。センタリングしたい所を囲えば、全てセンタリングできます。

HTMLソース結果
<center>
センタリングされました!!<br>
どうです?
</center>
センタリングされました!!
どうです?





■ リストを作る

項目や箇条書きを表示したい場合には「リスト」を使います。リストには「マークリスト」と「番号リスト」があります。 マークリストは,全体を<UL>〜</UL>で囲み、さらに各項目を <LI>〜</LI>で囲みます。

HTMLソース結果
<UL>
<LI>項目1</LI>
<LI>項目2</LI>
<LI>項目3</LI>
</UL>
  • 項目1
  • 項目2
  • 項目3



リストのマークを指定することもできます。<UL>または <LI>に,type属性で指定します。<UL>につけることでリスト全体をそのマークに、<LI>につけることで特定の項目だけをそのマークにすることができます。

HTMLソース結果
<UL>
<LI type="circle">項目1</LI>
<LI type="disc">項目2</LI>
<LI type="square">項目3</LI>
</UL>
  • 項目1
  • 項目2
  • 項目3



番号リストは、全体を<OL>〜</OL>で囲み、さらに各項目を <LI>〜</LI>で囲みます。

HTMLソース結果
<OL>
<LI>項目1</LI>
<LI>項目2</LI>
<LI>項目3</LI>
</OL>
  1. 項目1
  2. 項目2
  3. 項目3



<OL>または <LI>に,以下のいずれかのtype属性をつけることにより、番号の種類を指定することができます。

type="1" type="i" type="I" type="a" type="A"

HTMLソース結果
<OL type="A">
<LI>項目1</LI>
<LI>項目2</LI>
<LI>項目3</LI>
</OL>
  1. 項目1
  2. 項目2
  3. 項目3





■ 文字に読み仮名をふる

<RUBY></RUBY>で囲い<rb>には漢字などを。<rt>にはふり仮名などを書きます。<rb>や<rt>ともに終了タグはいりません。

HTMLソース結果
<ruby>
<rb>老若男女
<rt>ろうにゃくなんにょ
</ruby>
老若男女 ろうにゃくなんにょ

TOPへもどる