Weeblyホーム > Web素材の無料ダウンロード > 水平線
水平線を配置する
コードをコピペして貼り付けることで、自分好みの水平線やボタンをページ上に配置することができます。
コピーしたコードを、お好きな場所に貼り付ける方法は、下記ボタンをクリックしたページでご紹介しています。
コピーしたコードを、お好きな場所に貼り付ける方法は、下記ボタンをクリックしたページでご紹介しています。
カスタマイズ方法
下記の赤い数字やコードの部分を変更すると、自分の好みの水平線に簡単に変更することができます。
<hr style="height:5px; width:90%;color: #ccc; background-color:#ccc;"/>
5px
90%
#ccc
|
線の太さを指定します。1pxはもっとも細く、数字が大きくなるにつれて太くなります。
線の長さを指定します。表示できるページ全体の幅を100%として、数字を減らすごとに短くなります。
カラーコードです。好きな色のカラーコードを指定すると、その色の線になります。カラーコードはこちらからお選びください。
|
太い線サンプル
水平線サンプル
|
(ここから)<hr style="height:5px; width:90%;color: #ccc; background-color:#ccc;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから)<hr style="height:5px; width:90%;color:#819FF7; background-color:#819FF7;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから) <hr style="height:5px; width:90%;color:#2E2EFE;background-color:#2E2EFE;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから)<hr style="height:5px; width:90%;color:#FE2E64;background-color:#FE2E64;"/> (ここまでをコピペ)
|
細い線サンプル
水平線サンプル
|
(ここから) <hr style="height:1px; width:90%;color:#000; background-color:#000;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから) <hr style="height:1px; width:90%;color:#FF0000; background-color:#FF0000;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから) <hr style="height:1px; width:90%;color:#819FF7; background-color:#819FF7;"/> (ここまでをコピペ)
|
水平線サンプル
|
(ここから)<hr style="height:1px; width:90%;color:#F7819F;background-color:#F7819F;"/> (ここまでをコピペ)
|