研Q84.HTMLで描く色つきのアンダーラインを上下左右自由自在に設定する方法。

2013年05月18日｜ブログノウハウ｜コメント(6)｜トラックバック(3)｜Edit｜

たかがデザインのことですが、ビジネスブログでは目標達成に近づく道です。

Styleful / artful highlighter pens drawing on paper / COPICS / sharpie - 無料写真検索fotoq

photo by photosteve101

色つきのアンダーラインとはこの記事のサブタイトルの装飾に使っているオレンジの文字に青いアンダーラインが引いてある装飾のことです。

ブログ本文にアンダーラインを引く方法はいろいろありますが、この記事ではサブタイトルの装飾で使った方法をもう少し詳しく研Ｑしたいと思います。

この方法は過去記事に書いた
⇒ 研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）

の応用編です。

文章を<DIV>タグでブロック化して、ブロックの枠線を上下左右別々に色と太さを指定してあるだけのことです。

アンダーラインを設定する方法。

↑この見出しにもサブタイトルと似たようなアンダーラインを使ってあります。

見出しのHTMLタグは

<div style="border-left:8px solid darkorange; border-bottom:2px solid darkorange; padding:0px 0px 1px 5px;">アンダーラインを設定する方法。</div>

です。

style=パラメータで枠線の指定をしているわけですが、

border-left:で左の枠線を太さ8pxの実線、色はダークオレンジ。

border-bottom:で下の枠線を太さ2pxの実線、色はダークオレンジに設定してあります。

ついでに、ここでは設定してありませんが、
border-top:で上の枠線を、
border-right:で右の枠線を指定することもできます。

カッコイイ枠線の使い方の例。

普段ブログを拝見していて、たっくんがデザインされた枠線がカッコイイと思います。

たっくんのカッコイイデザイン枠

上と左、下と右の枠線の色を同系色で別な色にして、立体感を出しています。

そしてその色がブログ全体のデザインとマッチする色になっています。

さらに角丸と影（ドロップシャドー）をつけてカッコよくしてあるのですが、
IE8では角丸と影は見えないはずです。

CSS3/HTML5に対応しているIE9やFirefox、Google Chromeなどで見ると
角丸と影が反映されて見えます。

上にリンクしてあるのは、たっくんの過去記事で、
最新記事では別なシンプルなデザインをお使いになっているようです。

過去記事と最新記事でデザインが変わっているので、これはCSSで一律に設定してあるデザインではなくて、記事内にHTMLタグを記入して表現してあるデザインです。

こういうカッコいいデザインはマネさせていただいてもいいですよね。たっくん。

無断でマネしては悪いと思う場合は、記事のコメントに
「カッコイイからマネさせてください。」と書き込んで了解を得ればいいだけのことだと思います。

ただカッコイイだけとお思いになる方もいらっしゃるかもしれませんが、
カッコイイデザインで読者さんが読みやすくなれば、それだけ内容も伝わりやすくなります。

内容が伝われば、ビジネスブログではその分だけ目的達成に近づくはずです。