目次
|
文字のサイズを変化させたり、ボールド（太字）にしたり、イタリック（斜体）にしたり、文字に色をつけたり、することができます。（注意：文字の点滅はネットスケープ：NS のみサポートしており、マイクロソフトのインターネットエクスプローラ：IE では動作しません） |
|
また文字を左寄せ 中央寄せ 右寄せ |
| とすることもできます。これらは、<body></body>の中に書かれるインサイドタグ、またはBODYのアトリビュート（属性）指定により設定できます。 |
|
<HTML> |
右に示した、前回作成した【例１-1】を加工しながら、文字の修飾の方法を説明をします。指示に従い、確認作業を行ってください。 |
| ホームページで標準的に使用する文字のサイズは、特に指定しない限り、この説明文で使用しているサイズとなります。この文字サイズは「３」サイズです。ところが、ある場所以降の文字サイズを変更したい場合があります。たとえば、次から文字サイズを「４」にして 例えば、次のように記述すると、途中で変更指定をしない限り、このページは文字サイズ「４」で表示されます。 【練習課題】 【例1-1】のBody部を以下のように変更し、実際の動作を確認しなさい。 |
| <body> <basefont size="4"> これ以降の文字は４サイズで表示されます </body> |
| つぎの例は、途中から変更をするものです。 |
| <body> なにも指定していないので、文字サイズは３で表示されます <basefont size="2"> これ以降の文字は２サイズで表示されます <basefont size="4"> これ以降の文字は４サイズで表示されます </body> |
（１）絶対指定（個々の文字のサイズを具体的に指定する方法）
| 標準の文字サイズが指定されていても、個々の文字の大きさは、フォントサイズ指定をすることで、右の７種類のサイズで表示するように変更することができます。具体的には、フォントサイズ・タグで、サイズの指定をします。サイズの最小値は１、最大値は７となります。 右の１は<font size="1">１</font> とフォントサイズ・タグで指定して表示しています。 |
１ ２ ３ ４ ５ ６ ７ |
【練習課題】
|
【例１-１】のHELLOW SAMPLEのフォントサイズを、１から７まで変化させ、ブラウザで表示できるか、確認しなさい。 【例２−１】の実行例は、ここをクリックして確認してください |
【例２-１】 <HTML> |
（２）相対指定（個々の文字サイズを標準設定を基準に指定する方法）
| フォントサイズの変更には、文字サイズに＋１から＋７、ないし−１から−７を指定して、変更する方法もあります。これは basefontタグで、暗黙ないし明示的に指定した文字サイズに＋または−したサイズに文字サイズを変更するという相対指定となります。 たとえば <basefont size="4">が指定されているとき、<font size="+1">と指定したときは、文字サイズは４+1＝５となり、font size=”5”と指定したと同じになります 。 また <basefont size="6">が指定されているとき、<font size="-1">と指定したときは、文字サイズは６−1＝５となり、font size=”5”と指定したと同じになります 。 次の例は【例２−１】と同じフォントサイズを指定したことになります。 |
|
<BODY> |
点滅はＩＥでは機能しません。ＮＳでは機能します。ただしＮＳ６では機能しません。
文字をボールド体にするには、対象となる文字を <B> </B>で囲みます
文字をイタリック体にするには、対象となる文字を<I> </I>で囲みます
文字を点滅させるには、対象となる文字を<BLINK> </BLINK>で囲みます
これらは、組み合わせて使用することができます。size="5"の文字の例を示します
|
指 定 の 例
|
結果
|
NS
|
IE
|
| <font size="5">5</font> |
5
|
○
|
○
|
| <font size="5"><b>5</b></font> |
5
|
○
|
○
|
| <font size="5"><i>5</i></font> |
5
|
○
|
○
|
| <font size="5"><blink>5</blink></font> |
5
|
○
|
×
|
| <font size="5"><b><i>5</i></b></font> |
5
|
○
|
○
|
| <font size="5"><b><i><blink>5</blink></i></b></font> |
5
|
○
|
×
|
例 ２-1を変更して、HELLOW SAMPLEの文字を <b><i><blink>を組み合わせて太字、斜体、点滅させてください
（例 ２-２）
<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7"><B><I><BLINK>HELLOW SAMPLE</BLINK></I></B></FONT>
</BODY>
</HTML>
実行例は、ここをクリックしてください
【練習】
１．<U>HELLOW SAMPLE</U>はどのような機能を持つか確認しなさい
２．<S>HELLOW SAMPLE</S>はどのような機能を持つか確認しなさい
３．<VAR>Y=X<SUB>1</SUB><SUP>2</SUP>＋X<SUB>2</SUB><SUP>3</SUP></VAR>を確認しなさい
４．３の<SUB></SUB>はどのような機能をもつか説明しなさい。
５．３の<SUP></SUP>はどのような機能をもつか説明しなさい。
文字列を左寄せ（標準）、中央、右寄せで配置することができます。
<CENTER>HELLOW SAMPLE</CENTER>
<FONT ALIGN="center" SIZE="7">HELLOW SAMPLE</FONT>
でも中央配置できます。下段の書き方はアトリビュートで指定するものです。同様に
<DIV ALIGN="RIGHT">HELLOW SAMPLE</DIV>
<FONT ALIGN="right" SIZE="7">HELLOW SAMPLE</FONT>
は右寄せ表示となります。なお今後はフォントタグ内でも次のように書いてください
<FONT SIZE="7"><DIV ALIGN="right">HELLOW SAMPLE</DIV></FONT>
なお、中央寄せについて、例では３つのパターンを示しています。なお<CENTER>は改行機能を持ちませんので、次の行の<P>で改行をしています。ひとつは<P>タグを使用して中央寄せしています
（例 ２-３）
<HTML>
<HEAD>
<TITLE>SAMPLE</TITLE>
</HEAD>
<BODY>
<CENTER>中央です</CENTER>
<P ALIGN="center"><FONT SIZE="7">HELLOW SAMPLE</FONT></P>
<P><FONT SIZE="7"><DIV ALIGN="center">HELLOW SAMPLE</DIV></FONT></P>
STANDARD POSITION
</BODY>
</HTML>
実行例は、ここをクリックしてください
|
見出文字はヘッドライン・タグで指定します。文字サイズの指定と異なり、見出しとしての適切な行間とボールド体による表示を行います。 右の例のように、見出しの大きさは６種類あります。これは見出しにする文字列を<H1> </H1>のようにヘッドライン・タグで囲います。H1が最大の大きさでH6が最小の大きさとなります このセクションの見出しは<H２>、小見出しは<H3>で指定しています |
H１ですH２ですH３ですH４ですH５ですH６です |
| 【練習】 次に示す書式のHTML文を作成しなさい。なお１行目はＨ１とし中央寄せ、２行目はＨ３とし右寄せにしなさい。またタイトルは 「ＨＴＭＬ」とすること。 |
|
第１章 HTMLの概要 １ はじめに HTMLは・・ |
| 文字に色をつけるとき、フォントタグで指定します。<font color="#ff0000">赤</font>のように定義します。特に指定しない限り、黒は標準となりますので、一般には黒の指定は行いません。「白」は表示できないので、背景を黒にして表示しています。「黄」も見づらいので背景を黒にしています。 |
|
色を３原色の組み合わせで指定した例
|
色を色名で指定した例
|
||
| <font color="#ff0000">赤</font> | 赤 | <font color="red">赤</red> | 赤 |
| <font color="#00ff00">緑</font> | 緑 | <font color="lime">緑</font> | 緑 |
| <font color="#0000ff">青</font> | 青 | <font color="blue">青</font> | 青 |
| <font color="#ffffff">白</font> | 白 | <font color="white>白</font> | 白 |
| <font color="#000000">黒</font> | 黒 | <font color="black">黒</font> | 黒 |
| <font color="#ffff00">黄</font> | 黄 | <font color="yellow">黄</font> | 黄 |
|
色指定の # は次に16進数の表示があることを示します。ffffff
は、それぞれ「赤」「緑」「青」の色の濃さを指定します。それぞれの値は0〜9,A,B,C,D,E,Fの１６の値となります。ですから、それぞれの色について１６×１６＝２５６の明るさを指定できます。ですから、色の組み合わせは２５６×２５６×２５６種類あると考えられます。（ただし、ブラウザによっては、対応していないとか、色が安定して表示できない場合もあります） |
ＨＴＭＬは基本的には、１行の文章を長く書いたとしても画面の幅に応じて、自動的に折り返してくれます。しかし長い文章や複数行にわたる文章を書くとき、
行を改めたいときがあります。
ひとつのセクションは、<p></p>で囲んで記述します。
行間を空けないで改行するには、改行するところで<br>を挿入します。
|
このセクションの見出し部と最初の文節はつぎのようになっています。 【例示】 <h3 align="center">行を改める</h3> <p>ＨＴＭＬは基本的には、１行の文章を長く書いたとしても画面の幅に応じて、自動的に折り返してくれます。しかし長い文章や複数行にわたる文章を書くとき、<br>行を改めたいときがあります。</p> |
リストとは、目次や項目の一覧表などの書式などをさしています。次の例を参考に話をすすめます。
| 番号リストの例 | リストの例 | 階層型リストの例 |
|---|---|---|
|
|
|
番号リストを作成するには、文を<OL></OL>で囲こみます。番号の付かないリストを作るには、文を<UL></UL>で囲みます。
それぞれの項目は<LI></LI>で囲みます。
番号リストの例は次のように記述されています
<OL>
<LI>序論</LI>
<LI>本論</LI>
<LI>結論</LI>
</OL>
リストの例は次のように記述されています
<UL>
<LI>梅</LI>
<LI>桃</LI>
<LI>桜</LI>
</UL>
階層構造のリストは、<OL></OL>または<UL></UL>のなかに<OL></OL>または<UL></UL>を入れ子にして記述します。上の例は次のように記述されています。少々わかりづらいので、グループ毎に段下げで表示します
<UL>
<LI>酒類</LI>
<UL>
<LI>日本酒</LI>
<UL>
<LI>兜錦</LI>
<LI>大真水</LI>
</UL>
<LI>洋酒</LI>
<UL>
<LI>名学ビール</LI>
</UL>
<LI>清涼飲料水</LI>
</UL>
ところで、番号リストでもローマ数字やアルファベットをつけたいときもあります。このときは<OL>にTYPE=アトリビュートを付加します。具体的には
大文字ローマ数字をつけるには、 <OL TYPE="I">
小文字ローマ数字をつけるには、 <OL TYPE="i">
大文字アルファベットをつけるには、<OL TYPE="A">
小文字アルファベットをつけるには、<OL TYPE="a">
となる。具体的な例を次に示す。
| TYPE="I" | TYPE="i" | TYPE="A" | TYPE="a" |
|---|---|---|---|
|
|
|
|
また、番号リストの番号の初期値を変更したいときがあります。このときは<OL Value="5"> のようにVALUEアトリビュートを付加します。
| サンプル | 実行例 |
|---|---|
|
<OL> |
|
また、リストの ● を ○ や ■ をつけたいときがあります。このときは<UL>にTYPE=アトリビュートを付加します。具体的には
●をつける <UL TYPE="disc">
○をつける <UL TYPE="circle">
■をつける <UL TYPE="square">
ちなみにリストの例のUL部を <UL TYPE="square"> とすると
となります。