ホームページ基礎知識講座「第4章 文章の整形・修飾」

フォントスタイル(文字の大きさや色の指定等)、箇条書き(リスト)の仕方など文章の整形や文字修飾をするためのタグを紹介
第3章まででHTMLを書く際の基本的な部分とリンクの作成方法は分かっていただけたと思います。第4章では文章を整形するためのタグを紹介していきます。

■ 様々なリスト(箇条書き)

ここでは、様々な個条書きのためのタグを紹介します。箇条書きの仕方にはいくつか方法があり、箇条書きにするものの前に番号がつくものとつかないものがあります。

◆番号付リスト <OL>

番号付リストは1から順番の番号付のリストが作られます。リストタグの名称はOLでOredered Listの略です。
番号付リストは <OL></OL>で構成されます。リストアイテムのタグは<LI>を使用します。

書式実行結果
 <OL>
  <LI> 営業部</LI>
  <LI> 経理部</LI>
  <LI> 総務部</LI>
  <LI> 制作部</LI>
  <LI> 企画開発部</LI>
 </OL>

  1. 営業部
  2. 経理部
  3. 総務部
  4. 制作部
  5. 企画開発部

◆番号無しリスト <UL>

番号無しリストは番号付リストで使ったOLの代わりにUL(Unordered list)を使用し、 <UL></UL>で構成されます。そして、リストアイテムにはブレット(印)が付けられます。

書式実行結果
 <UL>
  <LI> 営業部
  <LI> 経理部
  <LI> 総務部
  <LI> 制作部
  <LI> 企画開発部
 </UL>

  • 営業部
  • 経理部
  • 総務部
  • 制作部
  • 企画開発部

■文字のスタイル

HTMLには明示的にフォントスタイルを指定する方法もあります。文字スタイルタグは開始タグと終了タグを持っています。次の4つのタグがあります。 ただしいくつかのタグはブラウザによっては表示されないこともありますのであまり多用しないようにしましょう。 また、フォントスタイルは入れ子にする(複合フォント)こともできますが、これもブラウザによってはサポートしていない場合があります。

 □ <B>:ボールド体 (太文字) 太文字
 □ <I>:イタリック体 (斜体) 斜体文字
 □ <TT>:タイプライタ体 タイプライタ文字
 □ <U>:アンダーライン(下線付) 下線付文字
 □ <STRIKE> または <S>:取消し線 取消文字
 □ <SUP>:肩付き文字 肩付き肩付き
 □ <SUB>:下付き文字 下付き下付き
◆複合フォント
<B><I>アンダーライン付太文字<I><B>    アンダーライン付太文字

◆フォントサイズ

<FONT>タグはフォントサイズを変更する場合に用います。サイズの有効な範囲は1〜7で指定します。デフォルトフォントサイズは3です。 また、サイズに+または-を指定し、直前のフォントサイズの差分(+/-)で指定することもできます。

 □<FONT SIZE=1>Font Size 1</FONT> ⇒  Font Size 1
 □<FONT SIZE=2>Font Size 2</FONT> ⇒  Font Size 2
 □<FONT SIZE=3>Font Size 3</FONT> ⇒  Font Size 3
 □<FONT SIZE=4>Font Size 4</FONT> ⇒  Font Size 4
 □<FONT SIZE=5>Font Size 5</FONT> ⇒  Font Size 5
 □<FONT SIZE=6>Font Size 6</FONT> ⇒  Font Size 6
 □<FONT SIZE=7>Font Size 7</FONT> ⇒  Font Size 7

◆フォントの重ね指定

<I><TT><FONT SIZE=5><B>italic fixed bold text of size 5</B></FONT></TT></I>

 ▲記述例↑ ▼表示例↓

italic fixed bold text of size 5

 <FONT SIZE=+2>T</FONT>HE
 <FONT SIZE=+2>F</FONT>ONT
 <FONT SIZE=+2>S</FONT>IZE
 <FONT SIZE=+2>(C</FONT>APS SIZE
 <FONT SIZE=+2>)</FONT>
 THEFONTSIZE(CAPS SIZE)

 <FONT SIZE=-2>か</FONT>
 <FONT SIZE=-1>ん</FONT>
 <FONT SIZE=+1>た</FONT>
 <FONT SIZE=+2>ん</FONT>
 <FONT SIZE=+3>H</FONT>
 <FONT SIZE=+2>T</FONT>
 <FONT SIZE=+1>M</FONT>
 <FONT SIZE=-1>L</FONT>
 <FONT SIZE=-2>!</FONT>
 HTML!

◆カラーフォント

FONTタグに新しくテキストの色を指定できる COLOR属性が追加されました。色は#RRGGBBの16進数での三原色を指定するか、色の名称を指定します。


 <FONT COLOR="#FF0000">#FF0000のテキスト</FONT>  #FF0000のテキスト
 <FONT COLOR="#00FF00">#00FF00のテキスト</FONT>  #00FF00のテキスト
 <FONT COLOR="#0000FF">#0000FFのテキスト</FONT>  #0000FFのテキスト
 <FONT COLOR="Red">赤色のテキスト</FONT>  赤色のテキスト
 <FONT COLOR="Green">緑色のテキスト</FONT>  緑色のテキスト
 <FONT COLOR="Blue">青色のテキスト</FONT>  青色のテキスト

◆<BIG>, <SMALL> タグ

HTML 3.0のタグとして、フォントの大きさを指定するタグとして、フォントのサイズを大きくする<BIG>タグと、フォントのサイズを小さくする<SMALL>タグがサポートされました。フォントの大きさを変更するテキストを開始タグと終了タグで囲みます。なお、<BIG><SMALL>タグは入れ子にすることが可能です。

  1. Normal Font
  2. <BIG>Big Font</BIG>
  3. <SMALL>small font</SMALL>
  4. <BIG>Big <BIG>BIG <BIG>FONT</BIG></BIG></BIG>
  5. <SMALL>small <SMALL>small font</SMALL></SMALL>
  6. <BIG>Big Font <SMALL>Small font</SMALL></BIG>
  7. <SMALL>small Font <BIG>Big font</BIG></SMALL>
  1. Normal Font
  2. Big Font
  3. small font
  4. Big BIG FONT
  5. small small font
  6. Big Font Small font
  7. small Font Big font

small  Normal big  Big  BIG


◆罫線

HTMLには標準でブラウザのウィンドウ幅だけ罫線を引くタグが用意されています。この罫線は節が変わる時やタイトルと本文を分ける場合などに用いられ、<HR>タグを使用します。<HR>タグはワンサイドタグで開始タグや終了タグはありません。記述すればそこに罫線が引かれます。


◆改行 <BR>

HTML文書は改行を明示的に指定しなければなりません。HTML文書で明示的に改行するには <BR> タグを用います。<BR>タグはワンサイドタグで開始タグや終了タグはありません。改行は行間に余分なスペースを入れずに強制的に改行を行います。この<BR>タグは書いた回数だけ改行されます。

2行分改行<BR><BR>
改行前後文章1
1行分改行<BR>
改行前後文章2
2行分改行

改行前後文章1
1行分改行
改行前後文章2

Copyright © 2009 無料ホームページ作成講座 All rights reserved.
DesignTemplate by 無料ホームページHTMLテンプレート