テキスト・罫線の設定第5章

書式

■font（P.86） ^■background-color（P.102）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {color: #000066 } p {color: black}

-->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>

文字色を指定する

すべて継承あり

役割・機能

適用 継承の有無

color

^{Win･････}^MacWin･･････････^{･････････}^5.5/6⁵7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2

指定可能な値：カラーネーム、カラーコード文

書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

表示例

colorプロパティは、背景色に対する前景色の指定です。通常、文字色に適用されます。値は、カラーネーム、カラーコードで指定します。カラーコードは「#」で始まる6桁の16進数です。CSSでは、3桁のカラーコードも指定可能です。

解説

セレクタ{ color: 値 }

■font-size（P.85）^■font（P.86）

参照項目

記述例 <head>

<style type="text/css">

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>

フォントを指定する

すべて継承あり

役割・機能

適用 継承の有無

font-family

書式

指定可能な値：フォント名か以下のキーワード

serif：明朝系 fantasy：装飾系のフォント

sans-serif：ゴシック系 monospace：等幅フォント

cursive：筆記体

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定 表示例

フォントの種類は、フォント名やキーワードで、通常、複数の値を「,」（カンマ）で区切って指定します。複数を指定した場合、指定した順に優先順位が高くなります。

解説

セレクタ { font-family : 値 }

■font-family（P.81）^■font（P.86）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font-family:serif } p {font-family:sans-serif;

font-style:italic } -->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br><br>

DCPRG_{のフルアルバム}。</p>

イタリック体（斜体）にする

すべて継承あり

役割・機能

適用 継承の有無

font-style

書式

指定可能な値：以下のキーワード

normal：正体 oblique：斜体

italic：イタリック体

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

表示例

italicでイタリック体に、obliqueで斜体にします。しかし、値にitalicを指定しても使用しているフォントにイタリック体がない場合は、斜体で表示されます。

解説

セレクタ{ font-style : 値 }

■font（P.86） ^■text-transform（P.90）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font-variant:small-caps } p {font-family:sans-serif}

-->

</style>

</head>

<body>

<h3>1st Full Album Report From Iron Mountain</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br>

スモールキャピタルで表示する

すべて継承あり

役割・機能

適用 継承の有無

font-variant

指定可能な値：以下のキーワード

normal：標準 small-caps：スモールキャピタル表示

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定 書式

表示例

スモールキャピタルとは、アルファベットの大文字を小さく表示することをいいます。スモールキャピタルを指定すると、アルファベットの小文字も大文字で表示されます（本来の大文字よりも表示は小さくなります）。

解説

セレクタ{ font-variant: 値 }

■font-style（P.82） ^■font（P.86）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font-weight:bold}

p {font-weight:bold}

-->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br>

フォントの太さを指定する

すべて継承あり

役割・機能

適用 継承の有無

font-weight

^{Win･････}^MacWin･･････････^{･････････}^5.5/6⁵7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2 文

書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

書式

指定可能な値：100から900の100刻みの数値か以下のキーワード

normal：標準 bolder：より太く

bold：太字 lighter：より細く

表示例

フォントの太さを指定します。キーワードと100から900の100刻みの値で指定することが可能で、400がnormalと同じになります。ただし、表示するフォントにその太さがない場合はうまく表示されません。

解説

セレクタ{ font-weight: 値 }

■font（P.86） ^■font-weight（P.84）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font-size:large}

p {font-size:x-small}

-->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE … 以下略フォントのサイズを指定する

すべて継承あり

役割・機能

適用 継承の有無

font-size

指定可能な値：単位付きの数値か以下のキーワード

xx-small：x-small_の1.2_倍縮小 x-large：large_の1.2_倍拡大 x-small：smallの1.2倍縮小 xx-large：x-largeの1.2倍拡大 small：mediumの1.2倍縮小 large：mediumの1.2倍拡大 medium：標準

larger：外側の要素に指定されたfont-sizeの1.2倍拡大 smaller：外側の要素に指定されたfont-sizeの1.2倍縮小

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定 書式

表示例

フォントのサイズを指定します。パーセント（%）で指定する場合、上位の要素に設定されたfont-sizeに対するパーセントになります。

解説

セレクタ{ font-size : 値 }

■font-family（P.81） ^■font-weight（P.84）

■font-size（P.85）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font:small-caps 20pt serif}

p {font:11pt monospace}

-->

</style>

</head>

<body>

<h3>1st FULL Album Report From Iron Mountain</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br>

フォントのスタイルを指定する

すべて継承あり

役割・機能

適用 継承の有無

font

指定可能な値： font-style、font-variant、font-weight、font-size、line-height、font-familyのそれぞれで指定可能な値

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

書式

表示例

フォントに関するスタイル設定を一度に行います。①font-style、② font-variant、③font-weight、④font-size、⑤line-height、⑥font-familyの順に値を半角スペースで区切って記述します。①〜③の順番は入れ替え可能です（ただし、④以降の値と入れ替わると設定がうまく効きません）。なお、④と⑤以外の設定は省略可能です。

解説

セレクタ{ font-size: 値 }

■text-align（P.88） ^■text-decoration（P.89）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {font:18pt}

p {text-indent:10px}

-->

</style>

</head>

<body>

<h3>1st FULL Album Rreport From Iron Mountain</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br>

… 以下略 インデントを指定する

すべて継承あり

役割・機能

適用 継承の有無

text-indent

指定可能な値：単位付きの数値、パーセント

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定 書式

表示例

文のインデントを設定します。インデントの度合いは、単位付きの数値かパーセントで指定します。パーセントはフォントサイズに対する割合になります。

解説

セレクタ{ text-indent: 値 }

■text-indent（P.87） ^■text-decoration（P.89）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {text-align:right}

p {text-align:center}

-->

</style>

</head>

<body>

<h3>1st FULL Album Rreport</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <br>

行ぞろえの位置を指定する

ブロック要素継承あり

役割・機能

適用 継承の有無

text-align

指定可能な値：以下のキーワード

left：左寄せ center：中央ぞろえ

right：右寄せ justify：均等割付

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

書式

表示例

範囲内での行ぞろえの位置を指定します。ブロック要素の<h>や<p>

あるいは<div>などにより指定された領域内での位置になります。

解説

セレクタ{text-align: 値 }

■text-indent（P.87） ^■text-align（P.88）

参照項目 記述例 <head>

<style type="text/css"> <!--h3 {text-decoration:underline}

.henkou {text-decoration:line-through} -->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS <span

class="henkou">2001.8.10 Release, PCD-18502

￥3,000(w/o TAX)</span></p>

文字を装飾する

すべて継承なし

役割・機能

適用 継承の有無

text-decoration

指定可能な値：以下のキーワード

none：文字装飾なし line-through：取り消し線を表示

underline：下線を表示 blink：点滅表示

overline：上線を表示

文書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定 書式

表示例

text-decorationは文字を装飾するプロパティです。記述例ではクラスセレクタにスタイル設定を記述し、〈spaw〉のclass属性で適用させる部分を指定しています（P.145）。

解説

セレクタ{ text-decoration: 値 }

■font-variant（P.83）

参照項目

記述例 <head>

<style type="text/css">

<!--h3 {text-transform:uppercase}

p {text-transform:lowercase}

-->

</style>

</head>

<body>

<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>

<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS 2001.8.10 Release, PCD-18502 ￥3,000(w/o TAX)</p>

英文の大文字・小文字表示を指定する

すべて継承あり

役割・機能

適用 継承の有無

text-transform

指定可能な値：以下のキーワード

none：記述のとおりに表示 lowercase：すべてを小文字で表示 capitalize：単語の先頭を大文字で表示 uppercase：すべてを大文字で表示文

書構造

表示・配置

リスト・表・フレーム

リンク・画像・フォーム

テキスト

・罫線の設定

背景の設定

配置の指定

リスト・表の設定

書式

表示例

入力したテキストに関係なく、英文の大文字・小文字表示を変更することができます。

解説

セレクタ{text-transform: 値 }

ドキュメント内 HTMLCSS_1章 (ページ 76-98)