スタイルシート

ここと、次のページでは、CSSを中心に覚えます。CSSは、HTMLでの色やレイアウト等を決めます。

CSSの文法 とりあえず

color:red;

例を見てね。属性(color等)に、:(コロン)をつけて、値(red等)を付けて、最後に;(セミコロン)を付けます。

CSSの設定

使うには、3つあります。step1でも説明したものもあるけど、HTML内で設定する、外部のを使う、その場で定義する、です。

<LINK REL="stylesheet" TYPE="text/css" HREF="basic.css">

これが、外部のを使う方法です。HEAD内に入れます。

<style type="text/css">
<!--
-->
</style>

これが、そのページのHTML内で設定する方法です。HEAD内に入れます。

<P STYLE="color:red;">

これが、要素(タグ)に属性として、設定する方法です。

設定しよう

3つあります。1つは、要素(P等)を設定します。あとの2つは、クラスセレクタとIDセレクタです。

P {color:red;}

要素(P)に、半角スペースを開けて、{}でくくって、設定します。これで、Pを使えば、赤で表示されます。

P {color:red; background-color:black;}

2つ以上の属性は、半角スペースを開けて、書きます。色は赤、バックの色が黒になります。

クラスセレクタの設定は、.(ピリオド)の後に任意の名前をつけます。

.miyu {color:red; background-color;}

クラスの使い方は、CLASS=""の中にクラス名をいれます。

<P CLASS="MIYU">

IDセレクタの設定は、#の後に名前をつけます。

#sakura {color:pink;}

使い方は、ID=""です。

<P ID="sakura">

外部CSSの作り方

P {color:red;}
H4 {color:blue;}
.green {color:green}

こーいったものを、拡張子.cssを付けて保存すればOKです。いくつでも読みこめます。

コメント

CSSの中でコメントを付けるには/*〜*/で囲みます。

HR {width:80%; color:gray;} /*水平線の長さを80%,色をグレイにします*/

色の指定

次のステップでは色指定の属性が出てきますので、ちょっと説明します。5つあります。

#rrggbb #rgb

r,g,bは赤,緑,青を表します。16進数(0〜F)で指定します。#3366FFは、#36Fと同じです。#000で黒、#FFFで白になります。

rgb(r,g,b) rgb(r%,g%,b%)

左のは、数字を0〜255で指定します。右のは0%〜100%で指定します。

色の名前

あらかじめ決められてる名前で指定します。black,white,red,blue,yellow,green,maroon等です。

基本色です。 ■black■ ■white■ ■gray■ ■silver■ ■red■ ■yellow■ ■lime■ ■aqua■ ■blue■ ■fuchsia■ ■maroon■ ■olive■ ■green■ ■teal■ ■navy■ ■purple■

DIVとSPAN

HTMLの要素です。CSSでよく使うので、ここで説明します。DIVはブロックラベル要素、SPANはインライン要素です。何もしません。スタイルを指定する時などに使います。

<DIV STYLE="background-color:beige;">
この命令は、<SPAN STYLE="color:red;">何もしません</SPAN>が、よく使います。
</DIV>
この命令は、何もしませんが、よく使います。

入れ子

例えば、<P>内の<SPAN>の色を指定したい、という時には、

P SPAN {color:navy;}

という風に、要素(P)の後にスペースを開けて、要素(SPAN)を書きます。

DIV P SPAN {color:red;}

多重の入れ子にできます。

<div>
DIV P SPAN {color:red;}
<p>多重の<span>入れ子</span>にできます。</p>
</div>

クラスとの入れ子は、
クラス名.要素 {} です。

p.an {color:red;}

<p class="an">aka no iro</p>

p のクラスanのみ、赤色になります

Next : 次のステップへ
Pre  : 前のステップへ
 Up  : HTMLに戻る
Home : ホームに戻る
Presented by Rei

Gポイントポイ活　Amazon Yahoo 楽天

無料ホームページ 楽天モバイル[UNLIMITが今なら1円] 海外格安航空券 海外旅行保険が無料！