コンピュータIID（UNIXとHTML）第10回

10.1 基本的なタグ（3）: 10.1.1 フォント・スタイル; 10.1.2 テキストの強調; 10.1.3 フォントの大きさ; 10.1.4 下付き添字、上付き添字
10.2 スタイルシート（1）: 10.2.1 スタイルシートとは; 10.2.2 スタイルシートの概略; 10.2.3 スタイルシートの書式; 10.2.4 フォントのプロパティ; 10.2.5 色と背景のプロパティ; 10.2.6 テキストのプロパティ
10.3 演習10
10.4 レポート課題
10.5 参考文献

索引

background-colorプロパティ background-imageプロパティ colorプロパティ CSS font-familyプロパティ font-sizeプロパティ font-styleプロパティ font-weightプロパティ STYLEタグ text-alignプロパティ text-decorationプロパティ vertical-alignプロパティアンダーラインイタリック体上付き添字打ち消し線オーバーラインカスケーディングスタイルシートサンセリフ体下付き添字スタイルシートタイプライタ体中央揃え点滅左揃えプロパティベースラインボールド体右揃えローマン体

10.1 基本的なタグ（3）

10.1.1 フォント・スタイル

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

表 10.1 フォント・スタイル

タグ	フォント・スタイル	覚え方
`<B>`〜`</B>`	ボールド体	Bold
`<I>`〜`</I>`	イタリック体	Italic
`<TT>`〜`</TT>`	タイプライタ体	Typewriter Type

例

オリジナル: 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! こんにちは。

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

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

表 10.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> タグと同様に、タグが無視されたように表示されることがあります。

例

<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 .

10.1.3 フォントの大きさ

フォントの大きさを切り換えるには、 <BIG> タグや <SMALL> タグを使います。 <BIG> 〜 </BIG> で囲めば、より大きなフォントで表示されます。 <SMALL> 〜 </SMALL> で囲めば、より小さなフォントで表示されます。

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

10.1.4 下付き添字、上付き添字

数式や化学式などでは、下付き添字や上付き添字が使われます。 HTMLでは、 <SUB> 〜 </SUB> に囲まれると下付き添字（SUBscript）になり、 <SUP> 〜 </SUP> に囲まれると上付き添字（SUPerscript）になります。

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

例

f(x) = a<SUB>1</SUB> x<SUP>2</SUP> + a<SUB>2</SUB> x + a<SUB>3</SUB>

f(x) = a ₁ x ² + a ₂ x + a ₃

10.2 スタイルシート（1）

10.2.1 スタイルシートとは

スタイルシート （ style sheet ）とは、文書のデザインを整える仕組みです。スタイルシートを用いると、全体的に統一感のある文書が作成できます。

HTMLでは、スタイルシートとして、 カスケーディングスタイルシート （ Cascading Style Sheets , 以下 CSS ）が利用できます。 CSSには、

フォントを変更する、テキストに色を付けるなど、ウェブ・ページの細かいデザインが可能になる。
一つのウェブ・ページだけでなく、複数のウェブ・ページのデザインをも統一できる。

という機能があります。

10.2.2 スタイルシートの概略

例として、「強く強調する部分は（ボールド体ではなく）赤で書く」という規則に従ってウェブ・ページを作成することにします。

本製品を取り付けるときには、必ずパソコン本体の電源をお切りください。パソコンの内部には高電圧の部品が使われており、触ると危険です。

強く強調していることを示すために、 <STRONG> タグを使います。

<P>
本製品を取り付けるときには、
<STRONG>
必ずパソコン本体の電源をお切りください。
</STRONG>
パソコンの内部には高電圧の部品が使われており、
<STRONG>
触ると危険です。
</STRONG>
</P>

当然ですが、強調する部分は赤くはなりません。

ここでスタイルシートの出番です。 CSSでは、「 <STRONG> タグの部分をボールド体ではなく赤で書く」という規則を

STRONG {font-weight: normal; color: red}

と書き表します。そして、これを <STYLE> タグで囲みます。

<HEAD>
<STYLE type="text/css">
STRONG {font-weight: normal; color: red}
</STYLE>
</HEAD>
<BODY>
<P>
本製品を取り付けるときには、
<STRONG>
必ずパソコン本体の電源をお切りください。
</STRONG>
パソコンの内部には高電圧の部品が使われており、
<STRONG>
触ると危険です。
</STRONG>
</P>
</BODY>

このスタイルシートによって、ウェブ・ページがカラーになり、また、「強く強調する部分は（ボールド体ではなく）赤で書く」という統一感も得られるのです。

10.2.3 スタイルシートの書式

スタイルシートの書式は、

tag {property: value}

が基本です。ここで、 property はプロパティの名前です。 プロパティ （ property ）とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。この書式は、プロパティ property の値を value にするという意味です。

プロパティが2つあるときは、

tag {property1: value1; property2: value2}

と、セミコロンで区切って書きます。 3つ以上でも同様です。

HTMLファイルの中でスタイルシートを指定するには <STYLE> タグを用います。 <STYLE> タグは次のパターンに従ってください。

<HEAD>
<STYLE type="text/css">
tag {property: value; ...}
tag2 {property2: value2; ...}
...
</STYLE>
</HEAD>
<BODY>
document body ...
</BODY>

この雛形の要点は次の通りです。

まず、 <STYLE> タグは <HEAD> 〜 </HEAD> の中に書くという決まりがあります。次に、 <STYLE> タグの type 属性によって、スタイルシートがCSSであることを明示します。最後に、表示内容の範囲を明確にするために、表示内容の全体を <BODY> 〜 </BODY> で囲みます。

10.2.4 フォントのプロパティ

フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。システムに適切なフォントがなければ、指定は無視されます。

font-familyプロパティ

font-familyプロパティは、フォントの種類を指定します。セリフとはアルファベットに付いている「ひげ」のことです。サンセリフとはセリフなしという意味です。

表 10.3 フォントの種類

プロパティと値	種類	例
`font-family: serif`	ローマン体	Good afternoon!
`font-family: sans-serif`	サンセリフ体	Good afternoon!
`font-family: monospace`	タイプライタ体	Good afternoon!

font-styleプロパティ

font-styleプロパティは、フォントを傾けるかどうか指定します。

表 10.4 フォントの傾き

プロパティと値	傾き	例
`font-style: normal`	傾けない	Good afternoon!
`font-style: italic`	イタリック体	Good afternoon!

font-weightプロパティ

font-weightプロパティは、フォントの太さを指定します。

表 10.5 フォントの太さ

プロパティと値	太さ	例
`font-weight: normal`	太くしない	Good afternoon!
`font-weight: bold`	ボールド体	Good afternoon!

例

<HEAD>
<STYLE type="text/css">
ADDRESS {font-style: normal; font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<ADDRESS>
市民講座事務局 電話 03-XXXX-XXXX
</ADDRESS>
</BODY>

市民講座事務局電話 03-XXXX-XXXX

font-sizeプロパティ

font-sizeプロパティは、フォントの大きさを指定します。 large や small などのキーワードの他に、 16px など長さでも指定できます。

表 10.6 フォントの大きさ

プロパティと値	大きさ	例
`font-size: larger`	前後より大きめ	Good afternoon!
`font-size: smaller`	前後より小さめ	Good afternoon!
`font-size: xx-large`	非常に大きめ
`font-size: x-large`	より大きめ	Good afternoon!
`font-size: large`	大きめ	Good afternoon!
`font-size: medium`	通常	Good afternoon!
`font-size: small`	小さめ	Good afternoon!
`font-size: x-small`	より小さめ	Good afternoon!
`font-size: xx-small`	非常に小さめ
`font-size: 16px`	16ピクセル	Good afternoon!

10.2.5 色と背景のプロパティ

色と背景に関するプロパティには、テキストの色、背景の色、背景画像などがあります。色の指定は、キーワードを用いるのが簡単です。

表 10.7 色の名前のキーワード

カラー・ネーム	色	例
`aqua`	水色	■
`black`	黒	■
`blue`	青	■
`fuchsia`	桃色	■
`gray`	灰色	■
`green`	緑	■
`lime`	黄緑	■
`maroon`	茶色	■
`navy`	紺	■
`olive`	黄土色	■
`purple`	紫	■
`red`	赤	■
`silver`	銀色	■
`teal`	深緑	■
`white`	白	■
`yellow`	黄色	■

colorプロパティ

colorプロパティは、テキストの色を指定します。 <BODY> タグに指定すると、テキスト全体がその色になります。

background-colorプロパティ

background-colorプロパティは、背景の色を指定します。 <BODY> タグに指定すると、ページ全体の背景がその色になります。

background-imageプロパティ

background-imageプロパティは、背景イメージを指定します。このプロパティの値は、独特の形式を持ちます。画像ファイルのファイル名が filename であり、HTMLファイルと画像ファイルが同じディレクトリにある場合、

background-image: url(filename)

と書きます。 <BODY> タグに指定すると、ページ全体にその背景画像が用いられます。

例

<HEAD>
<STYLE type="text/css">
BODY {background-image: url(triangle.png)}
H2 {color: green}
</STYLE>
</HEAD>
<BODY>
<H2>講演スケジュール</H2>
</BODY>

triangle.png

講演スケジュール

10.2.6 テキストのプロパティ

テキストに関するプロパティには、テキストの位置揃えや装飾などがあります。

text-alignプロパティ

text-alignプロパティは、テキストの位置揃えを指定します。

表 10.8 テキストの位置揃え

プロパティと値	位置揃え
`text-align: left`	左揃え
`text-align: center`	中央揃え
`text-align: right`	右揃え

例

<HEAD>
<STYLE type="text/css">
H1 {text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1>市民講座のご案内</H1>
</BODY>

市民講座のご案内

text-decorationプロパティ

text-decorationプロパティは、アンダーラインなどテキストの装飾を指定します。

表 10.9 テキストの装飾

プロパティと値	装飾	例
`text-decoration: none`	装飾しない	Good afternoon!
`text-decoration: underline`	アンダーライン	Good afternoon!
`text-decoration: overline`	オーバーライン	Good afternoon!
`text-decoration: line-through`	打ち消し線	Good afternoon!
`text-decoration: blink`	点滅	Good afternoon!

例

<HEAD>
<STYLE type="text/css">
STRONG {text-decoration: underline}
</STYLE>
</HEAD>
<BODY>
<P>
<STRONG>
入場無料
</STRONG>
ですので、どなた様も気軽に参加してください。
</P>
</BODY>

入場無料ですので、どなた様も気軽に参加してください。