アメブロにCSSを使って文章を囲み枠で囲む:01

簡単なコードを使うだけで囲み枠を設置しちゃう♫

こんにちワ。

文章などを囲む時に、HTMLコードだけを使って書くと、こんな感じになります（↓）。

<div style="border:1px solid #ffd700;padding:6px;background-color:#ffffff;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;box-shadow: 2px 2px 3px #aaaaaa;margin:5px;">～文章、文章、文章～
～文章、文章～
～文章～</div>

↓

～文章、文章、文章～
～文章、文章～
～文章～

ところが、スタイルシート（CSS）を使うと編集面（エディタ）では、以下のコードを書くだけで済んじゃいます。

<div class="abc01">～文章、文章、文章～
～文章、文章～
～文章～</div>

↓

～文章、文章、文章～
～文章、文章～
～文章～

このCSSを使って楽する！？方法を、もう少し詳しく書いてみたいと思います^^;

CSSを使って文章を囲み枠で囲む方法

最初にスタイルシート（CSS）の末尾に以下のコードを記述して下さい。

/*囲み枠abc01　01/28*/
.abc01 {
padding: 6px;
margin: 3px;
background: #ffffff;
border: 1px #ffd700 solid;
border-radius:5px;
box-shadow:2px 2px 3px #aaaaaa;
-moz-box-shadow:2px 2px 3px #aaaaaa;
-webkit-box-shadow:2px 2px 3px #aaaaaa;
}

上のコードの赤字の箇所のabc01がクラスセレクタと呼ばれているもので、御自身のお好みのものを半角英数字で決めて下さい。

上のコードをCSSに記述しておけば、上でも書きましたが、囲みたい文章を以下のタグで囲むだけで済んじゃいます。

<div class="abc01">～文章、文章、文章～
～文章、文章～
～文章～</div>

この原理さえ解っていれば、囲み枠だけでなく、「見出し」や「アンダーライン」など、色々なものに応用が効くと思います。

こちらに、CSSを使った各種の囲み枠のコードを案内してくれてるサイト様がありました。
⇨CSSデザイン枠テンプレート（コピペで使えます！） | WPnavi

◯思うこと
記事タイトルに「アメブロに・・」って書きましたが、この事はCSSの使えるWebサイトに共通する事だと思います。
このCSSを上手く使いこなせるようになると、ブログ記事を書くのが楽に、そして、より楽しくなるのでは！！と思います。

☆ブィブィ  ('-^*)/