ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

カテゴリ:CSSのトレーニング( 20 )
Top↑

CSSのトレーニング(18)カレンダー内の画像表示(その3)
本日の日付に点滅する画像を表示しましょう。

表示した画像はリピートなし、上下、左右とも中央揃えをします。

.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
/*BACKGROUND : #FFFFFF;*/
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
background-image:url('http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/12.gif');
background-repeat:no-repeat;
background-position:center center;

}

a0034054_15484878.jpg

[PR]
by vlsasaki2 | 2004-12-28 15:47 | CSSのトレーニング Top↑

CSSのトレーニング(17)カレンダー内の画像表示(その2)
カレンダー内の構造が分かればあとは簡単です。
一番下の階層であるDIV.CAL部に背景画像として表示するだけです。

表示した画像はリピートなし、左端で上から15ピクセル下げています。

DIV.CAL {
WIDTH : 158PX;
MARGIN : 5PX 0PX;
PADDING-BOTTOM : 10PX;
BORDER : 1PX SOLID #CECECE;
TEXT-ALIGN : CENTER;
BACKGROUND : #FFFFFF;
background-image:url('http://www2u.biglobe.ne.jp/~t-sasaki/blog/pic/bg/11.gif');
background-repeat:no-repeat;
background-position:0px 15px;

}


a0034054_1543157.jpg

[PR]
by vlsasaki2 | 2004-12-28 15:42 | CSSのトレーニング Top↑

CSSのトレーニング(16)カレンダー内の画像表示(その1)
カレンダー内の画像の表示は少しコツがあります。

いくつかの階層で背景色(background)が設定してあるのでそれを要領よく非実行文(リマーク)にする必要があります。

関係しているのは、
DIV.CALの「BACKGROUND : #FFFFFF;」
DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」
.CAL_TODAYの「BACKGROUND : #FFFFFF;」
.CAL_TRの「BACKGROUND : #FFFFFF;」
の4箇所です。

これは下の階層から見ると、
一番上  4..CAL_TODAYの「BACKGROUND : #FFFFFF;」
      3..CAL_TRの「BACKGROUND : #FFFFFF;」
      2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」
一番下  1.DIV.CALの「BACKGROUND : #FFFFFF;」

となっています。

修正する過程で分かり易いように色を変えてみましょう。
1.DIV.CALの「BACKGROUND : #C0C0C0;」 薄いグレー
2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」 白
3..CAL_TRの「BACKGROUND : #808080;」 濃いグレー
4..CAL_TODAYの「BACKGROUND : #000000;」 黒
a0034054_1522179.jpg


一番下の階層の薄いグレーはそのままにして、それ以外のところを非実行文にします。
上の階層から順番に指定していきましょう。
4..CAL_TODAYの「BACKGROUND : #000000;」を非実行文にした様子。
.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
/*BACKGROUND : #FFFFFF;*/
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

a0034054_15223683.jpg

3..CAL_TRの「BACKGROUND : #808080;」を非実行文にした様子。
.CAL_TR {
/*BACKGROUND : #FFFFFF;*/
}

a0034054_15225675.jpg

2.DIV.CAL_BODYの「BACKGROUND : #FFFFFF;」を非実行文にした様子。
DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
/*BACKGROUND : #FFFFFF;*/
}

a0034054_1524928.jpg


これで一番下の背景色以外はすべて非表示となりました。
背景色を白に戻しておきましょう。
a0034054_15364437.jpg

[PR]
by vlsasaki2 | 2004-12-28 15:14 | CSSのトレーニング Top↑

CSSのトレーニング(14)本文中の流れる掲示板(補足)
CSSのトレーニング(14)本文中の流れる掲示板の記事でソースを貼り付けたあとに改行を削除するというところが分かりにくかったのではないかと思いますので若干補足をいたします。

単純にソースを貼り付けるとリピートが働いてこうなります。
a0034054_12251617.jpg

それで注意書きとして「ここの改行を削除してください」ということにしていました。
a0034054_12263863.gif

貼り付けた編集画面ではここになります。
a0034054_1227640.gif

ここの改行を削除したソースです。
a0034054_1248169.gif

するとこうなります。
a0034054_12495857.jpg

実験してうまくいったら画像ファイルをダウンロードし自分のサイトにアップしてください。
そうしないと私のファイルがトラブルを起こした時に連動して表示できなくなるおそれがあります。
[PR]
by vlsasaki2 | 2004-12-26 12:17 | CSSのトレーニング Top↑

CSSのトレーニング(15)立体的に見える枠線
通常のborderだけでは線幅を太くすると平面的に見えてしまいます。
光と影を付けることによって立体的に見えるようになります。

新年会のお知らせ
日時:平成17年1月20日(木)
18時から21時
会場:アクロス福岡B2
フェスタガーデン
飲み放題と食事のみがあります。
連絡はsasaki@vlsasaki.net
まで
この情報はダミーです。


<center><div style="margin:0px 100px 0px 100px"><div style="border-width:1px;border-style:solid;border-color:black black black black"><div style="border-width:1px;border-style:solid;border-color:white green green white"><div style="border-width:8px;border-style:solid;border-color:green green green green"><div style="border-width:1px;border-style:solid;border-color:green white white green"><div style="border-width:1px;border-style:solid;border-color:black black black black"><div style="margin:1px"><marquee direction="up" height="100" width="200" scrollamount="1" style="font-size:11pt;color:#000000;text-align:center">新年会のお知らせ
日時:平成17年1月20日(木)
18時から21時
会場:アクロス福岡B2
フェスタガーデン
飲み放題と食事のみがあります。
連絡は<a href="mailto:sasaki@vlsasaki.net" target="_blank">sasaki@vlsasaki.net</a>
まで
</marquee>
</div></div></div></div></div></div></div></center>


枠線は5つのブロックからなっています。
[PR]
by vlsasaki2 | 2004-12-22 20:03 | CSSのトレーニング Top↑

CSSのトレーニング(14)本文中の流れる掲示板
久しぶりのCSSトレーニングです。
CSSの授業用テキストをまとめていますが、課題をいろいろ考えているうちにこんなのができました。
意外と使えそうです。(掲示板の情報はダミーです。)

画像は「とんとん工房」からお借りしています。右サイドバーのバナーをクリックするとジャンプできます。



新年会のお知らせ
日時:平成17年1月20日(木)18時から21時
会場:アクロス福岡B2
フェスタガーデン
飲み放題と食事のみがあります。
連絡はsasaki@vlsasaki.net
まで




<div style="background-image:url('http://pds.exblog.jp/pds/1/200412/21/70/cat02w.gif');
background-repeat:no-repeat;background-position:center top">
<center><marquee direction="UP" loop="0" scrollamount="1" scrollderai="200" height="80" width="150" style="text-align:center">
新年会のお知らせ
日時:平成17年1月20日(木)18時から21時
会場:アクロス福岡B2
フェスタガーデン
飲み放題と食事のみがあります。
連絡は<a href="mailto:sasaki@vlsasaki.net" target="_blank">sasaki@vlsasaki.net</a>
まで
</marquee>
</center>
</div>
【注意】2行目末のセミコロンと3行目先頭の間に改行を入れると無効となります。貼り付けた後は改行を削除してください。
[PR]
by vlsasaki2 | 2004-12-20 15:05 | CSSのトレーニング Top↑

カテゴリ変更
CSSのトレーニングを「HTMLとCSS編集」から「CSSのトレーニング」に独立させました。
今後も続けますので愛読のほどよろしくお願いします。
[PR]
by vlsasaki2 | 2004-10-04 14:40 | CSSのトレーニング Top↑

CSSのトレーニング(13)・本文中に画像を表示
本文中にマスコットの画像を表示したいと思います。
お気に入りのイラストやペットの写真で飾りましょう。

CSSのソースを見ると本文らしきブロックが2つあります。
DIV.POST
DIV.POST_BODY
いつものように赤線で囲って確認しましょう。
a0034054_2361236.gif

DIV.POSTが外側でDIV.POST_BODYが内側のブロックだということが分かりました。

左下にこのイラストを表示しましょう。(画像はとんとん工房より借用)
a0034054_2363440.gif

背景色を設定するのはbackgroundもしくはbackground-colorでした。
背景に画像を設定するのは、background-imageで次のように記述します。
background-image:url('画像のurlを記述');

背景画像の繰り返しを設定するのは、background-repeatで次のように記述します。
background-repeat:no-repeat; 繰り返しなし
background-repeat:repeat-x; 横方向に繰り返し
background-repeat:repeat-y; 縦方向に繰り返し

背景画像の位置を設定するのは、background-positionで次のように記述します。
background-position:left bottom; 左下端
background-position:center center; 上下左右の中央
background-position:10% 20%; 左端から10%、上端から20%の位置

図のように表示してみましょう。
a0034054_237253.gif


ソースを見てみる
[PR]
by vlsasaki2 | 2004-10-03 22:26 | CSSのトレーニング Top↑

CSSのトレーニング(12)・マーカー機能を作る
文章を部分的に強調したいことがあります。
Bタグで太字にしたり、FONTタグで大きくしたり色をつけたりいろいろありますが、マーカーで塗りつぶすような機能を追加しましょう。

実際に使ってみて意外と便利です。

このように行に設定する場合と、文字に設定する場合が考えられます。
あああああああああああああああああああああああああああああああああああああああああああああああああああ

あああああああああああああああああああああああああああああああああああああああああああああああああああ

ターゲットのセレクターですが、行の場合はPタグよりも既存の設定が何もないDIVタグにし、文字はSPANタグにしようと思います。

マーカーの機能というのは選択した行もしくは文字に背景色をつけるということですから、
DIV.k02 {
        background-color:#FFFF00;/*黄*/
        }

SPAN.k02 {
        background-color:#FFFF00;/*黄*/
        }

のように定義し、次のような使い方をするわけです。
<DIV class=k02>あああああああああああああああああああああああああああああああああああああああああああああああああああ</DIV>
ああああああああ<SPAN class=k02>あああああああ</SPAN>ああああああああああああああああああああああああああああああああああああ

このようにDIVタグでもSPANタグでも同じクラス名で使用する場合はCSSの記述でセレクターを省略し、
.k02 {
        background-color:#FFFF00;/*黄*/
        }

このように記述することができます。
そうするとDIVタグやSPANタグ以外にもPタグやBLOCKQUOTEタグで汎用的に利用することができます。

次の12色を設定しようと思いますが、赤と紫に関しては色が濃いので文字色を白にして白抜き文字にしたいと思います。
.k01 {
        background-color:#FF0000;/*赤*/
        color:#FFFFFF;
        }

文字色の設定とクラス名はそれぞれの好みで決めてください。

#FF0000;/*赤 k01*/
#FFFF00;/*黄 k02*/
#00FF00;/*黄緑 k03*/
#00FFFF;/*水色 k04*/
#FF0000;/*青 k05*/
#FF00FF;/*紫 k06*/
#FF8080;/*薄赤 k07*/
#FFFF80;/*薄黄 k08*/
#80FF80;/*薄黄緑 k09*/
#80FFFF;/*薄水色 k10*/
#8080FF;/*薄青 k11*/
#FF80FF;/*薄紫 k12*/

参照
CSSでマーカー(蛍光ペン)はいかが?
活用の例
id属性の意味

ソースを見てみる
[PR]
by vlsasaki2 | 2004-10-02 20:56 | CSSのトレーニング Top↑

CSSのトレーニング(11)・BLOCKQUOTE再定義のバリエーション
前回のトレーニングでBLOCKQUOTEを再定義することで飾りの枠囲いができました。
すごく便利なのですが、状況に応じてデザインを使い分けることはできないのでしょうか。
たとえば、催し物の案内にはカラフルな点線の枠囲いで、重要な書き込みの時は実線の枠囲いでというように使い分けができるととても便利です。
CSSの書式はセレクターと中カッコで囲われた宣言から成り立っています。
a0034054_16562317.gif

BLOCKQUOTEのバリエーションを作るには、
BLOCKQUOTE.a01{
        ・・・・・・・・
        ・・・・・・・・
        }

BLOCKQUOTE.a02{
        ・・・・・・・・
        ・・・・・・・・
        }

のように定義し呼び出す時は、
<BLOCKQUOTE class=a01>お知らせの場合</BLOCKQUOTE>

<BLOCKQUOTE class=a02>重要な書き込みの場合</BLOCKQUOTE>
のように記述します。

前回のカラフルなBLOCKQUOTEを次のように書き直してみましょう。
BLOCKQUOTE.a01
        エンジ色の点線でピンクの背景色を囲う(前回と同じ)
a0034054_1739743.gif

BLOCKQUOTE.a02
        枠線 黒の実線で1px
        背景色 薄い緑色(#F0FFF0)
        外余白 上下10px、左右20px
        内余白 10px
a0034054_17395525.gif
 

ソースを見てみる
[PR]
by vlsasaki2 | 2004-10-02 16:50 | CSSのトレーニング Top↑