Section 2 : スタイルの指定

スタイルシートの基本としてフォントの大きさや色を指定する方法を学んだ。これらを <STYLE>...</STYLE> の中でしておくのだけれど,本文の中で直接指定することだってできる。


スタイルの属性を指定する方法には次の3つがあって,最初のものは Section 1 で解説したもの。ここでは2番目の指定方法をマスターしよう。

一カ所だけ特別な指定をしたい場合には,本文の中で直接指定する方法が便利。これは対象となる既存の HTML 要素に属性と値を STYLE として追加する。属性を { } でくくるのではなく,<要素名 STYLE="..."> とする点に注意。

<要素名 STYLE="属性: 値; 属性: 値;">...</要素名>

パラグラフを指定する <P> を使って,次のように1行ことに属性を変えることもできる。ただし,ダブルクォーテーションの中で空白のあるフォント名を使う場合は,シングルクォーテーションで括らなければならない。詳細は First step CSS の フォントを変えるを参照されたい。

<P STYLE="font-size: xx-small; color: red; font-family: Arial, sans-serif;">Let's begin HTML</P>
<P STYLE="font-size: x-small; color: blue; font-family: 'Courier New', monospace; ">Let's try HTML</P>
<P STYLE="font-size: x-large; color:green; font-family: Verdana, sans-serif; ">Hop step HTML</P>
<P STYLE="font-size: xx-large; color: cyan; font-family: 'Times New Roman', serif; ">More about HTML</P>

結果として以下のように大きさ,色,フォントの異なる文字が表示される。

Let's begin HTML

Let's try HTML

Hop step HTML

More about HTML

基本的なスタイルは <STYLE>...</STYLE> の中で設定しておき,急に変更したい箇所は開始タグ中に STYLE="..." と書けばよい。さらにスタイルの指定方法にはもっと便利な方法があって,スタイルを記述したファイルをあらかじめ作っておいて,テンプレートのように読み込むこともできる。複数のページで同じスタイルを使いたい場合には有効で,文書管理が格段に向上する。この第3のスタイル指定方法は Section 6 で解説する。

 IE3, NN4  上の例も font-family の問題でうまく表示されないかもしれない。これは,記述が悪いのではないので,この記法で身につけてもらって構わない。スタイルシートがうまく適用されなくても,文章が読めなくなるわけではないのだから。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版