WEBのラインをCSSで指定する

  • 2011.07.26 16:54
  • Cat:web
HTMLでラインを引く時に


<hr>


って指定するとラインが引けます。

そのラインをCSSで指定できるんですね。

直接CSSをHTMLに入力しても使えます。


<hr style="border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px;">








HTML
<hr class="s001">



スタイルシート
hr.s001 { border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px; }

上記のように設定するんです。

s001の所の名前を替えて設定するといろいろな線を設定しておけるんですね。

border-styleの部分は、線の設定なので、下記に入れ替えると簡単に変わるんで使えますね。

solid
1本線で表示。

double
2本線で表示。

dashed
破線で表示。

dotted
点線で表示。


border-colorの部分は、線の色の指定です。

→ WEBの色見本 

何種類か用意しておくとWEB制作中にいろいろな場面で使えるんですね。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。