こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。
この記事では、 HTMLで水平の横線を引くhr要素について
- hr要素とは
- hr要素を使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows10 |
|---|
hr要素とは
hr要素とは、水平の横線を引くことができる要素です。
「hr」とは「horizontal rule」の略で、和訳すると「横罫線」という意味です。
hr要素は、話の区切りなどで使われます。
hr要素を使うと
というように横線を引くことができます。
書き方は
|
1 2 3 |
<p>テスト1</p> <hr> <p>テスト2</p> |
と横線を引きたい場所にhr要素を使って表します。
hr要素には非推奨となっている属性が5つあります。
| 非推奨属性名 | 説明 | 書き方例 | ||
|---|---|---|---|---|
| align | 表示位置を指定
を指定できた |
|
||
| color | 線の色を指定 |
|
||
| size | 線の太さをピクセルで指定 |
|
||
| width | 線の長さをピクセルまたはパーセンテージで指定 |
|
||
| noshade | 立体的な影を付けない線をつけるか？を指定 |
|
これら5属性は使わないようにご注意ください。
では、次の章で実際に使ってみます。
hr要素を解説するプログラムの概要
hr要素を解説するプログラムでは、HTMLファイル内でp要素とp要素の間にhr要素で横線を引いて表示を確認します。
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hr要素サンプル</title> </head> <body> <hr> <p>おはようございます</p> <hr> <p>おやすみなさい</p> <hr> </body> </html> |
実行結果
作成したHTMLをブラウザで開きます。
指定した位置で横線が引かれていることが確認できました。
まとめ：hr要素を使ってみよう！
以上がHTMLのhr要素についての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント