2009年7月22日水曜日

CSS スタイルボックス作成

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

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

0 件のコメント:

コメントを投稿