ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >水平線

枠線の太さ、種類、色を指定する

{border:太さ 線の種類 線の色;} で水平線の太さ 線の種類 線の色 を指定することができます。

■ 枠線の種類

線の種類は以下の通りです。

線の種類 説明
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線

【ブラウザ表示】










ソース

<hr class="wakusen1">
<hr class="wakusen2">
<hr class="wakusen3">
<hr class="wakusen4">
<hr class="wakusen5">
<hr class="wakusen6">
<hr class="wakusen7">
<hr class="wakusen8">

外部ファイル

hr.wakusen1{border:4px solid green; height:20px;}
hr.wakusen2{border:4px double silver; height:20px;}
hr.wakusen3{border:4px ridge red; height:20px;}
hr.wakusen4{border:4px groove blue; height:20px;}
hr.wakusen5{border:4px dotted navy; height:20px;}
hr.wakusen6{border:4px dashed purple; height:20px;}
hr.wakusen7{border:4px inset lime; height:20px;}
hr.wakusen8{border:4px outset maroon; height:20px;}


<body>〜</body>に直接記入する場合

<hr style="border:4px solid green; height:20px;">
<hr style="border:4px double silver; height:20px;">
<hr style="border:4px ridge red; height:20px;">
<hr style="border:4px groove blue; height:20px;">
<hr style="border:4px dotted navy; height:20px;">
<hr style="border:4px dashed purple; height:20px;">
<hr style="border:4px inset lime; height:20px;">
<hr style="border:4px outset maroon; height:20px;">

■ その他の項目

水平線の横幅、高さを指定する
背景色や画像を指定する
水平線の表示位置を指定する
水平線の外側の余白を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.