【水平線・ライン】

スポンサーリンク



線を引く

記事を書いていて、内容と内容の区切りなどに

線を用いてみましょう。

ページに線を引くときは<hr>というタグを使います。

改行させるときに使う<br>と同じで、終了タグはありません

HTMLソースの<body>内で線を表示させたいところに<hr>と書くだけです。

すると、こんな線が引けます↓


これはとっても簡単ですよね。

 

 


線の長さを変える

では、さらにパワーアップして線の長さを変えてみましょう。

何も指定していないと、横幅いっぱいの線になるのですが、

<hr width=”数字”>

というように、<hr の後にwidth属性を入れることで、長さを変えられるようになります。

「数字」部分には、半角数字で長さ(ピクセル)を指定、
または1~100%で長さを指定します。

ピクセルで指定した場合、ブラウザの大きさによらず指定した長さの線が表示されますが、%で指定した場合は、ブラウザの横幅に対して指定した%になるように表示されます。

パソコンでもケータイでも見やすいページにしたいのであれば、%で指定することをおすすめします。

実際にやってみましょう。こんな感じです↓

【ピクセルで指定】

<hr width=”100″>
<hr width=”200″>
<hr width=”300″>

表示させると↓







【%で指定】

<hr width=”30%”>
<hr width=”50%”>
<hr width=”80%”>

表示させると↓




いろいろ出来ますね。

ここで、

この線、真ん中にどーんと現れているのですが、

端に寄せたい!なんて思いませんか?

そんな時は、align属性を使いましょう。

<hr align=”位置” width=”長さ”>

このように、width属性と一緒に<hr>タグに入れます。

位置は、
・左寄せ : left
・中央  : center
・右寄せ : right

で指定します。

それでは、先ほどのタグを左寄せ指定してみましょう。

<hr align=”left” width=”30%”>
<hr align=”left” width=”50%”>
<hr align=”left”width=”80%”>

表示させると↓




ピタッと、左に寄りました!

align=”位置” での位置の指定は、線以外でも

位置の指定に使うことがあるので覚えておくと便利です。

次は、線の太さを変えてみましょう。

線の太さを変える

次は、線の太さを変えてみましょう!

線の太さを変えるにはsize属性を使います。

長さを変えたときのように…

<hr size=”20″>

このようなタグにします。

%での指定はありません。数字(半角)のみで指定してください。

実際にやってみると↓

<hr  size=”5″>
<hr  size=”10″>
<hr  size=”100″>

表示させると↓

太さ5の線


太さ10の線


太さ100の線


太すぎると、もう線には見えませんね。

また、このままでは色が無いのでわかりにくいですね。

では、線に色を付けてみましょう。

線に色を付ける

色の付け方は、というと。

ここまで来れば予想がつくかと思います。

<hr color=”カラーコード”>

このようにcolor属性で指定可能です。

カラーネームでも指定可能です。

<hr  color=”#00ffff”>
<hr  color=”#00ff00″>
<hr  color=”#ff00ff”>

表示させると↓




カラフルな線ができました。

では、太さを変えてみましょう。

<hr  color=”#00ffff” size=”5″>
<hr  color=”#00ff00″ size=”10″>
<hr  color=”#ff00ff” size=”30″>

表示させると↓




色と太さを変えるだけでも、違う印象の線が作成できます。

これだけでも、なかなかデザインのアレンジが効くので、

ご自身のサイトの雰囲気に合わせて、作成してみてください。




スポンサーリンク
関連コンテンツ広告



Translate »