スタイルシート（CSS）

◎ 余白の設定：padding（パディング） & margin（マージン）

余白を設定するスタイルシート（CSS）として、「margin」と「padding」があります。

margin （マージン） サンプル margin:10px

■ margin（マージン）について 「margin」は、コンテンツの外側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 ・auto ：自動調整（プラウザの設定に依存） 　※マイナス指定可能

padding （パディング） サンプル padding:10px

■ padding（パディング）について 「padding」は、コンテンツの内側の余白を設定するCSSです。 ・数値＋単位で指定 ：（em, ex, pt, px）など ・数値＋％で指定 ：ひとつ外側のボックスに対する割合 　※マージンと異なりマイナス指定はできない

　※余白を利用することで、任意の位置にコンテンツを配置させることができます。

上部スペース（50px） 下部スペース（20px） 左側スペース（100px） margin:50px 0px 20px 100px;

さすが!と言わせる FC2ブログ徹底攻略術
HTML&スタイルシート レイアウトブック

代替文字とは画像がうまく表示されないときのために画像（IMGタグ）の「alt属性」に記述する文字の事を言います。（下部参照）
　
しかし、下記のように背景色が代替文字と同じような色の場合、代替文字が認識しずらくなってしまいます。

このような場合の対処方法として代替文字に対して文字色を指定する方法があります。

■代替文字に対して文字色を指定する方法（スタイルシート）

<div style="color:#fff;">
<img src="画像.gif"
alt="代替文字" width="100" height="30" border="0">
</div>

　※上記のソースでは、文字色として白色を指定しています。

■表示例

背景色に濃い色を使っている場合などは、代替文字に文字色を指定すると良いでしょう。

背景画像を指定するスタイルシートとフリー素材（背景画像）

■背景画像を指定するスタイルシート

body{
background: #ff8833 url("背景イメージへのパス") fixed;
}

　#ff8833　背景画像が表示されない場合、ここで指定した背景色を表示
　fixed　背景画像を固定する場合に使用

■自作背景画像（拡大表示）
　画像をクリックすると、実際の背景イメージをご覧いただけます。
　ほとんどのイメージが１kバイト以下の軽い画像です。ご自由にご利用ください。
　※ただし、直リンクは厳禁です。必ずダウンロードしてご利用下さい。

■HTMLリファレンス - カラー編（RGB）
※備考；RGBとは
　コンピュータで色を表現する際に用いられる表記法の一つ。
　色を赤(R)・緑(G)・青(B)の3つの色の組み合わせとして表現する。
　この3色は光の三原色と呼ばれ、この組み合わせですべての色を表現できます

■リンクする要素に対してスタイルを適用します
/* 記述例 */
a {
text-decoration: underline; color:#0000ff;
}

リンクするテキストにアンダーラインを表記し、青字で表示する
（underline ⇒ none　；アンダーラインを表記しない）

■リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します
/* 記述例 */
a:link {
color : #ff6633!important;
}
（important＝サイト制作者のスタイルよりもユーザーが設定した色を優先する）

■リンクする要素のうち、閲覧済（キャッシュされている）要素に対してスタイルを適用します
/* 記述例 */
a:visited {
color : #ff8800 !important; text-decoration: none;
}

閲覧済リンクテキストにアンダーラインを表記せず、オレンジ色で表示する

■リンクする要素のうち、未閲覧（キャッシュされていない）要素に対してスタイルを適用します
/* 記述例 */
a:hover {
color : #ff0000 !important; text-decoration: underline;
}

未閲覧リンクテキストにアンダーラインを表記し、赤色で表示する

■カーソルをその要素の上に置いているが、まだアクティブ状態でない時のスタイル
/* 記述例 */
a:hover {
color : #ff3333 !important; text-decoration: underline;
}

■アクティブ状態にされた時（クリックした時）のスタイル
a:active {
color : #ffff00 !important;
}

■フォント（文字）装飾 - モザイク文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:24pt;padding:5px;FONT-WEIGHT:bold;
FONT-FAMILY:Times New Roman; COLOR:#0000FF; FILTER:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=2)'>無料ブログSEOテンプレート</DIV>

　　※モザイクの強さ： maxsquare

▼実行例



■ブログ:スタイル シート（CSS）

■フォント（文字）装飾 - 波打ち文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:25px;padding:5px;FONT-WEIGHT:bold;
FONT-FAMILY:Times New Roman; COLOR:#0000FF; FILTER:progid:DXImageTransform.Microsoft.Wave(ad=0,freq=5,lightstrength=30,phase=4,strength=2)'>ブログ
テンプレート カスタマイズ</DIV>

　※波の数：phase　※光の強弱：lightstrength　※波の幅：strength

▼実行例


■ブログ:スタイル シート（CSS）

■フォント（文字）装飾 - 発光文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:26px;padding:5px;FONT-WEIGHT:bold;FONT-FAMILY:Times
New Roman;COLOR:#FF0000;FILTER:progid:DXImageTransform.Microsoft.Glow(color=#FFEE20,strength=10)'>ブログ
テンプレート カスタマイズ</DIV>

　　※発光の強さ： strength

▼実行例



■ブログ:スタイル シート（CSS）

■フォント（文字）装飾 - 影付き文字

▼ソース
<DIV STYLE='WIDTH:400px;FONT-SIZE:26px;padding:5px; FONT-WEIGHT:bold; FONT-FAMILY:Times
New Roman; COLOR:#FF0000; FILTER:progid:DXImageTransform.Microsoft.shadow(color=#aaaaaa,direction=135,strength=6)'>ブログ
テンプレート カスタマイズ</DIV>

▼実行例


影の方向： direction　　影の長さ： strength