文字を書く！

　ホームページを全て画像で表現する事も出来ますが、ネットワーク環境が向上している今でも無駄に重たいページは好まれません。そのためやはりテキストが基本となります。スタイルシート等を使えば更に多用なデザインが出来ますが、まずはHTMLで可能な文字表現を覚えましょう。

基本

<FONT size="2" color="#0000F0">
<FONT size="4" color="#F04040">はじめまして！</FONT>
ここは<FONT size="3">かろのり</FONT>のホームページです。
</FONT>
　　　　　　　　↓
はじめまして！ここはかろのりのホームページです。

　通常文字を書く時に最も使うと思われるのが、最初の例にも挙げたFONTタグです。FONTタグは<FONT>〜</FONT>だけでは意味がなく、必ず属性を入れて使います。
　属性はsizeとcolorでsize属性には1〜7の数字で7段階に変えることが出来ます。colorは前のページで示したとおりです。

　ところで上の例を見て気付いた事はありませんか？

　まず４行に分けて書いてあるのにブラウザで表示すると１行になっています。
　前のページでも述べましたが、HTMLではソースでいくら改行してもブラウザ上では改行されません。ブラウザ上で改行と同様の効果を得る方法はいくつかありますが、単純に改行を行う場合はBRタグを使用します。
<FONT size="2" color="#0000F0"><FONT size="4" color="#F04040">はじめまして！</FONT><br>ここは<FONT size="3">かろのり</FONT>のホームページです。</FONT>
　　　　　　　　↓
はじめまして！
ここはかろのりのホームページです。

　このように<br>を入れてあれば、ソース上で改行しなくても改行して表示されます。面倒に思えますがソースを見易く書くのに非常に都合が良いので慣れましょう。この場合もソースの見易さを考えて<br>と改行は一緒にしておくのがいいでしょう。

　次に、１行目と４行目のFONTタグです。これによってその中で新たにFONTタグで指定していない部分の文字を装飾する事になります。これをタグの「入れ子」と言います。３行目ではsize属性のみしているので色は変わっていません。このように使い方によっては無駄なタグを書かずに済みますが、やり過ぎると後で見た時に分かりづらくなってしまうので気を付けましょう。入れ子は条件が合えば別のタグ同士でも行えます。

MSフォントを使用する

<FONT size="5" face="ＭＳ 明朝">はじめまして！</FONT>
　　　　　　　　↓
はじめまして！

　FONTタグにはface属性というものがあり、これを使うと明朝体やゴシック体といったフォントを使用することが出来ます。
　しかしこれらのフォントは、それを見る人のマシンにも同じフォントがインストールされていないと有効ではありません。また、"Comic sans MS"等のフォントは半角文字にしか有効ではなく、環境によっては文字化けするので、あまり特殊なフォントを使うことは避けた方が無難です。
　ちなみに指定されていない状態ではブラウザに設定された標準のフォントで表示されます。

見出し


<H1>こんにちわ</H1>
　　　　　　↓

こんにちわ

<H6 align="center">こんにちわ</H6>
　　　↓
こんにちわ

　ページのタイトルなど見出しを付ける場合に、手軽に文字サイズを変えて太字にした上、前後に空白行が付きます。前後の改行は前後のタグによって有効であったり無かったりします。
　属性にはalignがあり、left,center,rightで左寄せ、中央、右寄せで表示し、初期値はleftです。
　また、FONTタグのsize属性と違い、H1からH6までの6段階しかない上、1が最大で数字が大きくなるほど文字は小さくなる事に注意してください。

手軽に使える装飾タグ

<B>こんにちわ</B>（太字：Bold）→こんにちわ
<I>こんにちわ</I>（斜体：Itaric）→こんにちわ
<U>こんにちわ</U>（下線：Underline）→こんにちわ
<S>こんにちわ</S>（取り消し線：Strike）→こんにちわ
<TT>こんにちわ</TT>（等幅フォント：TeleType）→こんにちわ
どうも<SUP>こんにちわ</SUP>（上付きの添え字）→どうもこんにちわ
どうも<SUB>こんにちわ</SUB>（下付きの添え字）→どうもこんにちわ

　これらのタグは属性はありませんが、少ない字数で手軽に文字を装飾する事が出来ます。どれも英単語の頭文字なので、覚えやすい様に書いてあります。TTの等幅フォントとは、全角・半角それぞれで１文字ごとのスペースが固定され、複数行の横幅を揃えたい場合などに使用します。

段落

<P>ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、「あ、○○さんだ。」と思った瞬間、</P>
<P align="center">「○○サンダー！」という魔法か必殺技が脳裏に浮かんだ事はありませんか？</P>
<P align="right">このサイトはそんなどうでもいい事を大事にしたりしなかったりする、そんな感じのところです。</P>
　　　　　　　　　　　　　　　↓

ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、「あ、○○さんだ。」と思った瞬間、

「○○サンダー！」という魔法か必殺技が脳裏に浮かんだ事はありませんか？

このサイトはそんなどうでもいい事を大事にしたりしなかったりする、そんな感じのところです。

　テキストや画像等の要素を一つの段落としてまとめ、前後に改行を作ります。属性にはalignがあり、"left","center","right"で全体を左寄せ、中寄せ、右寄せにします。属性を省略すると他で指定されていなければleftが適用されます。

整形済みテキスト

<PRE>
ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、
「あ、○○さんだ。」と思った瞬間、
「○○サンダー！」という魔法か必殺技が脳裏に浮かんだ事はありませんか？
このサイトはそんなどうでもいい事を大事にしたりしなかったりする、
そんな感じのところです。
</PRE>
　　　　　　　　　　　　　　　↓
ふと見知った誰かを見かけた時、チャットに知り合いが現れた時、
「あ、○○さんだ。」と思った瞬間、
「○○サンダー！」という魔法か必殺技が脳裏に浮かんだ事はありませんか？
このサイトはそんなどうでもいい事を大事にしたりしなかったりする、
そんな感じのところです。

　先に述べた通り、通常ソース上での改行はブラウザ上では反映されない上、半角スペース等も基本的に認識されません。
　しかし、PREタグを使用するとその間の改行や半角スペースが全て有効になるので、長い文章を書くのにいちいちタグで改行する必要がありません。
　但し、PREタグ内の要素に対してはウィンドウを小さくしても強制改行が行われず、下にスクロールバーが表示されてしまうので、使用する場合には適度に改行を入れるようにしないといけません。また、Pタグ等と同様に前後に改行が入り、TTタグのように等幅フォントにもなってしまいます。

箇条書きリスト

<UL type="disc">
 <LI>準備する！（HTMLの基本）</LI>
 <LI>文字を書く！（文字装飾回り）</LI>
 <LI type="square">画像を貼る！（IMGタグ）</LI>
 <LI>レイアウトする！（TABLEタグ他）</LI>
 <LI type="circle">ページを繋ぐ！（リンク）</LI>
</UL>

　　　　　　　↓
  • 準備する！（HTMLの基本）
  • 文字を書く！（文字装飾回り）
  • 画像を貼る！（IMGタグ）
  • レイアウトする！（TABLEタグ他）
  • ページを繋ぐ！（リンク）

　LIタグで並べた要素に記号を付けてリストアップします。
　UL、LIタグ共にtype属性を持ち、"disc","square","circle"で前に付く記号が変わります。（初期値はdisc）

順序付きリスト

<OL type="1" start="4">
 <LI>準備する！（HTMLの基本）</LI>
 <LI>文字を書く！（文字装飾回り）</LI>
 <LI type="a">画像を貼る！（IMGタグ）</LI>
 <LI value="1">レイアウトする！（TABLEタグ他）</LI>
 <LI type="I">ページを繋ぐ！（リンク）</LI>
</OL>

　　　　　　　↓
  1. 準備する！（HTMLの基本）
  2. 文字を書く！（文字装飾回り）
  3. 画像を貼る！（IMGタグ）
  4. レイアウトする！（TABLEタグ他）
  5. ページを繋ぐ！（リンク）

　LIタグで並べた要素に数字やアルファベットを付けて順序付きでリストアップします。
　type属性で前に付く記号を"1"（アラビア数字）、"a"（ローマ字小文字）、"A"（ローマ字大文字）、"i"（ローマ数字小文字）、"I"（ローマ数字大文字）にし、OLタグのstart属性でリストの初期値を、LIタグのvalue属性でその場の番号を変更出来ます。
≪Index　 ≪Back　 Next≫