スタイルシート （CSS）

■フォント（文字）装飾 - ぼかし文字


　　※ぼかし文字のスタイルシート（CSS）ソース

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


　　※影付き文字のスタイルシート（CSS）ソース

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


　　※発光文字のスタイルシート（CSS）ソース

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


　　※波打ち文字のスタイルシート（CSS）ソース

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


　　※モザイク文字のスタイルシート（CSS）ソース

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

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

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

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

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

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

記事にご満足頂けましたら、クリックをお願い致します
週刊ブログランキング 人気blogランキング！ 人気ブログ検索-ブログフリーク

■画像や文字を透明化するスタイルシート（CSS）

　　以下のCSSを、透明化させたいオブジェクト内に記入して下さい。
　　background-color:背景色;filter:Alpha(opacity=60);
　　※数字(60)の部分が少ない程透け具合が強くなります。

ここでは、テーブルタグ内をスタイルシートで制御しています。 ※記入例；style="background-color:背景色;filter:Alpha(opacity=60);"

　※透明化していない画像 ⇒

背景色にグラデーションをかけます。（※ IE のみ有効）

■ページ全体にグラデーションをかける

html {
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffee,endColorStr=#ffee66);
}

　※0の部分を、「1」にすれば横にグラデーションがかかります。


■ブロックにグラデーションをかける

#headBlock {
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ccffff,endColorStr=#99ff00);
}

　※ここでは、ヘッダー部分にグラデーションをかけています。

■サンプルページ

初心者のためのスタイルシート講座（CSS）

いろいろな方から、ブログのカスタマイズに関するご質問を頂きますが、なかなかすぐにはお答えできませんので、できる範囲で少しずつ、ブログのカスタマイズに関する事を、ご紹介させて頂きます。

とりあえず今回は、「リンク表示設定のスタイルシート」です。

■リンクする要素に対してスタイルを適用します
/* 記述例 */
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;
}


記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

背景画像を固定する方法〜スタイルシート（css）

※以下のページを参考にして下さい。

背景画像を上部のみに固定表示する方法
背景画像を左端のみに固定表示する方法
背景画像を自由な位置に固定表示する方法

　 今、人気のブログはこちら！　 記事に満足したらここをクリック！

JAVAスクリプト〜サンプル置き場