超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ CSS 設定の方法 その1

ここでは、CSS を設定する方法を勉強します。
もう前のページの見本で3種類あるってのはわかったでしょ。

1.タグにはさまれた部分に適用する方法
2.ページ全体に適用する方法
3.リンクを使って複数ページに適用する方法

この3つです。それではひとつひとつについて具体的に勉強していきましょう。
見本を用意しておきます。

<div>王様の耳はロバの耳</div>

って書くとこうなるよね。これがスタイル適用前。

王様の耳はロバの耳

これをこのように変えます。テキスト色オレンジ、文字サイズ20pt、太字、アンダーラインつきです。3つのどの方法を使っても結果は同じです。

王様の耳はロバの耳


1.タグにはさまれた部分に適用する方法

タグにスタイルを直接書き込みます。これをインラインで設定するといいます。見本の場合は <div> タグに対して、このように書き込みます。

<div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;">
王様の耳はロバの耳
</div>

<div> タグの中にいくつかの設定を行っています。これらの設定ひとつひとつをタグに対するプロパティ(属性)といいます。そしてそれぞれの設定値をプロパティのといいます。

プロパティ説明
color#ffa500テキスト色オレンジ、orangeでもいいです
font-size20pt文字サイズ20ポイント
font-weightbold太字
text-decorationunderlineテキストの装飾アンダーライン

インラインで設定する場合は、タグ style= の後をダブルクォーテーション(”)で囲み、その中にプロパティと値を書き込みます。
書き方は、プロパティと値の間をコロン(:)で区切り、次のプロパティとの間をセミコロン(;)で区切ります。
最後の値の後はセミコロンは不要ですが、プロパティを追加したときに忘れないようにいつもつけています。
HTML と同様、タグ内の空白は無視されます。
※ただし全角の空白を入れると、Netscape では、空白の後のプロパティが認識されなくなりますので注意して下さい。

<タグ style=" プロパティ:値; プロパティ:値; プロパティ:値; ">
〜テキスト〜
</タグ>

今度は、同じテキストに別のスタイルを適用してみましょうか。さっきよりもたくさん書き込んでみました。

<div style="color:#ffc0cb; font-size:1cm; font-weight:bold; text-align:center; background-color:#800080; border-style:groove; border-color:#ffc0cb; border-width:10pt; padding:10pt;">
王様の耳はロバの耳
</div>

このように表示されます。

王様の耳はロバの耳

プロパティと値はこうなってます。

プロパティ説明
color#ffc0cbテキスト色ピンク、pinkでもいいです
font-size1cm文字サイズ1cm
font-weightbold太字
text-aligncenterテキストの位置は中央
background-color#800080背景色は紫、purpleでもいいです
border-stylegroove枠線のスタイルはgroove(溝)
border-color#ffc0cb枠線の色はピンク、pinkでもいいです
border-width10pt枠線の太さ(幅)10ポイント
padding10pt枠線と中の文字との間隔10ポイント

ちょっとプロパティが多すぎて、わかりにくくなったかな。
プロパティについては後で勉強するから、ここではインライン設定の方法だけ覚えておいて下さい。
インライン設定はタグに直接書き込むので、HTML でページを作るのとそんなに変わりません。HTML よりも細かい設定が可能なので、ページをデザインする効果はあります。
ただし、その反面、タグが複雑になって変更・修正がめんどうになるし、CSS の重要な効果であるスタイルの一括変換ができないといったデメリットがあります。
全体のスタイルを別の方法で設定した後に、個別のタグについてスタイルを設定したい場合に使いましょう。