研Q109.アンダーライン色々。二重下線にしたり、色や太さを変更して遊んでみた。

アンダーラインの本数、色、線種、太さなどを自由に変更する方法を研Qした。

photo by Dawn Endico

HTMLでアンダーラインを引くには、<u>アンダーライン</u>というタグコードを使うのがごく普通の方法だと思いす。

アンダーライン


当ブログでは文字を四角い枠で囲む方法を以前研Qしたことがあります。

<span style="border-style: solid; border-width: 1px;padding: 0px 0px 0px 0px;">囲み文字</span>
　　　↓
囲み文字

⇒ 研Ｑ69.ブログの文字をHTMLで四角く囲む方法。

この枠囲いは、上・右・下・左を別々に設定することができるので、文字の下だけを囲うとアンダーラインになります。

<span style="border-bottom: solid; border-width: 1px;padding-bottom: 0px;">囲み文字でアンダーラインを引く</span>
　　　　↓
囲み文字でアンダーラインを引く

この囲み枠の線は、線の種類や、太さ・色や、文字と線との間隔が設定できることをいっしょに研Qしました。


ではアンダーラインを赤い二重線にしてみます。

<span style="border-bottom: double; border-width: 4px;padding-bottom: 0px;border-color: red;">囲み文字で赤い二重線を引く</span>
　　　　　　　↓
囲み文字で赤い二重線を引く

今度は、線の太さを8pxにして太い二重線にしてみます。

<span style="border-bottom: double; border-width: 8px;padding-bottom: 0px;border-color: red;">太い二重線のアンダーラインを引く</span>
　　　　　↓
太い二重線のアンダーラインを引く


細い二本線の間隔が広がるのではなくて、線の太さも太くなるようです。

二重線の太さと間隔を自由に設定するには、2本の線を別々に引けばできそうです。

<span style="border-bottom: solid; border-width: 2px;padding-bottom: 0px;border-color: red;">一本目のアンダーライン</span>
　　　　　　　と
<span style="border-bottom: solid; border-width: 2px;padding-bottom: 0px;border-color: red;">二本目のアンダーライン</span>

一本目のアンダーライン　と　二本目のアンダーライン

このふたつのアンダーラインのコードを入れ子にして合体させれば、

<span style="border-bottom: solid; border-width: 2px;padding-bottom: 0px;border-color: red;"><pan style="border-bottom: solid; border-width: 2px;padding-bottom: 4px;border-color: red;">二本のアンダーラインを組み合わせ</span></span>
　　　　↓
二本のアンダーラインを組み合わせ


これなら二本が別々に設定できますね。

二本のアンダーラインを別な色で


三本のアンダーラインの線種も変えて

もうこれは完全にお遊びですね。
どう活用できるかなんて想像もできませんが、あなたならば上手い使い道が見つかるかもしれません。



関連記事：（別窓で開きます）
研Ｑ69.ブログの文字をHTMLで四角く囲む方法。
研Q88.HTMLの取り消し線の色を変える方法または二重取消線にする方法
研Q6.ブログ記事に見出しをつけて読者にもクローラーにも読みやすくする。

にほんブログ村

表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)