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

カテゴリ:├基本的な枠( 4 )
|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に戻る
p14.応用4 擬似タグのまわりに枠をつける
b0063421_352223.jpg
岩根椿
草野町椿ウォーキング




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



自分独自の枠を作って、保存しましょう。
[PR]
by otomi7771 | 2007-04-12 23:56 | ├基本的な枠 |TOPに戻る