ecari CSSメモ

⇒戻る

HTML
基本・文字・背景
リンク・画像
テーブル
フレーム
フォーム関連

CSS
背景・リンク他

CSSメモ―背景・リンク関連―

１、背景関連
<head>から</head>の間に入れる。

■背景画像の表示
<style type="text/css">

</style>

□ repeat（画像の表示の仕方）
repeat（リピート表示）、no-repeat（１つだけ表示）、repeat-x（横側へリピート）、repeat-y（縦側へリピート）
□ attachment（表示の仕方その２）
fixed（固定）、scroll（スクロールすると画像も一緒に付いて来る＝backgroundでの指定と同じ）
□ position（画像の位置）
X＝数値を大きくする程右寄り、Y＝数値を大きくする程下寄り

■テーブルのセルの背景色関連
ポインタをセルに合わせると背景色が変わる（JavaScriptとの併用）
セルごとに指定するので<td>の中に入れる。

bgcolor="色指定" onmouseover="this.style.backgroundColor='色指定'" onmouseout="this.style.backgroundColor='色指定'"

□ bgcolor：元々の背景色
□ onmouseover：ポインタをセルに合わせた時の背景色
□ onmouseout：ポインタをセルから外した時の背景色

＜サンプル＞

黒く

赤く

２、リンク関連
<head>から</head>の間に入れる。

■色とアンダーライン関連
<style type="text/css">

</style>

□ a:link：通常時のリンクへの指定
□ a:visited：訪問済みのリンクへの指定
□ a:hover：ポインタを合わせた時のリンクへの指定
□ text-decoration
none（アンダーラインなし）、underline（アンダーラインあり）
□ color：リンクの文字色
□ background-color：リンクの背景色

■各部ごとにリンク装飾指定
上のは一括指定。一部だけ、もしくは各部ごとに指定したい時は、まず下記のタグを打つ。

<style type="text/css">

</style>

この指定をしたいリンクを下記のようなタグで囲む。

<span class="link">指定したいリンク</span>

例えばspan.link1とかにして<span class="link1">というように指定していけばいくらでも増やせる。

３、全体関連
<style type="text/css">

</style>

□ color：文字色
□ background-color：背景色
□ font-size：フォントサイズ。ここではピクセル指定
□ line-height：行間を空けたい時などに指定
□ p：段落の指定。ここでは文頭を一文字下げる指定
□ table：ここではフォントサイズだけ指定。

４、諸注意
linkのhover指定が反映されない時
a:hover{text-decoration:none;color:色指定 ! important;}

CSSメモ―外部化―

CSSの指定の部分だけを書いて、拡張子を「.css」にして保存。
このCSSを適用したいHTMLファイルの<head>から</head>の間に、以下のタグを書く。
<LINK type="text/css" rel="stylesheet" href="CSSファイル名">

文字色や文字の装飾を変える箇所が同じ部分などがある場合、CSSに記述しておくと楽。

サンプル
.b{color:色指定;
font-weight:bold;}

■.b
自分で解りやすいように適当に名前をつける（最初のドットは必須）
■color：文字色
■font-weight：ここれは太字指定

この指定を適用したい部分を、以下のタグで囲めば適用。bの部分は自分で付けた名前に。

<span class="b"> </span>