https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

水平線に背景色や画像を指定する

hr{color:色;}で水平線の全体の色を指定することが出来ます。また、
hr{background-color:色;}で水平線の内側の色を指定することが出来ます。

【ブラウザ表示】





ソース

<hr class="sample1">
<hr class="sample2">

外部ファイル

hr.sample1{color:green;}
hr.sample2{
height:5px;
background-color:yellow;
}


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

<hr style="color:green;">
<hr style="height:5px; background-color:yellow;">

■ 水平線に背景画像を指定する

hr{background-image:url(画像);}で水平線に背景画像を指定することが出来ます。 背景画像の細かな表示方法はボックスの 背景画像の表示方法を指定するの項目を参照して下さい。

【ブラウザ表示】




ソース

<hr class="sample3">

外部ファイル

hr.sample3{
height:8px;
background-image:url(../image/ichigo.gif);
}


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

<hr style="height:8px; background-image:url(../image/ichigo.gif);">

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

■ その他の項目

水平線の横幅、高さを指定する
枠線の太さ、種類、色を指定する
水平線の表示位置を指定する
水平線の外側の余白を指定する

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