[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

情報処理IIA(HTML入門)第4回

目次 索引
4.1 フォントの変更
4.1.1 フォント・スタイル
4.1.2 テキストの強調
4.1.3 フォントの大きさ
4.1.4 テキストの色
4.2 テキストと背景
4.2.1 テキストと背景の色
4.2.2 背景イメージ
4.3 テキストの位置揃え
4.3.1 左揃え、中央揃え、右揃え
4.3.2 上付き添字、下付き添字
4.3.3 テキストの装飾
4.4 テキストの流し込み
4.5 演習4
4.6 レポート課題
align属性  align属性  background属性  bgcolor属性  bigタグ  bタグ  centerタグ  citeタグ  clear属性  codeタグ  color属性  dfnタグ  divタグ  emタグ  fontタグ  iタグ  kbdタグ  sampタグ  size属性  smallタグ  strikeタグ  strongタグ  subタグ  supタグ  sタグ  text属性  ttタグ  uタグ  varタグ  アンダーライン  イタリック体  色の名前  上付き添字  打ち消し線  キー入力  強調  下付き添字  出力例  タイプライタ体  中央揃え  定義語句  テキストの色  流し込み  流し込みの解除  背景イメージ  背景の色  左揃え  プログラムコード  文献参照  変数  ボールド体  右揃え  より強い強調 

4.1 フォントの変更

4.1.1 フォント・スタイル

HTMLでは、テキストをイタリック体(斜体)、ボールド体(太字)などにすることができます。 フォントの切り換えは以下の表に従ってください。 タグを組み合わせることにより、ボールドイタリック体などにもできます。 ただし、システムに適切なフォントがなければ、タグが無視されたように表示されます。

表 4.1  フォント・スタイル
タグ フォント・スタイル 覚え方
<b></b> ボールド体 Bold
<i></i> イタリック体 Italic
<tt></tt> タイプライタ体 Typewriter Type
例 4.1 
オリジナル: Good afternoon! こんにちは。<br>
ボールド体: <b>Good afternoon! こんにちは。</b><br>
イタリック体: <i>Good afternoon! こんにちは。</i><br>
タイプライタ体: <tt>Good afternoon! こんにちは。</tt><br>
ボールドイタリック体: <b><i>Good afternoon! こんにちは。</i></b>
オリジナル: Good afternoon! こんにちは。
ボールド体: Good afternoon! こんにちは。
イタリック体: Good afternoon! こんにちは。
タイプライタ体: Good afternoon! こんにちは。
ボールドイタリック体: Good afternoon! こんにちは。

4.1.2 テキストの強調

文章を書いていると、一部の語句を 強調 したくなることがあります。 英語などの場合、強調する語句はイタリック体を用いるのが習わしです。 しかし、強調だから <i></i> で囲むなどと考えていたのでは、作者は文章の内容に集中できません。 このため、HTMLには、ここからここまでを強調するというタグ <em></em> が用意されています。 作者は、慣習を意識せず、このタグを使って強調する語句を指定します。 ブラウザは、慣習に基いて、その語句をイタリック体で表示します。

ブラウザは、強調以外にもいくつかの慣習を知っています。 主なものを表に示します。

表 4.2  テキストの構造を表すタグ
テキスト タグ 表示 覚え方
強調 <em></em> イタリック体 EMphasize
より強い強調 <strong></strong> ボールド体
文献参照 <cite></cite> イタリック体
定義語句 <dfn></dfn> ボールド体 DeFiNition
プログラムコード <code></code> タイプタイタ体
出力例 <samp></samp> タイプライタ体 SAMPle
キー入力 <kbd></kbd> タイプライタ体 KeyBoarD
変数 <var></var> イタリック体 VARiable

なお、 <b> , <i> , <tt> タグと同様に、タグが無視されたように表示されることがあります。

例 4.2 
<p>
<strong>Don't write</strong>
<code>if (x = y)</code> ....
A single equal sign (<code>=</code>) is used
in an <em>assignment statement</em>.
</p>
Don't write if (x = y) .... A single equal sign ( = ) is used in an assignment statement .

4.1.3 フォントの大きさ

フォントの大きさを切り換えるには、単純な方法とやや複雑な方法があります。

前者は、 <big></big> で囲めばより大きなフォントが使われ、 <small></small> で囲めばより小さなフォントが使われるというものです。

後者は <font> タグを用いるものです。 size属性 によってフォントの大きさを指定します。 この値は1から7までで、値が大きいほど大きなフォントが使われます。 3が普通の大きさです。 size 属性の値は、 +1 , -2 のような相対指定も可能です。

システムに適切なフォントがなければ、それに近いフォントが選ばれたり、タグが無視されたりします。

例 4.3 
<font size="5">Good afternoon!</font><br>
<font size="4">Good afternoon!</font><br>
<font size="3">Good afternoon!</font><br>
<font size="2">Good afternoon!</font>
Good afternoon!
Good afternoon!
Good afternoon!
Good afternoon!
注意

規格の上では、 <font> タグは使わないようにと指示されています。 ここで紹介したのは、後でスタイルシートと比較するためです。

注意

<h1> タグを使っても、フォントを大きくできます。 しかし、フォントを大きくする目的で、 <h1> タグを使うことは勧められません。 単にフォントを大きくするときには <font> タグを使い、見出しのフォントの大きさを意識せず、文章の内容に集中するときには <h1> タグを使う、としてください。 もう一度、 <i> タグと <em> タグとの関係を思い出してください。

4.1.4 テキストの色

テキストの色を切り換えるにも、 <font> タグを用います。 color属性 によって色を指定します。 この値は 色の名前 を意味するキーワードを使います。 以下の表に従ってください。

表 4.3  色の名前のキーワード
キーワード
aqua 水色
black
blue
fuchsia 桃色
gray 灰色
green
lime 黄緑
maroon 茶色
navy
olive 黄土色
purple
red
silver 銀色
teal 深緑
white
yellow 黄色
例 4.4 
<font color="white">Good afternoon!</font><br>
<font color="black">Good afternoon!</font><br>
<font color="red">Good afternoon!</font><br>
<font color="blue">Good afternoon!</font><br>
<font color="yellow">Good afternoon!</font>
Good afternoon!
Good afternoon!
Good afternoon!
Good afternoon!
Good afternoon!

赤のやや大きなフォントに切り替えるときには、

<font color="red"><font size="4">Good afternoon!</font></font>

または

<font color="red" size="4">Good afternoon!</font>

と書きます。

<font color="red"><font size="4">Good afternoon!</font>

と書きますと、思ったように表示されません。


4.2 テキストと背景

4.2.1 テキストと背景の色

ホームページでは、 テキストの色背景の色 を変えることができます。

<body> タグに text属性 を書きますとテキストの色が、 bgcolor属性 を書きますと背景の色(BackGround COLOR)が、それぞれ指定できます。 これらの属性の値は、色の名前のキーワードです。

テキストの色は、 <font> タグでも変えられますが、ページ全体にわたる場合は、この方法のほうがHTMLドキュメントが読みやすくなります。

例 4.5 
<body text="blue" bgcolor="aqua">
Good afternoon!<br>
Good afternoon!<br>
Good afternoon!
</body>
Good afternoon!
Good afternoon!
Good afternoon!

4.2.2 背景イメージ

背景は、単色に限りません。 イメージにすることもできます。 背景イメージ (壁紙)は、ページ全体にタイル状に並べて表示されます。

<body> タグで background属性 を用いますと、背景イメージが指定できます。 HTMLファイルとイメージ・ファイルが同じディレクトリにある場合、この属性の値はイメージ・ファイルのファイル名です。

例 4.6 
<body background="triangle.png">
Good afternoon!<br>
Good afternoon!<br>
Good afternoon!
</body>
triangle.png
A triangle pattern
Good afternoon!
Good afternoon!
Good afternoon!
注意

背景イメージが目立ちすぎますと、その上のテキストが読みにくくなります。 背景イメージはあまり目立たないものを使ってください。

例 4.7 
<body background="zigzag.png">
Good afternoon!<br>
Good afternoon!<br>
Good afternoon!
</body>
zigzag.png
A zigzag pattern
Good afternoon!
Good afternoon!
Good afternoon!
注意

規格の上では、 text 属性、 bgcolor 属性、および background 属性は使わないようにと指示されています。 後でスタイルシートと比較します。


4.3 テキストの位置揃え

4.3.1 左揃え、中央揃え、右揃え

ブラウザは、特に断らない限り、テキストを左に揃えて表示します。 テキストの一部を中央や右に揃えるには、 <div> タグを用います(DIVision)。 ただし、単に <div></div> で囲んでも、前後と独立して表示されるだけです。 タグの使い方は次の表に従ってください。

表 4.4  テキストの位置揃え
タグ 位置揃え
<div align="left"></div> 左揃え
<div align="center"></div> 中央揃え
<div align="right"></div> 右揃え

align属性 は、 <div> タグにおいてテキストの揃える位置を示します。 この値を centerright に変えることによって、中央揃えや右揃えになるのです。

なお、 <div align="center"></div> は、 <center></center> と略記できます。

例 4.8 
<div align="left">Good afternoon!</div>
<div align="center">Good afternoon!</div>
<div align="right">Good afternoon!</div>
Good afternoon!
Good afternoon!
Good afternoon!
注意

規格の上では、 <center> タグも align 属性も使わないようにと指示されています。 後でスタイルシートと比較します。

4.3.2 上付き添字、下付き添字

数式や化学式などでは、 上付き添字下付き添字 が使われます。 HTMLでは、 <sup></sup> に囲まれると上付き添字(SUPerscript)になり、 <sub></sub> に囲まれると下付き添字(SUBscript)になります。

フォントの大きさによっては、タグが無視されたように表示されることがあります。

例 4.9 
f(x) = a<sub>1</sub> x<sup>2</sup> + a<sub>2</sub> x + a<sub>3</sub>
f(x) = a 1 x 2 + a 2 x + a 3

4.3.3 テキストの装飾

HTMLでは、テキストに 打ち消し線 を施したり、 アンダーライン を引いたりできます。 <s></s> または <strike></strike> に囲まれると打ち消し線が施され、 <u></u> に囲まれるとアンダーライン(Underline)が引かれます。

例 4.10 
<s>Good afternoon!</s><br>
<strike>Good afternoon!</strike><br>
<u>Good afternoon!</u>
Good afternoon!
Good afternoon!
Good afternoon!
注意

規格の上では、 <s> タグ、 <strike> タグ、および <u> タグは使わないようにと指示されています。 後でスタイルシートと比較します。


4.4 テキストの流し込み

(大きな)イメージを中央に揃えるには、 <div align="center"></div> で囲みます。 しかし、同じ方法で左に揃えますと右側が大きくあきますし、右に揃えますと左側が大きくあきます。 <img> タグの中で align属性 を用いますと、このあいている範囲にテキストを 流し込む ことができます。 以下の要領で書いてください。

表 4.5  テキストの流し込み
属性と値 画像の位置
align="left" 左揃え
align="right" 右揃え
例 4.11 
<img src="link-image.png" alt="A link image"
     width="200" height="300"
     align="left">
<p>
リンクの構造は図のようになります。
</p>
<p>
次に、ディレクトリを用意します。
</p>
link-image.png
A link image
A link image
リンクの構造は図のようになります。

次に、ディレクトリを用意します。

テキストの 流し込みを解除 するには、 <br> タグの中で clear属性 を用います。 以下の要領で指定してください。

表 4.6  流し込みの解除
属性と値 画像の位置
clear="left" 左側
clear="right" 右側
例 4.12 
<img src="link-image.png" alt="A link image"
     width="200" height="300"
     align="left">
<p>
リンクの構造は図のようになります。
<br clear="left">
</p>
<p>
次に、ディレクトリを用意します。
</p>
A link image
リンクの構造は図のようになります。

次に、ディレクトリを用意します。
注意

規格の上では、 align 属性も clear 属性も使わないようにと指示されています。 後でスタイルシートと比較します。


4.5 演習4

「未来日記」のホームページを作成してください。 以下の例を参考にして、近い未来の 3 日分の架空の日記を書いてください。 このページのスタイルは、次の指定に従ってください。

例 4.13 
演習4(未来日記)

2003年8月○日

今日は一日中プールで泳ぎ続けた。 疲れたけど楽しかった。

2003年12月△日

今日は一日中スキーで滑り続けた。 疲れたけど楽しかった。

2004年3月□日

今日は一日中サイクリングをした。 疲れたけど楽しかった。

4.6 レポート課題

今日の演習4に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/1)を明記してください。


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2003年5月1日更新
konishi@twcu.ac.jp
Copyright (C) 2003 Zenjiro Konishi. All rights reserved.