ブログ活用のヒントを満載
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 31

blockquoteの使い方
blockquoteの使い方で、ブログの世界(福岡情報)さんにこんな使い方ができることを教えてもらいました。

CSSタグをstyle 属性の属性値としてインライン記述することができるということでした。
この記述方法は大規模なWebページでは好ましくないものの、ブログの規模ならむしろ簡便な方法だろうと思われます。
インライン記述のメリットはあらかじめ登録することなく必要に応じて自由に設定できることです。

背景色をつけるだけなら、background-color属性で
<blockquote style="background-color:#e1f6dd;">背景色をつける</blockquote>

背景色の上下左右に余白をつけたいなら、padding属性で
<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;">背景色の上下左右に余白をつける</blockquote>

背景色の周りに線をつけたいなら、border属性で
<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:1px solid #629666;">背景色の周りに線をつける</blockquote>

周りの線を丸点線の太線にするなら、dotted属性値で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:5px dotted #629666;">周りの線を丸点線の太線にする</blockquote>


周りの線を角点線の太線にするなら、dashed属性値で
<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:4px dashed #629666;">周りの線を角点線の太線にする</blockquote>

周りの線を影付き風にするなら、border-top,right,bottom,left属性で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border-top:1px solid #629666;border-left:1px solid #629666;border-right:3px solid #629666;border-bottom:3px solid #629666;">周りの線を影付き風にする</blockquote>



追記
この記事を書き終えて一段落したころにカリフォルニアのはい こちらサポセン。の大先生からアドバイスをもらいました。
blockquoteタグを使うならあえてpタグは使わなくてもいいそうです。
<p>~~</p>が無くなってすっきりしました。
ありがとうございました。
[PR]
by vlsasaki2 | 2004-09-12 13:56 | HTMLとCSS編集 Top↑
<< 流れる文章 文章の後のw >>