MAJIDEKA.COM－線

● ３時限目 ●



[レイアウト] or [★ HTML講座 ★] or [リンク]

[線]

　横線を引くには

　縦線を引くには

・<hr>タグを使用して横線を引く方法

　横線を引くには、<hr>タグを使用します。
　色を変更するにはcolor属性を指定します。
　長さを変更するにはwidth属性を指定します。
　太さを変更するにはsize属性を指定します。
　位置を変更するにはalign属性を指定します。
　その他にも影の具合を調節できたりします。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<hr> <hr color="#008000"> <hr width="250"> <hr width="250" size="5"> <hr width="250" align="center"> <hr width="250" size="5" align="right" noshade>
　ブラウザにはこのように表示されます。

縦線を引くには

・<div>タグにstyle属性を指定する方法(<div style="～"></div>)

　縦線を引くには、<div>タグにstyle属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div style="background-color: #ff9900; width: 2px; height: 250px;"></div>
　ブラウザにはこのように表示されます。

文字などを枠線で囲むには

・<div>タグにstyle属性のborder: n;を指定する方法(<div style="border: npx;"></div>)

　文字などを枠線で囲むには、<div>タグにstyle属性のborderを指定します。
　border: npx;のnには数字を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div style="border: 1px solid #c0c0c0; padding: 5px;">MAJIDEKA.COM</div>
　ブラウザにはこのように表示されます。

線種を変更するには

・<hr>タグにstyle属性のborderを指定する方法(<hr style="border: ～;">)

　線種を変更するには、<hr>タグにstyle属性のborderを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<hr style="border: dotted #ff0000;"> <hr style="border: dashed #0000ff;">
　ブラウザにはこのように表示されます。

▲ページトップへ

枠線の線種を変更するには

・<font>タグにstyle属性のborderを指定する方法(<font style="border: ～;"></font>)

　枠線の線種を変更するには、<font>タグにstyle属性のborderを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="border: solid #ff0000;">MAJIDEKA</font><br><br> <font style="border: dotted #000000;">MAJIDEKA</font><br><br> <font style="border: dotted #008000; thin">MAJIDEKA</font><br><br> <font style="border: dotted #000080; length">MAJIDEKA</font><br><br> <font style="border: dashed #0000ff;">MAJIDEKA</font><br><br> <font style="border: double #800000;">MAJIDEKA</font><br><br> <font style="border: groove #00ff00;">MAJIDEKA</font><br><br> <font style="border: ridge #00ffff;">MAJIDEKA</font><br><br> <font style="border: inset #ffff00;">MAJIDEKA</font><br><br> <font style="border: outset #ff00ff;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

画像の線種を変更するには

・<img>タグにstyle属性にborderを指定する方法(<img src="xxx.gif" style="border: ～;">)

　画像の線種を変更するには、スタイルシートを使用します。
　img src="xxx.gif"の""内には画像のURLを記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<img src="xxx.gif" style="border: dashed #0000ff;">
　ブラウザにはこのように表示されます。

ボタン枠の線種を変更するには

・<input>タグにtype属性にbuttonを指定しstyle属性にborderを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<input type="button" style="border: ～;">)

　ボタン枠の線種を変更するには、<input>タグにstyle属性にborderを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="Click" style="border: solid #ff0000;"><br><br> <input type="button" value="Click" style="border: dotted #000000;"><br><br> <input type="button" value="Click" style="border: dotted #008000 thin;"><br><br> <input type="button" value="Click" style="border: dotted #000080 length;"><br><br> <input type="button" value="Click" style="border: dashed #0000ff;"><br><br> <input type="button" value="Click" style="border: double #800000;"><br><br> <input type="button" value="Click" style="border: groove #00ff00;"><br><br> <input type="button" value="Click" style="border: ridge #00ffff;"><br><br> <input type="button" value="Click" style="border: inset #ffff00;"><br><br> <input type="button" value="Click" style="border: outset #ff00ff;"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.