CSS(スタイルシート)を使って1本だけ線を引く方法

文章や話題の区切りを示す目的とか、何らかのデザインなどでウェブページ内に「1本だけ線を引きたい」と思うことがあります。細い1本の横線を。スタイルシートを使えば、太さ1ピクセルの線を1本だけ横方向に引くのも簡単です。方法としては「ボックスの枠線を活用する」方法と「hr要素を装飾する」方法があります。(どちらの場合も、線を引くために指定する内容はほぼ同じですが。)

そこで、ウェブページ内に1本だけ横線を引くスタイルシートの書き方として、以下に2つの方法をそれぞれ解説してみます。

• 方法1. ボックスの枠線として「1本線」を引くCSSの書き方
• 方法2. 区切りを示す目的としてhr要素を使う書き方

デザインとして単に横線を引きたい場合やHTMLソース側に手を加えたくない場合には「方法1」を、何らかの区切りとしての意味がある線を引く場合には「方法2」を選択すると良いのではないかと思います。しかし、どちらにせよ「横線が引ける」点は同じです。

方法1. ボックスの枠線として「1本線」を引くCSSの書き方

1本線を引きたい場所が何らかのボックスの上や下であれば、border-topプロパティ(上側の枠線)やborder-bottomプロパティ(下側の枠線)を使って「ボックスの枠線」の形で1本の線を引くのが楽でしょう。

例えば、以下のようなHTMLがあるとき……

<p class="box"> ほげほげ </p>

このp要素で作られたボックス(段落)の下に1本だけ線を引くには、次のようにCSSソースを記述するだけです。

p.box {
   border-bottom: 1px solid red;
}

これで、このボックスの下部に、太さ1ピクセル(1px)の細い実線(solid)が赤色(red)で表示されます。実際に表示させると、以下のような感じで見えます。

点線を1本引きたいなら、先程のCSSソースで値solidの代わりにdottedを指定します。すると、以下のように見えます。

破線を引きたいならdashedです。

こんな感じで「ボックスの枠線」を部分的に引けば、簡単に横線が引けます。
※もちろん縦線も引けますが。その場合は、ボックスの左側に線を引くborder-leftプロパティや、右側に線を引くborder-rightプロパティを使います。

点線や破線はもっと太くすると違いが分かりやすい

一部のブラウザ(IEなど)で見ると「点線(dotted)」と「破線(dashed)」では違いが分かりにくいかも知れません。その場合でも線の太さをもっと太くすると違いが分かります。例えば下記では、上側に太さ9pxの点線を、下側に太さ5pxの破線を引いています。

点線の場合は、太さを大きくすると「点線」というよりも「水玉」っぽいデザインに見えるかも知れません。紹介するまでもないかも知れませんが、上記のCSSソースは以下の通りです。

p.box {
   border-top: 9px dotted #f45e5e;    /* 上側の1本線 */
   border-bottom: 5px dashed #ffa500; /* 下側の1本線 */
}

好みに応じて、いろいろ試してみて下さい。

直近の文字と1本線との間隔(距離)を調節したい場合

内容と1本線の距離を調節したい場合は、paddingプロパティを使います。paddingプロパティは「内容と枠線との余白量」(＝ボックスの内側の余白量)を調節するためのプロパティです。ここに望みのサイズを指定すれば、好きな間隔を設けられます。

paddingプロパティもborderプロパティと同様に、上側の余白(padding-top)や下側の余白(padding-bottom)だけに限定して指定が可能ですから、下側に線を引いたなら下側にだけ余白を設ければ充分です。
以下のようなCSSソースを書けばよいでしょう。

p.box {
   border-bottom: 1px solid red;
   padding-bottom: 15px; /* 内容と線との間隔量 */
}

上記の場合だと、15ピクセルの余白が設けられます。
これを表示すると、以下のような感じで見えます。

このように、1本線と文字との間隔を自由に設定できます。

1本線を引くボックスを連続させる場合は

「下部に1本だけ線を引く」ボックスを連続して何個も掲載する場合は、後続の要素との距離も調節するために、下記のように「外側の余白(margin)」も加えると良いかも知れません。

p.box {
   border-bottom: 1px solid red;
   margin-top: 0px;       /* 上線の外側の余白はナシ */
   padding-top: 0px;      /* 上線の内側の余白はナシ */
   margin-bottom: 0.3em;  /* 下線の外側の余白量 */
   padding-bottom: 0.3em; /* 下線の内側の余白量 */
}

上記の場合だと、

• 「ボックスの内容」と「ボックス下の枠線」との間(＝padding-bottom)に0.3文字分の余白が設けられ
• 「ボックス下の枠線」と「次のボックスの内容」との間(＝margin-bottom)にも0.3文字分の余白が設けられます。

つまり、線の上下に0.3文字分(＝0.3em)の余白が設けられます。
これを表示すると、以下のような感じで見えます。

余白の設け方のパターンは他にもあるので、都合に応じていろいろ試してみると良いと思います。「ボックスの中身(文章など)と線との間」はpaddingで、「線と後続の要素との間」はmarginで調節します。値に使う単位はもちろん「em」以外に「px」なども使えます。ピクセル単位で調整したい場合は3pxなどと書けば良いでしょう。

二重線を引くこともできるが、その場合は太さを「3px」以上にしないといけない

なお、1本線ではなくて二重線を引くこともできます。ただしその場合は、線の太さを「3px」以上に指定する必要があります。なぜなら「太さ1ピクセルの線が2本」と「その線と線の間隔が1ピクセル」で合計3ピクセルが描画に必要だからです。
二重線を引くには、以下のようなCSSソースを書きます。

p.box {
   border-bottom: 3px double green;
}

太さを「3px」にして線種を「double」にしています。doubleというのはここでは「二重線」という線種を表しています。これを表示してみると、以下のように見えます。

まあこんな感じで、様々な横線を簡単に引くことができます。線を引くのはスタイルシートの装飾でもかなり基本の部類でしょうね。とても頻繁に使いますし、とっても簡単に記述できます。

方法2. 区切りを示す目的としてhr要素を使う書き方

HTMLには昔から横線を引けるhr要素がありました。元々は単なる「水平線を引く」要素でしたが、HTML5では「段落や話題の区切りを示す」目的の要素として再定義されました。使い方は簡単で、以下のようにHTMLソースを書くだけです。

↓ここが区切り。
 <hr>
↑ここが区切り。

これだけです。ただHTMLソース中に<hr>と書くだけです。(※XHTMLなら<hr />と書きます。)
とはいえ、代表的なブラウザでは立体的な線が表示されてしまうので、フラットな線を引きたいときにはちょっと向いていないんですよね。あと、ブラウザによって微妙に見栄えが異なりますし。(※そもそもHTML5では特に「水平線を引く」という装飾が定義されているわけではないので、ブラウザによっては水平線以外の表現方法が使われる可能性もないとは言えません。)
そのまま、hr要素だけを使って表示させると、以下のような感じで見えます。

ただ、hr要素そのものをスタイルシートで装飾することは可能です。
例えば、以下のような感じでCSSソースを記述します。

hr {
   border-width: 1px 0px 0px 0px; /* 太さ */
   border-style: solid; /* 線種 */
   border-color: red;   /* 線色 */
   height: 1px;         /* 高さ(※古いIE用) */
}

最後のheightプロパティは古いIE向けの記述なのでもはや書かなくても良いとは思いますが、書いておいても特に害はないので書いてあります。
上記のCSSソースを先程のHTMLソースに適用して表示させると、以下のような感じに見えます。細い赤線が1本だけ横に引かれているのが分かるでしょう。

border-widthプロパティで値を1px 0px 0px 0pxのように空白で区切って4つ指定しています。これは「上側にだけ1ピクセルの線を引き、あとは線を引かない」指定です。border-styleプロパティで線種(ここでは実線「solid」)を、border-colorプロパティで線色(ここれは赤色「red」)を指定しています。

最初から、border-topプロパティを使って「上側の枠線」だけの装飾を指定すると早いと思いがちなんですが、hr要素に対して装飾する場合は、下側・左側・右側の三方に対して明示的に「0pxを指定する」必要があるようです。デフォルトで周囲に線が引かれている扱いになっているからでしょうね。（たぶん）

※なお、最後にheightプロパティを使って高さを「1px」にしているのは、古いIE向けの記述です。古いIEの場合は、hr要素の線は「枠線」だとは解釈されていないようで、この記述が必要です。（※古いIEでは、heightで太さを指定し、colorで色を指定することで水平線の装飾を指定できました。しかし、それ以外のブラウザでその方法は使えません。また、borderなどを使って「枠線」として装飾する方法だけでは、古いIEではうまく1本線になりません。従って、上記のソースのように両方の記述方法を同時に書いておく必要があります。）

hr要素で引く水平線を破線にするCSSの書き方

要するに「hr要素に対して枠線を指定する」だけなので、破線にしたいなら「solid」ではなく「dashed」に、灰色にしたいなら「red」を「gray」に変えるだけです。

hr {
   border-width: 1px 0px 0px 0px; /* 太さ1px */
   border-style: dashed; /* 線種を破線に */
   border-color: gray;   /* 線色を灰色に */
   height: 1px;         /* 高さ(※古いIE用) */
}

表示すると以下のように破線で描画されます。

このように、(冒頭の「方法1」とは異なり)周囲のボックスに頼らずに線を引くことができます。ボックスの枠線を活用する方法は、完全に「デザインとしての1本線」でしたが、hr要素を使う場合は(HTML5では)「段落の区切り」・「話題の区切り」の役目も果たしますから、文章構造的に区切りを表現したい場面で使うなら、hr要素を使うのも良さそうです。

「デザインのみの目的で引く線」なのか、「区切りを表現するために引く線」なのかで使い分けると良いのではないでしょうかね？

hr要素に関する補足：「見栄えのための要素」から「区切りの意味付きの要素」に

このhr要素の名称である「hr」は「Horizontal Rule(水平線)」の略で、元々は水平線(横線)を引くための要素でした。つまり「見栄えのための要素」だったということですね。そして、「見栄えはHTMLではなくCSSで記述するべき」という考え方から、hr要素を使うこと自体を避けた方が良い、という意見もあったような気がします。(HTML5が出るまでは。)

HTML4.01では非推奨要素にはなっていないものの、XHTMLではプレゼンテーションモジュール(Presentation Module)に分類されていて「見栄え」のための要素という扱いでした。HTML4.01の仕様では「水平線を描く」としか定義されておらず、「区切る」意味はありませんでした。XHTML2.0では別途「区切り」を表現するために、separator要素が加わることになっていたようでもあります。

しかし、HTML5ではこのhr要素の定義自体を変更して、以下のように「区切り」の意味が付与されました。

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
hr要素は、段落レベルでの主題変化（例えば物語の中でのシーンの変化や、リファレンス本のセクション内での話題転換など）を表します。

というわけで、上記の意図に合致する「区切り」として使うなら、hr要素を使っても全然問題ないことになりました。

「hr」(＝Horizontal Rule／水平線)という名称は、まあ名残ですね。(^_^;) もっとも、代表的なブラウザが長らく水平線の形で描画してきた以上、それ以外の描画効果を新たに採用するメリットがないので、たぶん今後もずっと「水平線」の形で表示されるのだろうとは思いますが。

備考：CSSで斜めの線を引く方法

本記事では横方向に1本の線を引く方法だけを紹介しましたが、斜めに線を引きたい状況というのもそこそこあります。特に多いのは、表(テーブル)の内側に斜めの線を引く場合ではないかと思いますが。
CSSには斜めの線を引くためのプロパティはありません。しかし、若干アクロバットではあるものの、CSS3のlinear-gradientを活用すると、斜めに細い線を1本だけ引くこともできます。
その方法については、All Aboutで記事にしましたので、記事「表の空っぽのセルにだけCSSで斜線を引く方法」をご参照下さい。

(更新日：2017年06月23日)