ＨＯＭＥ

color

colorとは色を指定する属性です。この色とは、背景の色ではなく文字の色の指定です。
ほとんどのセレクタで使えます。
<head>
<style TYPE="text/css">
<!--
font{
color:#ff00ff;
}
-->
</style>
</head>
このような文を書くと、fontタグの文字の色を#ff00ffに指定したことになります。
これは、スタイルシートを使わなくてもできますけどね＾＾；

scrollbar

スクロールバーの色などの指定にはscrollbar-...という属性を使います。セレクタはbodyです。
<head>
<style TYPE="text/css">
<!--
body{
scrollbar-face-color:#ddddff;
scrollbar-highlight-color:#aaaaff;
scrollbar-shadow-color:#aaaaff;
scrollbar-3dlight-color:#ddddff;
scrollbar-darkshadow-color:#9999ff;
scrollbar-arrow-color:000000;
scrollbar-track-color:#ffffff;
}
-->
</style>
</head>
これがこのページのスクロールバーのスタイルシートです。
scrollbar-face-color　は真ん中の部分の色のことです。
scrollbar-highlight-color　は左と上の内側の枠の色です。
scrollbar-shadow-color　は右と下の内側の枠の色です。
scrollbar-3dlight-color　は左と上の外側の枠の色です。
scrollbar-darkshadow-color　は右と下の外側の枠の色です。
scrollbar-arrow-color　は矢印の色です。
scrollbar-track-color　はスクロールバーのない部分の色です
色の組み合わせはいろいろ試して、自分に合ったものにしてみるのもいいでしょう。

background

backgroundは背景を指定するのに使います。
ほとんどのセレクタで使えます。
background-color　は色で指定する場合。
background-image　は画像から指定する場合。
background-attachment　はウインドウをスクロールしたときの背景の動作を指定します。fixedにすると、スクロールしても背景は動かなくなります。
<head>
<style TYPE="text/css">
<!--
body{
background-image:url(http://.../back.gif);
background-attachment:fixed;
}
-->
</style>
</head>
これは、bodyだけでなく、font・tableなどいろいろなセレクタで使えます。
このページはスクロールしても背景が動かなくしてあります。

position

positionとは位置の指定の方法を指定する属性です。
relative（本来の位置からの相対位置指定）、absolute（絶対位置指定「スクロールすると動きます」）、fixed（絶対位置に固定「スクロールしても動きません」）があります。
positionを指定した場合は一緒にtop、left、bottom、rightも一緒に指定します。
例えば、画像を絶対位置で指定するには、下のような文を書きます。

<img src="..." style="position:absolute; top:100px; left:100px;">

絶対位置で指定すると、他の画像などと重なって表示することができたり、それを書く場所がどこでも同じように表示することができます。
重なることに注意して使うようにしましょう。

filter

filterとは文字や画像に対して影付きやぼかしなどの効果をつけることができます。

・影を付ける
colorは影の色、directionは影の方向を指定します。上が0、右は90、下は180、左は270で、時計回りの角度を指定します。
<font size="+1"
style="width:100%; filter:Shadow(color=#aaaaaa,direction=135)">
あいうえお
</font>
↓

あいうえお

・半透明にする
opacityは透明度の度合いを指定します。0（透明）〜100（不透明）の間で指定します。
これは、tableやbodyの属性でも使うことができ、半透明にすることでページの感じが結構変ります。

<img src="../sozai/itigo.jpg" style="filter: Alpha(opacity=50);">

↓

・白黒にする

<img src="../sozai/itigo.jpg" style="filter: Gray();">

↓
←もとの画像はこれです。

border

borderとは指定したセレクタの回りの枠を指定する。属性です。
tableはもちろん、ほとんどのセレクタで使えます。
<talbe>で使うと、<td>には枠が表示されないので、テーブルの回りの枠だけを使いたい時などに使えます。
指定の方法は、style="border:枠の幅 枠の形式 枠の色;"といった感じで指定します。
枠の幅 枠の形式 枠の色の間には半角スペースが入ってます。
<font style="border: 1px solid blue;">枠の指定</font>
↓

　枠の指定


枠を、上だけに表示したい場合は、属性をborder-topにするとできます。
上と下だけ枠を表示したい場合には、border-topとborder-bottomを指定するということもできます
<font style="border-top:3px solid blue;">枠が上だけ</font>
<font style="border-bottom:3px solid red;">枠が下だけ</font>
<font style="border-left:3px solid green;">枠が左だけ</font>
<font style="border-right:3px solid yellow;">枠が右だけ</font>
<font style="border-top:3px solid gray; border-bottom:3px solid gray">
上下に枠</font>
↓

　枠が上だけ

　枠が下だけ

　枠が左だけ

　枠が右だけ

　上下に枠


枠の形式には、none（線無し）、dotted（点線）、dashed（粗い点線）、solid（実線）などがあります。
<font style="border:2px dotted blue;">点線</font>
<font style="border:2px dashed blue;">粗い点線</font>
<font style="border:2px solid blue;">実線</font>
↓

　点線

　粗い点線

　実線

text-decoration

text-decorationとは、テキストの装飾を指定する属性です。
装飾には、none（何もなし）、underline（下線）、overline（上線）、line-through（打ち消し線）があります。
指定の方法は、<font style="text-decoration:装飾;">といったように、使えます。
リンクの下線をなくす場合にも使うことができます。
<font style="text-decoration:line-through;">
打ち消し線を指定した文字。
</font>
↓

打ち消し線を指定した文字。


リンクの下線をなくすには、このようなタグを<head>内に書くとできます。
<style type=text/css><!--
a {
text-decoration:none;
}
 --></style>
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送