2009年7月22日水曜日

CSS スタイルボックス作成

※追記:さらに見やすく内部変更しました。(091008)
「スタイルボックス」という名の、ただの枠付の箱です。
どちらのサイトからインスパイアしたのかはさておき、「この文章は強調したい」という為に作成しました。

このようなモノになります。
両端にマージンを、ライン内にはパディングをそれぞれ5px与えています。
さらに、パッと見で分かりやすいように、行間を200%にしています。
「impact」というclass値で与えています。
ソースは以下の通り。
/* スタイルボックス作成 */
.impact{
 border-color:#BBB #BBB #BBB #c94093;
 border-style:solid;
 border-width:1px 1px 1px 3px;
 padding:5px;
 margin:0px 5px;
 line-height: 200%;
 background-color:#DDD;
}
ブログのソースを開いて見てみれば分かりますが、「http://holmes21.up.seesaa.net/css/inblo.css」が参照先ですので、外部からすぐ参照出来ます。 さらに、すぐに作成出来るようにブックマークレット化しました。 完全に自分用ですが。
javascript:window.clipboardData.setData('Text','<pre class="impact"></pre>');window.status='◆スタイルボックスをクリップボードへコピーしました。';void(0);

0 件のコメント:

コメントを投稿