cssの使い方／イラスト・アイコンのフリー素材

cssの使い方

（４）cssファイルについて

cssファイルは、メモ帳ソフトなどで簡単に作れます。
下記例のようなソースを記述して、ファイルの拡張子をcssにする（ファイル名.css）だけです。

.sample{
background-image: url(../image/aicon.gif);
background-repeat: no-repeat;
background-position: left;
font-size: 10pt;
padding: 0px 0px 0px 16px;
}

htmlファイルのように、HEADタグやBODYタグなどは必要ありません。上記のような各々のクラスの内容指定を書き連ねていきます。

（５）各cssタグの説明

font-size	文字の大きさ指定。
font-wight	文字の太さ指定。font-weight:bold;で太字。
border	枠線の指定。border:1px solid #000000;　で、太さ・線種・線色を指定。線種はsolidが実線、dottedまたはdashedが破線。上下左右の一箇所だけ線を付けたい場合には、borderではなく、 border-top、border-bottom、border-left、border-rightで各々を指定。
margin	一塊の外側の余白を指定。margin:;5px 10px 0px 20px。左から、上の余白・右の余白・下の余白・左の余白を指定。
padding	一塊の内側の余白を指定。上下左右の余白の指定方法はmarginと同様。 marginとの違いは、border（枠線）などを使ったときに分かりやすいです。枠の外の余白がmargin、枠の中の余白（枠線と中文字との余白）がpadding になります。
background-image	一塊内に画像を表示込ませるときに使用。 IMGタグを使わずに画像を表示できます。一塊の背景画像を利用するときなどに便利です。画像と文字の位置の調整がしやすいので、タイトルやメニュー項目などの頭にマークを付けたいときによく使います。 background-image: url(../image/aicon.gif);で画像ファイルを指定します。画像ファイルの指定の仕方は、cssファイルと画像ファイルの位置関係によります。『ファイル・フォルダの位置関係』参照。
background-repeat	画像の繰り返しを指定。繰り返さない場合は、no-repeat。横方向のみに繰り返す場合には、repeat-x。縦方向のみに繰り返す場合には、repeat-y。
background-position	画像の位置を指定。top、bottom、left、rightで上下左右に指定。左に寄せるなら、background-position:left;。