==教えることは自分育て==

<   2007年 04月 ( 8 )   > この月の画像一覧
|TOPに戻る
P13 基本的な枠
ブロックレベル要素の<blockquote>に、少しずつスタイルを付け加えて行きます。

1)適当な文字列に、背景色#edffdfを付けます。paddingは15pxとります。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


2)周りに1px・緑の実線入れる。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


3)周りを5pxの点線に変える。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


4)周りを4pxの破線に変える。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


5)影付き枠(右・下3px)

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


6)10pxのridgeの枠

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

[PR]
by otomi7771 | 2007-04-23 23:00 | ├基本的な枠 |TOPに戻る
P13<応用1>小見出し用の枠
廃線になる宮地岳線


【解答1】インラインCSS
<div style="padding:3px;border:2px dotted #a02458;background-color:#fff0ff;width:120px;">廃線になる宮地岳線</div>

【解答2】内部CSS
内部CSS(CSS編集)に.waku2の名前でこのスタイルを保存。幅(width)は入れない。

<投稿画面>
<div class="waku2" style="width:120px;">廃線になる宮地岳線</div>

<CSS編集>
.waku2{
padding:3px;border:2px dotted #a02458;background-color:#fff0ff;
}

[PR]
by otomi7771 | 2007-04-23 22:41 | ├基本的な枠 |TOPに戻る
P13<応用2>marqueeにスタイルを付ける。
もうすぐGWですね。どちらにお出かけですか?


枠の幅を400pxとしました。<center></center>で中央寄せ。

【解答1】インラインCSS
<投稿画面>
<center><marquee style="padding:3px;border:1px dashed blue;background-color:#edf6ff;color:blue;width:400px;">もうすぐGWですね。どちらにお出かけですか?</marquee></center>

【解答2】内部CSS
 このスタイルを.waku3で内部CSSに保存。幅(width)は入れません。

<投稿画面>
<center><marquee class="waku3" style="width:400px;">もうすぐGWですね。どちらにお出かけですか?</marquee></center>

<CSS編集>
.waku3{
padding:3px;border:1px dashed blue;background-color:#edf6ff;color:blue;
}

[PR]
by otomi7771 | 2007-04-23 22:40 | ├基本的な枠 |TOPに戻る
<応用3>ポラロイド風写真


【解答1】インラインCSS

<投稿画面>
手順
まず写真を1枚UP。プレビューで見て、画像の上で右クリック→プロパティ→
写真のURLをコピー

テキスト通りにタグを打つ(写真とサインのURLは自分のものを貼り付け)
サインのURLは、テキストP6(2)カスタマイズで使う画像の置き場を参照されてください。

擬似タグを削除

<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" style="margin:5px;padding:5px 5px 30px 5px;border-top:1px solid #cccccc;border-right:1px solid #999999;border-bottom:1px solid #999999;border-left:1px solid #cccccc; background-color:#F6F6F6;background-image:url(http://pds.exblog.jp/pds/1/200703/25/41/sign.gif);background-repeat:no-repeat;background-position:95% bottom;">

これを毎回インラインに書き込むのは、大変ですね。
そこで、

【解答2】内部CSS
 このスタイルをimg.waku4と内部CSSに名前を付けて保存。

<CSS編集>
img.waku4{margin:5px;padding:5px 5px 30px 5px;border-top:1px solid #cccccc;border-right:1px solid #999999;border-bottom:1px solid #999999;border-left:1px solid #cccccc;background-color:#F6F6F6;background-image:url(http://pds.exblog.jp/pds/1/200703/25/41/sign.gif);background-repeat:no-repeat;background-position:95% bottom;}

<投稿画面>

投稿画面で、class=waku4と名前を呼び出して、スタイルを適用します。
たったこれだけでいいのですよ。簡単ですね。

<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" class=waku4>
[PR]
by otomi7771 | 2007-04-23 22:03 | ├ポラロイド風写真 |TOPに戻る
b0063421_1153778.jpg
草野町の椿

[PR]
by otomi7771 | 2007-04-23 11:53 |TOPに戻る
p14.応用4 擬似タグのまわりに枠をつける
b0063421_352223.jpg
岩根椿
草野町椿ウォーキング




このスタイルでしたら、内部CSSに保存して読み出せますよ~。



自分独自の枠を作って、保存しましょう。
[PR]
by otomi7771 | 2007-04-12 23:56 | ├基本的な枠 |TOPに戻る
色見本・・・カラースライダー
色を決めるのに、とても便利なサイトがありますので、ご紹介します。
Web頁を作る時にご利用ください。

Color Slider

講座で手軽に使えるように、主な色をRGBで列挙します。

うすい黄色    #ffffdb
うすい水色    #edf6ff
うすい緑色    #edffdf
うすいピンク色  #fff0f5
アイボリー     #f5f5e5
うすい抹茶色   #e8f7d8
白緑色       #eafaea
藍白        #e5effa
うすい桃色    #ffe0ef
ほぼ白色     #f8f8f8
ほぼ黒色     #444444
黒色        #000000
えんじ色      #8b3a3a
こげ茶色      #654e42
にび色       #685c3b
オリーブグリーン #5c683b
青色         #0033CC
赤色         #CC0000
黄色         #FFFF00
緑色         #009933

[PR]
by otomi7771 | 2007-04-05 00:14 | ├色見本 |TOPに戻る
P20下.付箋のようなタイトル
次のような形にしました。
b0063421_2121926.jpg

DIV.POST_HEAD{
border-left:15px solid green;
background-color:#ffffdb;
padding:5px 0px 5px 10px;
} を追加しました。

[PR]
by otomi7771 | 2007-04-04 20:33 | ├記事タイトルの変更 |TOPに戻る