区切り「hr要素」1件のフィードバック区切りを入れます。<区切り>もう一度区切りを入れます。文章を分けるためなどに区切りを入れることがあるでしょう。HTMLで区切りを入れるためには「hr要素」を使います。<hr>と書けば区切りをしてくれます。簡単ですね!この「hr要素」は、「br要素」と同じで、終了タグがありません。<hr>だけで一つの要素になります。/>といった書き方もあります。この要素を使う上で一つ気をつけなくてはいけない点は、「p要素」の中では使用できないということです。「区切り」なのですから、せめて段落はわかれていないとおかしな文章になってしまいますよね。この「hr要素」は通常「p要素」と「p要素」の間など段落の区切りに使います。ruleの略で、水平な罫線といった意味があります。「div要素」や「span要素」と同じく、「hr要素」にはブラウザ上の表示を変える「style属性」があります。この「style属性」はその要素内だけで有効になる「スタイルシート」というものを指定します。スタイルシートの詳細についてはまたの機会に説明します。ここでは線の太さ、形、色を変える方法を簡単に説明します。線の太さ、形、色を変える、border-topプロパティでは、「hr要素」を使って線の形と色を変える方法を説明します。線の太さを1ピクセル、形を実線、色を赤に変えてみましょう。red;">と記述します。実際にこのように記載した「hr要素」を使うとこのような表示になります。最初のborder:0;はいったい何をしているのかというと、「hr要素」の線を消しています。消す必要があるのかというと、ブラウザごとに「hr要素」の線の表示が異なっているからです。することで、どのブラウザでも同じような境界線を引くことができるようになります。red;で太さ、形、色を指定しています。border-top:に続く1pxで、線の太さを1ピクセルにしなさいと指定しています。その他にもいろいろな指定方法がありますが、ピクセル単位での指定方法、もしくは「thin」「medium」「thick」(それぞれ薄い、中間、厚い)といった指定の仕方もあります。実際に、上からthin、medium、thickを指定した例を赤線で表示します。つぎのsolidでは、実線を引きなさいと指定しています。このsolidの部分を変えることで、線の形、線の引き方を変えることができます。この線の形には以下の種類があります。none線を引きません。hiddennoneと同じく線を引きません。dotted点線を引きます。dashed破線を引きます。solid実線を引きます。double二重線を引きます。grooveくぼみのような線を引きますridgegrooveと逆のような線を引きます。inset箱をはめ込んだような線を引きます。outsetinsetと逆のような線を引きます。言葉だけではわかりにくいので、線の太さをthick、色を赤に指定した線をそれぞれ表示します・none・hidden・dotted・dashed・solid・double・groove・ridge・inset・outset今回はinsetとoutsetの違いがわかりにくいかもしれませんが、この線の引き方は区切りをする「hr要素」の用途には向いていないので、あまり気にしないでください。最後の#FF0000、redで色を赤に指定しています。この部分を#00FF00、greenにすると緑、#0000FF、blueにすると青になります。色の指定の仕方は、「div要素」の説明で詳しく説明しているのでそちらをご覧ください。背景色を変える、background-colorプロパティ「div要素」と「span要素」で説明した背景色を変える、background-colorプロパティが「hr要素」にもあります。線に背景色なんてないのでは?と思うかもしれませんが、実はあります。点線の線がない部分が背景色になります。style="background-color:red;">と記述します。サンプル今回説明した、「hr要素」を使用したサンプルを用意します。このサンプルソースはbody要素内(<body>~</body>)に書いてください。style="background-color:silver;">1ピクセルの実線を青色で引いて区切りをします。blue;">細い破線を青色で引き、背景色を赤にして区切りをします。blue;background-color:red;">太い点線を白色で引き、背景色を黒にして区切りをします。white;background-color:black;">15ピクセルの二重線を赤色で引き、背景色を緑にして区切りをします。red;background-color:green;">普通の太さの実線を透明色で引き、背景色を黒にして区切りをします。transparent;background-color:black;"></div>表示結果1ピクセルの実線を青色で引いて区切りをします。細い破線を青色で引き、背景色を赤にして区切りをします。太い点線を白色で引き、背景色を黒にして区切りをします。15ピクセルの二重線を赤色で引き、背景色を緑にして区切りをします。普通の太さの実線を透明色で引き、背景色を黒にして区切りをします。「hr要素」のまとめと次回記事について今回説明した「hr要素」はいかがでしたでしょうか。「hr要素」は区切りという意味で、線はあくまでオマケなのですが、使い方次第ではきれいな区切りができると思いませんか?次回は、画像を表示する「img要素」の説明をします。以上、当サイト管理人のAsterismでした。コメントをキャンセルメールアドレスが公開されることはありません。