アクセスカウンタ

zoom RSS テーマ「CSS」のブログ記事

みんなの「CSS」ブログ


CSS一からいじり倒す

2007/05/23 19:15
このまま放置もいいけど、スペースの無駄使いになるし、
それに表示が前々からおかしくなっていたので、
一気に変えてみました。

4時間くらいかかりましたが、色々学ぶことが多かったです。
とりあえず、グーグルで検索できるフォームを追加しました。
基本的にヤフーよりグーグル派なので・・・。
サイト内検索そして、全世界のWebサイトを検索できます。
せっかく設置したので使ってください。

次は画像とか入れてみたいです。
絵とか下手なので自分で撮った写真とか。

まぁ、背景が黒なのは、たまたまです。
少し、ダサいかもしれません(笑)
ピンクとか赤とか好きなので
今後はそういった色も取り入れたいです。
昔の私よりは最近は派手な色が好きです。


記事へブログ気持玉 / トラックバック / コメント


CSS解説★トップ、月別、テーマ別ページ (プロフィール)編

2006/04/10 21:19
CSS解説★共通スタイル(背景)編
CSS解説★共通スタイル(コンテナ領域)編
CSS解説★共通スタイル(カウンタ)編
CSS解説★共通スタイル(アンカー)編
CSS解説★共通スタイル(ページフッタ領域)編
CSS解説★トップ、月別、テーマ別ページ (タイトル大)編
CSS解説★トップ、月別、テーマ別ページ (タイトルテキスト)編
CSS解説★トップ、月別、テーマ別ページ (ログインボタン)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、トップ、月別、テーマ別ページ (プロフィール)編

↓ここから↓
/*---------------- プロフィール ----------------*/
/* ブログ紹介が書いてある領域 */
#profile{
background:#dceff8;
/*↑背景色指定。
また、背景に画像を使う場合は『background:#dceff8;』を
「background:url("背景画像のURL");」 に変える。*/

border-bottom:1px solid #fff;
/*領域の下の枠線の指定。
『1px』は線の太さ、『solid』は直線、『#fff』は線の色 */
}

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
color:#056bab;
/*「ブログ名」「自己紹介」の文字の色を指定*/
}

/* プロフィールテキストの指定 */
#profile dd{
/* ↑テキストの文字色、サイズなどはここで指定する。 */
}
/*----------------------------------------------*/
↑ここまで↑

★背景画像をもっと細かく指定する場合★
また他に背景に関するスタイルを定義することができる。 
上に書いた『background:#dceff8;』や 
『background:url("背景画像のURL");』の下に書く。

background-repeat:背景画像の繰り返し方法
『:』の後に「repeat;」→縦方向・横方向に繰り返し表示
『:』の後に「repeat-x;」→横方向にのみ繰り返し表示
『:』の後に「repeat-y;」→縦方向にのみ繰り返し表示
『:』の後に「no-repeat;」→くり返さない(単独で表示)

background-attachment:スクロール時の背景画像
『:』の後に「fixed;」→画像がスクロールしない(背景固定)
『:』の後に「scroll;」→画像がスクロールする。

background-position :背景画像の位置
垂直方向の位置を指定する場合は
『:』の後に「top;」(上)、「center;」(中央)、「bottom;」(下)
水平方向の位置を指定する場合は
『:』の後に「left;」(左)、「center;」(中央)、「right;」(右)
半角スペースで区切って指定。 値を一つだけ設定した場合は、
もう一方はcenterに設定される。

『background-repeat』と『background-position』
は、通常、同時には使わない。

★線の位置★
「top」(上)、「center」(中央)、「bottom」(下)

★線の太さ★
「0px」から指定できる

★線の種類★
「soild」  実線
「dashed」 破線(切り取り線みたいなやつ)
「dotted」 点線(線が均一の長さ)
「double」 二重線(3px以上じゃないと使えません)

★線の色★
カラー名やRGB値を指定する。

★文字サイズ指定方法
font-size:サイズをここに書く;
↑タイトル文字の大きさを指定する。
小さい順に「xx-small;」、「x-small;」、「small;」、「medium;」、「large;」、「x-large;」、「xx-large;」 の7段階で指定する。

★何も設定したくない場合は、
#profile dd{
}
↑のままで、何も書く必要はありません。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 / トラックバック / コメント


CSS解説★トップ、月別、テーマ別ページ (ログインボタン)編

2006/04/10 17:08
CSS解説★共通スタイル(背景)編
CSS解説★共通スタイル(コンテナ領域)編
CSS解説★共通スタイル(カウンタ)編
CSS解説★共通スタイル(アンカー)編
CSS解説★共通スタイル(ページフッタ領域)編
CSS解説★トップ、月別、テーマ別ページ (タイトル大)編
CSS解説★トップ、月別、テーマ別ページ (タイトルテキスト)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、トップ、月別、テーマ別ページ (ログインボタン)編
この項目は指定してもウェブリブログの構造が
変わってしまったため、全く意味がないかもしれません。


↓ここから↓
/*----------------------------------------------*/
/* ログインボタン */
#banner #login{
/* タイトル領域内での位置を指定します */
position:absolute;
/*↑そのままで*/

bottom:5px;
/* 下から5pxという意味 */

right:5px;
/* 右から5pxという意味 */
}
/*----------------------------------------------*/
↑ここまで↑

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 1 / コメント 0


CSS解説★トップ、月別、テーマ別ページ (タイトルテキスト)編

2006/04/10 07:47
CSS解説★共通スタイル(背景)編
CSS解説★共通スタイル(コンテナ領域)編
CSS解説★共通スタイル(カウンタ)編
CSS解説★共通スタイル(アンカー)編
CSS解説★共通スタイル(ページフッタ領域)編
CSS解説★トップ、月別、テーマ別ページ (タイトル大)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、トップ、月別、テーマ別ページ (タイトルテキスト)編

↓ここから↓
/*----------------------------------------------*/
/* タイトル領域内のアンカー */
#banner a{
color:#fff;
/* ↑タイトル部分の領域のリンク文字色を指定。
主にトップ、月別、テーマ別ページに出てくるタイトル文字。
背景色(#fff)をカラー名やRGB値で指定する。 */
}

/* タイトルテキスト */
#banner h1{
font-size:x-large;
/* ↑タイトル文字の大きさを指定する。
小さい順に「xx-small;」、「x-small;」、「small;」、「medium;」、「large;」、「x-large;」、「xx-large;」 の7段階で指定する。 */

font-family:"Trebuchet MS", "MS Pゴシック";
/* ↑タイトル文字のフォントを指定する。
「"英字表記", "日本語表記";」になっている。 */

/* タイトル領域内での位置を指定します */
position:absolute;
top:10px;
/* ↑タイトル文字の位置を指定。上から『10px』ということ。 */

left:15px;
/* ↑タイトル文字の位置を指定。左から『15px』ということ。 */
}
/*----------------------------------------------*/
↑ここまで↑

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 2 / コメント 0


CSS解説★トップ、月別、テーマ別ページ(タイトル大)編

2006/04/09 23:39
CSS解説★共通スタイル(背景)編
CSS解説★共通スタイル(コンテナ領域)編
CSS解説★共通スタイル(カウンタ)編
CSS解説★共通スタイル(アンカー)編
CSS解説★共通スタイル(ページフッタ領域)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、トップ、月別、テーマ別ページ (タイトル大)編

↓ここから↓
/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
background:#499acd;
/* ↑タイトル部分の領域の背景を指定。
背景色(#499acd)をカラー名やRGB値で指定する
背景を画像にする場合『background:#499acd;』を
「background:url("背景画像のURL");」 に変える。*/

/* 包含要素を相対位置指定できるようにします */
height:85px;
/* ↑タイトル領域の高さをpxで指定する。 */

    position:relative;
/* タイトルの文字の位置指定。ここはこのままでいいです。
そうしないと、以下の設定ができなくなります。 */
}
/*----------------------------------------------*/
↑ここまで↑

★背景画像をもっと細かく指定する場合★
また他に背景に関するスタイルを定義することができる。 
上に書いた『background:#bde2f2;』や 
『background:url("背景画像のURL");』の下に書く。

background-repeat:背景画像の繰り返し方法
『:』の後に「repeat;」→縦方向・横方向に繰り返し表示
『:』の後に「repeat-x;」→横方向にのみ繰り返し表示
『:』の後に「repeat-y;」→縦方向にのみ繰り返し表示
『:』の後に「no-repeat;」→くり返さない(単独で表示)

background-attachment:スクロール時の背景画像
『:』の後に「fixed;」→画像がスクロールしない(背景固定)
『:』の後に「scroll;」→画像がスクロールする。

background-position :背景画像の位置
垂直方向の位置を指定する場合は
『:』の後に「top;」(上)、「center;」(中央)、「bottom;」(下)
水平方向の位置を指定する場合は
『:』の後に「left;」(左)、「center;」(中央)、「right;」(右)
半角スペースで区切って指定。 値を一つだけ設定した場合は、
もう一方はcenterに設定される。

『background-repeat』と『background-position』
は、通常、同時には使わない。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 3 / コメント 0


CSS解説★共通スタイル(ページフッタ領域)編

2006/04/09 20:35
前前前々回→CSS解説★共通スタイル(背景)編
前前々回→CSS解説★共通スタイル(コンテナ領域)編
前々回→CSS解説★共通スタイル(カウンタ)編
前回→CSS解説★共通スタイル(アンカー)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、共通スタイル(ページフッタ領域)編
デフォルトテンプレートだけでは物足りないと思いますので、
いきなり、応用を足しているのでご注意ください。

↓ここから↓
/*-------------- ページフッタ領域 --------------*/
/*ページフッタ領域とは、ブログの一番下に表示される「サンプル >> ウェブリブログ(無料) | BIGLOBEトップ | BIGLOBEストリーム(動画)」の領域。*/

#footer{
}
/* ↑『#footer{』は、そのままで結構です */

/* フッタ内のアンカー */
#footer a{
color:#fff;
/* フッタ内のリンクの文字色
『:』の後にカラー名やRGB値(#000000など)を指定する。 */
}

/* リンク領域 */
#footer #links{
border-bottom:2px dotted #fff;
/*↑「サンプル >> ウェブリブログ(無料) | BIGLOBEトップ | BIGLOBEストリーム(動画)」の真下に現れる線 のこと。
『bottom(下)』は線の位置、『2px』は線の太さ、
『dotted(点線)』は線の種類、『#fff』は線の色 */
}

/* ウェブリブログトップへのリンクバナー */
/* 一番下の右のバナー */
#footer #sbanner img{
border:1px solid #fff;
/* 『1px』はリンクの線枠の太さ、
『solid』はリンクの線枠の線の種類、
『#fff』はリンクの線枠の色 */
}
/*----------------------------------------------*/
↑ここまで↑

★線の位置★
「top」(上)、「center」(中央)、「bottom」(下)

★線の太さ★
「0px」から指定できる

★線の種類★
「soild」  実線
「dashed」 破線(切り取り線みたいなやつ)
「dotted」 点線(線が均一の長さ)
「double」 二重線(3px以上じゃないと使えません)

★線の色★
カラー名やRGB値を指定する。

★何も設定したくない場合は、
#footer{
}
↑のままで、何も書く必要はありません。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、
コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 4 / コメント 0


CSSの自動作成サイト紹介

2006/04/09 18:13
簡単にCSSが自分好みに自動作成してくれるサイトを発見★
是非是非、暇な方は、行っちゃってください(笑)↓

http://www.joy.hi-ho.ne.jp/suzukake/css/index.html

行くとまず、「CSSを試す1。」へどうぞ。
HTMLしか見た事ないっていう方でもできるかも(笑)
記事へブログ気持玉 / トラックバック / コメント


CSS解説★共通スタイル(アンカー)編

2006/04/09 15:45
前前々回→CSS解説★共通スタイル(背景)編
前々回→CSS解説★共通スタイル(コンテナ領域)編
前回→CSS解説★共通スタイル(カウンタ)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、共通スタイル(アンカー)編
デフォルトテンプレートだけでは物足りないと思いますので、
いきなり、応用を足しているのでご注意ください。

↓ここから↓
/*----------------------------------------------*/
/* アンカー */
/* リンク部分の指定 */
a,

/* ↓クリック前のリンクの状態指定 */
a:link{

color: 色; background-color: 色;
/* 「色;」の所に書く記述。
「color」は文字色 「background-color」は文字背景色 。
『:』の後にカラー名やRGB値(#000000など)を指定する。*/

text-decoration:文字の線;
/* 「文字の線;」の所に書く記述。
「underline;」は下に線が出る
「none ;」にすると線は引かれない
「overline;」は上線
「line-through;」は真ん中に取り消し線
「overline underline;」は上下に線
「overline underline line-through;」3本全て線を付ける */
}

/* ↓マウスで押した時の状態指定 */
a:active{
color: 色; background-color: 色;
text-decoration:文字の線;
}

/* ↓カーソルが乗った状態指定 */
a:hover{
color: 色; background-color: 色;
text-decoration:文字の線;
}

/* ↓訪問後の状態指定 */
a:visited{
color: 色; background-color: 色;
text-decoration:文字の線;
}

/* ↓マウスで押した時の状態指定 */
a:hover{
color: 色; background-color: 色;
text-decoration:underline;
/*文字の線の種類はデフォルトテンプレートのままですが、
変更することも可能。*/
}
/*----------------------------------------------*/
↑ここまで↑

★何も設定したくない場合は、
a:link{
}
↑のままで、何も書く必要はありません。
通常、指定するは文字色だけだと思いますので、
『text-decoration:文字の線;』の部分はそのまま
削除するといいと思います。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、
コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 5 / コメント 0


CSS解説★共通スタイル(カウンタ)編

2006/04/09 14:34
前々回→CSS解説★共通スタイル(背景)編
前回→CSS解説★共通スタイル(コンテナ領域)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、共通スタイル(カウンタ)編

↓ここから↓
/*----------------------------------------------*/
/* カウンタ領域 */
#counter{
text-align:right;
/*↑カウンタの位置を指定する。
『:』の後に「left;」(左)、「center;」(中央)、「right;」(右)*/

background:#bde2f2;
/* カウンタ背景色(#bde2f2)をカラー名やRGB値で指定する
背景を画像にする場合『background:#bde2f2;』を
「background:url("背景画像のURL");」 に変える。 */

padding:2px 5px;
/* カウンタの縦の領域『2px』と横の領域『5px』の指定。
ここは手を加える必要はないかもしれない。 */

/*↓ココからは応用★領域線指定 */
border:1px solid #000;
/* 領域枠の太さ(「0px」から指定できる)、
線の種類→「soild」  実線(一本線)
 「dashed」 破線(切り取り線みたいなやつ)
 「dotted」 点線(・・・・・←こんなやつ。線が均一の長さ)
 「double」 二重線(3px以上じゃないと使えません)、
そして、カラー名やRGB値を指定する。 */
}
/*----------------------------------------------*/
↑ここまで↑

★背景画像をもっと細かく指定する場合★
また他に背景に関するスタイルを定義することができる。 
上に書いた『background:#bde2f2;』や 
『background:url("背景画像のURL");』の下に書く。

background-repeat:背景画像の繰り返し方法
『:』の後に「repeat;」→縦方向・横方向に繰り返し表示
『:』の後に「repeat-x;」→横方向にのみ繰り返し表示
『:』の後に「repeat-y;」→縦方向にのみ繰り返し表示
『:』の後に「no-repeat;」→くり返さない(単独で表示)

background-attachment:スクロール時の背景画像
『:』の後に「fixed;」→画像がスクロールしない(背景固定)
『:』の後に「scroll;」→画像がスクロールする。

background-position :背景画像の位置
垂直方向の位置を指定する場合は
『:』の後に「top;」(上)、「center;」(中央)、「bottom;」(下)
水平方向の位置を指定する場合は
『:』の後に「left;」(左)、「center;」(中央)、「right;」(右)
半角スペースで区切って指定。 値を一つだけ設定した場合は、
もう一方はcenterに設定される。

『background-repeat』と『background-position』
は、通常、同時には使わない。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 6 / コメント 0


CSS解説★共通スタイル(コンテナ領域)編

2006/04/09 13:52
前回→CSS解説★共通スタイル(背景)編

デフォルトテンプレートを元にやっていきます(↓参考)
https://bblog.sso.biglobe.ne.jp/guide/css_sample.html
CSS編集例に載っているものはそのまま使います。

そのままコピーペーストして持ち帰ると楽ですが、
その場合は、コメント(URL付き)か
リンク http://happy-swing.at.webry.info/
のどちらかはしてください。


では、共通スタイル(コンテナ)編

↓ここから↓
/*----------------------------------------------*/
/* コンテナ(広告・フッタを除くメイン領域) */

/* コンテナとは、ここではトップのタイトル部分や
カウンタ部分を含まない、メインだけの領域
(記事やカレンダーなどが現れる領域のこと) */

#container{
background:#e9e9e9;
/* ↑コンテナ部分のカラー名やRGB値をここで指定する。
また、背景に画像を使う場合は『background:#e9e9e9;』を
「background:url("背景画像のURL");」 に変える。 */

font-size:small;
/* ↑コンテナ部分の文字のサイズを指定する。
小さい順に「xx-small;」、「x-small;」、「small;」、「medium;」、「large;」、「x-large;」、「xx-large;」 の7段階で指定する。 */

border:1px solid #fff;
/* コンテナ部分の枠の太さ(「0px」から指定できる)、
線の種類→「soild」  実線(一本線)
 「dashed」 破線(切り取り線みたいなやつ)
 「dotted」 点線(------←こんなやつ。線が均一の長さ)
 「double」 二重線(3px以上じゃないと使えません)、
カラー名やRGB値を指定する。 */

/*↓ココからは応用★コンテナ枠の領域の広さを変えたい場合 */
width:700px;
/* 普通は700pxなので、600px〜800pxが妥当 */

}
/*----------------------------------------------*/
↑ここまで↑

★背景画像をもっと細かく指定する場合★
また他に背景に関するスタイルを定義することができる。 
上に書いた『background:#e9e9e9;』や 
『background:url("背景画像のURL");』の下に書く。

background-repeat:背景画像の繰り返し方法
『:』の後に「repeat;」→縦方向・横方向に繰り返し表示
『:』の後に「repeat-x;」→横方向にのみ繰り返し表示
『:』の後に「repeat-y;」→縦方向にのみ繰り返し表示
『:』の後に「no-repeat;」→くり返さない(単独で表示)

background-attachment:スクロール時の背景画像
『:』の後に「fixed;」→画像がスクロールしない(背景固定)
『:』の後に「scroll;」→画像がスクロールする。

background-position :背景画像の位置
垂直方向の位置を指定する場合は
『:』の後に「top;」(上)、「center;」(中央)、「bottom;」(下)
水平方向の位置を指定する場合は
『:』の後に「left;」(左)、「center;」(中央)、「right;」(右)
半角スペースで区切って指定。 値を一つだけ設定した場合は、
もう一方はcenterに設定される。

『background-repeat』と『background-position』
は、通常、同時には使わない。

★最後の『}』を絶対忘れないでください。
分からない方は、『ここから〜ここまで』をそのままコピー。
勿論、『ここから』、『ここまで』の文字は含まない。

★/* 〜 */とは・・・CSS画面では表示されますが、
ブログには反映されません。
そのまま残していただいて結構です。

どうしてもコピーができない場合は、
コメント(URL付き)をしてくださいね。
コビーの仕方→文字を反転し、コントロールキーと『C』の両押。

↓カラーコード参考サイト↓
http://www.finitojapan.com/cltable.html

横幅の広げ方:サイドバー表示にすると狭いと感じる方へ
オクターブの共鳴音さんのサイトに詳しく載っています。
http://resonance222.at.webry.info/200503/article_6.html

次はいつ更新されるか・・・不明です。すみません。
↓ウェブリリーダー↓やお気に入りなどに
登録される事をおすすめします。
http://webryreader.biglobe.ne.jp/
記事へブログ気持玉 0 / トラックバック 7 / コメント 0


タイトル 日 時
CSS解説★共通スタイル(背景)編
ウェブリブログのCSSについて一から分析・・・? いや、勉強のために初心者向けに解説やってみようと思います。 一からやっているサイトがまだ見つかっていないもので。。 見つかり次第、辞めるかもしれません(笑) ...続きを見る

ブログ気持玉 0 / トラックバック 8 / コメント 0

2006/04/09 01:28
CSSテンプレート(ウェブリブログ専用)
このブログは自分でCSSを編集して作ってます。 これと同じテンプレート探してもありません。 もちろん、ソフトなんかも使わず、一つ一つ打ち込んで、 編集してます。テキストで。 白と黒がメインで、Macでの表示を優先してます(笑) ...続きを見る

ナイス ブログ気持玉 1 / トラックバック 1 / コメント 2

2006/02/27 15:20

トップへ | みんなの「CSS」ブログ

17ans★BLOG CSSのテーマ/BIGLOBEウェブリブログ
文字サイズ:       閉じる