https://hmaster.net/


HTMLタグと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;">

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

■ その他の項目

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

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