研Q109.アンダーライン色々。二重下線にしたり、色や太さを変更して遊んでみた。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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

Desert Dandelion - 無料写真検索fotoq
photo by Dawn Endico

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

アンダーライン


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

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

研Q69.ブログの文字を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>
    
二本のアンダーラインを組み合わせ


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

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


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

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



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


 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/109-33756875

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

photo by Dawn Endico アンダーラインの本数、色、線種、太さなどを自由に変更する方法を研Qした。 photo by Dawn EndicoHTMLでアンダーラインを引くには、&lt;u&gt;アンダーライン&lt;/u&gt;というタグ

2013-07-28 01:33 | from あんなこと、そんなこと、どうでもいいこと・・・

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。