がっちゃんのProject-Q

ライン編

ライン(仕切り線)を入れたい  <hr>


<hr>だけで下のラインが表示されます。線の上下には自動的に改行が入ります。</hr>は必要ありません。
属性を付けないと太さは2ピクセル・長さは100%・位置はセンターになります。

それでは属性を付けてみましょう。まずはラインの太さを size="" で指定します。

<hr size="1">

<hr size="3">

<hr size="5">

<hr size="10">



サイズを大きくすると「溝」が現れますね。平面にしたいときは noshade で指定します。

<hr noshade size="1">

<hr noshade size="3">

<hr noshade size="5">

<hr noshade size="10">



次はラインに「色」を付けてみます。色は color="" で指定します。色見本は こちら。

<hr size="1" color="red">

<hr size="3" color="blue">

<hr size="5" color="lime">

<hr size="10" color="yellow">

色を指定すれば溝は無くなりますので、あえて noshade は必要ありません。<hr noshade size="10" color="yellow">



次はラインの「長さ」の指定です。長さは width="" で指定します。ピクセル・パーセントのどちらでも可能です。

<hr size="1" color="red" width="300">

<hr size="3" color="blue" width="400">

<hr size="5" color="lime" width="500">

<hr size="10" color="yellow" width="600">

<hr size="10" color="red" width="50%">

<hr size="50" color="blue" width="50">

<hr size="100" color="lime" width="5">



次はラインの「位置」の指定です。位置は align="" で指定します。
左寄せが align="left" 、右寄せが align="right" 、指定無しだとセンターです。

<hr size="1" color="red" width="300" align="left">

<hr size="3" color="blue" width="400" align="right">

<hr size="5" color="lime" width="500">






© Rakuten Group, Inc.
X
Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: