ホーム >>> HTML整理ノート

borderの適用要素

いろいろなHTML要素にborderスタイルを設定してみました。
Sample

これはPタグです

これはDIVタグです。この中のテキストの一部にSPANタグEMタグとbタグを入れ、borderスタイルを設定した。
  1. 番号付きリスト(borderスタイルあり)
  2. 番号付きリスト(borderスタイルなし)
定義付きリスト 1
borderスタイルなし
定義付きリスト 2
borderスタイルあり
abcde efjhi jklmn
123 456 789
                 
これは<MARQUEE>タグだ〜ヨ

(水平線にborderスタイルを設定)

・このページのbodyタグと上部タイトル内の「CSS」画像にborderスタイルを設定(bodyタグには”dotted”を指定したが、実線になってしまっている??)
・borderスタイルはブロック要素に適用でき、インライン要素には適用できないはずだが。上の例のように、<SPAN><EM><B>タグに使える??
・表では、<table>,<td>には適用できるが<tr>には無効
・フォーム関連では<form>,text,checkbox,radio,bottonには有効、selectは無効

Sample Source......................................................................>>>

<body style="border:4px dotted #ff3300">
<img src="../images/logo_css.gif" style="border:1mm dashed #ccff33">

<p class="sample" style="border:1px solid navy;width:300px">これはPタグです</p>
<div style="border:1px solid navy;width:450px">これはDIVタグです。この中のテキストの一部に
    <span style="border:1px solid red">SPANタグ</span>と
    <b style="border:1px solid red">EMタグとbタグ</b>を入れ、
    <em style="border:1px solid red">borderスタイルを設定</em>した。</div>
<ol style="border:1px solid navy;width:300px">
  <li style="border:1px solid red">番号付きリスト(borderスタイルあり)
  <li>番号付きリスト(borderスタイルなし)
</ol>
<dl style="border:1px solid navy;width:300px">
  <dt>定義付きリスト 1
  <dd>borderスタイルなし
  <dt style="border:1px solid red">定義付きリスト 2
  <dd style="border:1px solid green">borderスタイルあり
</dl>

<table style="border:thin solid blue" border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td>abcde</td>
    <td style="border:thin solid red">efjhi</td>
    <td>jklmn</td>
  </tr>
  <tr style="border:thin solid red">
    <td>123</td>
    <td>456</td>
    <td>789</td>
  </tr>
</table>

<form style="border:thin dotted red">
 <input style="border:thin solid blue" type="button" value="ボタン" name="B2">
  <input style="border:thin solid blue" type="text" size="15" value="Textボックス"> 
 <input type="checkbox" name="C1" value="ON">
 <input style="border:thin solid blue" type="checkbox" name="C2" value="ON">
 <input type="checkbox" name="C3" value="ON"> 
 <input style="border:thin solid blue" type="radio" value="V1" checked name="R1">
 <input type="radio" name="R1" value="V2">    
<select style="border:thin solid blue" name="D1" size="1">
  <option style="border:thin solid blue" selected>オプション1 </option>
  <option>オプション2 </option>
  <option>オプション3 </option>
  <option>オプション4 </option>
</select> 
 <input style="border:thin solid blue" type="reset" value="リセット" name="B2">
</form>

<marquee style="border:thin solid pink">これは&lt;MARQUEE&gt;タグだ〜ヨ</marquee>
<hr style="border:2px dashed green;width:400px;height:3mm;color:#99ffff">