CSSで線を引く方法を徹底解説。線は重要な装飾になる

Webデザインにおいて、線の表現はなくてはならないものです。区切りや強調、装飾など、サイトを分かりやすく、内容を的確に伝えるために大いに役立っています。

Webサイトの見た目に関することは基本的にCSSで制御されていて、線も例外ではありません。

Webサイトで目にする線のほとんどは、CSSで引かれているものです。

線の引き方は多彩で、場所や要素によって使い分けられています。

今回はCSSで様々なところに線を引く方法をまとめたので、ぜひ参考にしてください。

CSSで線を引くプロパティ：text-decoration

text-decorationはテキストに線を引くプロパティです。

text-decorationプロパティがもっともよく使われるシチュエーションは、リンクにマウスを乗せたときでしょう。

CSS
a:hover {
text-decoration:underline;
}

上記のコードでテキストリンクの上にマウスが乗ったときに、下線が表示されるようになります。

多くのWebサイトで使われている手法なので、テキストがリンクであると確実に伝えることが可能です。

線の位置

text-decorationプロパティのunderlineはテキストの下側に線を引く値です。underline以外の位置にも線を引くことができます。

以下は位置に関する値の一覧です。

none	線なし　初期値
overline	上線
underline	下戦
line-through	取り消し線

overlineはテキストの上側に線を引く値です。

見出しの装飾などでテキストの上側に線を引くことはありますが、overlineは細かな余白調整などができないので、あまり使われていません。

装飾でテキストの上側に線を引く場合、後述するborderを使うのが一般的です。

underlineはリンクの他、テキストを強調したいときなどにも使われます。

line-throughは、テキストの真ん中を貫くように線が引かれます。

HTML
<p>テキスト<span>訂正箇所</span>テキスト</p>

CSS
p span {
text-decoration:line-through;
}

このように任意の箇所にline-throughを指定することで、内容を取り消しているように見せられます。

取り消しにはHTMLの文法的な意味を持つ場合があるということには、注意しなければなりません。

古い情報を訂正しつつ残したいというときは、SEOの重要度を下げられるdelタグを使用するのが適切です。

line-throughは、文法上の意味はなく役割は装飾のみというときに使ってください。

線の種類

text-decorationプロパティは値に線の位置を指定するだけで機能しますが、線の種類の変更も可能です。

CSS
p  {
text-decoration:underline;
}

この状態だと通常の一本線です。

p  {
text-decoration:underline
dotted;
}

上記のコードでは下線を点線に変えることができます。

このように値を追加することで、線の種類も変更できます。

線の種類には、以下のような値があります。

solid	一本線　初期値
double	二重線
dotted	点線
dashed	破線
wavy	波線

doubleやwavyはテキストを強調したいときに便利です。

HTML
<p>テキスト<strong>強調箇所</strong>テキスト</p>

CSS
p strong {
text-decoration:underline
wavy;
}

デフォルトで太字になる設定のあるstrongタグにさらにwavyを指定することで、テキストが一層際立つでしょう。

線の色

text-decorationは通常、テキストの色がそのまま反映されます。これを線の色だけ変更することが可能です。

HTML
<p>テキスト<strong>強調箇所</strong>テキスト</p>

CSS
p strong {
text-decoration:underline
wavy #ff0000;
}

このように値に色を加えると、テキストの色はそのままで線の色だけが変わります。

リンクの下線を取り除く

text-decorationプロパティは、ブラウザに標準で設定されているリンクの下線を取り除く際に使用されることもあります。

HTML
<a href="#" class="anker">リンクの下線を取り除く</a>

.anker{
  text-decoration: none;
}

ブラウザではリンクに下線が付いていることが多いですが、メニューなどを装飾したい時にリンクの下線を取り消すことは頻繁に起こります。

上記のコードのようにtext-decorationプロパティをnoneで無効化することで下線を消せます。

CSSで線を引くプロパティ：border

borderは、要素の上下左右に線を引くことができるプロパティです。

CSS
div {
border:solid
#ff0000 1px;
}

このように線の種類、色、太さを設定することで機能します。値の指定順に決まりはありません。

プロパティはborderだと上下左右全方向に線が引かれます。border-top、border-bottom、border-left、border-rightで一方向のみに線を引くことも可能です。

線の種類には、wavyを除くtext-decorationと同じ値の他、立体的に見えるgroove、ridge、inset、outsetなどがあります。

しかし、デザインの細かな調整ができないので、使用される機会はあまり多くありません。

solid、double、dotted、dashedさえ覚えておけば問題ないでしょう。

線自体のデザインを作りこみたいときは、border-imageというプロパティを使用してください。

borderに画像を使用できるので、思いのままの線を引くことができます。

borderのメリット

borderは線を引く際にもっとも使用されるプロパティで、便利な特徴を多数備えています。

あらゆる要素に使用可能

text-decorationはテキストにしか使用できませんが、borderはページ内のすべての要素に使用可能です。

上下左右全方向に指定できるという点もポイントです。

余白を指定できる

余白を指定できることもtext-decorationとの大きな違いです。

text-decorationは線がテキストにくっついた状態で表示されますが、borderはpaddingを指定することで要素の中身と線との間に余白を設けることができます。

CSS
p {
border-bottom:solid
#ff0000 1px; /*borderの指定*/
padding-bottom:5px;
/*余白の指定*/
}

これでテキストとborderの間に、5pxの余白が生まれます。

太さを指定できる

線の太さを、1px単位で詳細に指定できます。上下左右のborderを別々に指定することで、それぞれの太さを変えることも可能です。

これは線の種類や色も同様で、四方向すべてをまったく別の線で囲うことができます。

borderは表現の幅が広く、色々なデザインを簡単に再現できます。

borderの用途

borderの実際の使用例を紹介します。

境界線

borderは境界という意味で、スタンダードな使用法です。要素と要素を区切るために使用されます。

HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

CSS
li {
border-bottom:solid
#cccccc 1px;
}

情報がいくつも並んでいると、視覚的に分かりにくくなってしまうことがあります。

それぞれのブロックをborderで区切ることで、閲覧者に内容が正確に伝わるようになるでしょう。

表組でもborderは欠かせません。

HTML
<table>
 <tr>
 <th>見出し1</th><td>内容1</td>
 </tr>
 <tr>
 <th>見出し2</th><td>内容2</td>
 </tr>
</table>

CSS
table, th ,
td {
border:1px
solid #000000; /*borderの指定*/
border-collapse:collapse;
/*隣接する要素のborderを共有*/
padding:
5px; /*テキストと線の間の余白の指定*/
}

表組は縦横にテキストが密集するので、セル同士の境界をはっきりさせなければなりません。

もっとも一般的な方法がborderです。セルを線で囲んで区切っています。

table、th、tdにborderを指定しているので、そのままでは線が二重になってしまいます。

そこで必要なのがborder-collapseというプロパティです。collapseを指定することで隣接する線が1本になります。

強調

テキストの強調はtext-decorationプロパティでもできますが、borderは工夫次第でもっと多彩な装飾が可能になります。

HTML
<p>テキスト<strong>強調箇所</strong>テキスト</p>

CSS
p strong {
border-top:solid
#ff0000 2px; /*テキストの上のborder*/
border-bottom:solid
#ff0000 2px; /*テキストの下のborder*/
}

text-decorationでは上下どちらかの指定しかできませんでしたが、borderならば上下どちらにも指定が可能です。線の太さの調整もできます。

上下だけではありません。

HTML
<p>テキスト<strong>強調箇所</strong>テキスト</p>

CSS
p strong {
border:double
#ff0000 3px; /*テキストの上のborder*/
padding:
5px; /*内側のテキストと線の間の余白の指定*/
margin:0
5px; /*外側のテキストと線の間の余白の指定*/
}

強調したい箇所の四方を囲ってしまうという方法もあります。線の内と外に余白を指定できるので、窮屈に見えてしまうことがありません。

ちなみに二重線、doubleは内側の線と外側の線とその間のスペースで構成されているので、太さは3pxから有効です。それ以下の場合は、一本線で表示されます。

テキスト以外にも、色々な要素の強調に有効です。

CSS
div {
border:solid
#ff0000 3px; /*borderの指定*/
padding:10px;
/*余白の指定*/
border-radius:5px;
/*角丸の指定*/
}

このように大きなブロックをborderで囲うことによって、周りの要素とは違うということを示すことができるでしょう。

border-radiusはborderの四隅を丸くするというプロパティで、通常の四角よりも柔らかな表現が可能です。

装飾

見出しなど目立たせたい要素には、装飾の目的でborderが用いられます。

CSS
h2 {
border-bottom:solid
#000000 1px;
}

borderを指定する要素がブロックレベル要素の場合、線がテキストの下だけでなく親要素の横幅いっぱいに引かれるので段落の区切り線としても有効です。

装飾に使われるのは、border-bottomだけではありません。

CSS
h2 {
border-bottom:solid
#000000 1px; /*下のborder指定*/
border-left:solid
#ff0000 5px; /*左のborder指定*/
padding-left:10px;
/*テキストと左の線の間の余白の指定*/
}

このように左側に太く目立つ線を差し込むことで、より閲覧者の目を引きやすくなります。

テキストの上側に線を引くパターンや、全体を囲うパターンも存在します。

CSSで線を引くプロパティ：background

backgroundは背景を指定するためのプロパティですが、線を引くために使うこともあります。

そのためには、linear-gradientという値を使用します。

HTML
<p>テキスト<strong>強調箇所</strong>テキスト</p>

CSS
p strong {
background:linear-gradient(transparent
50%, #ffaaee 0%);
}

このような記述を行うと、テキストの下半分にマーカーのような線が引かれます。

transparentは透明という意味で、上半分の線がない部分を示しています。

50%が透明部分の大きさで、言い換えれば線の太さです。この数値が大きいほど、線が細くなります。

#ffaaeeの箇所で任意の色を指定します。0%は固定です。

transparentと色の指定を逆にすれば、上半分の線になります。

linear-gradientは本来グラデーションを作るための値ですが、このように透明と単色を使うことで線の表現も可能です。

この手法の強みは、要素の下まで線を引くことができるということです。text-decorationやborderは線と要素を重ねることはできません。

マーカーでチェックを入れたようなテイストになるので、大事な部分をアピールしたいときなどに重宝するでしょう。

CSSで線を引くプロパティ：hrタグを装飾

hrは水平線を引くというHTMLの要素です。

HTML
<hr>

このように記述するだけで、一本の線が引かれます。

元々は線を引くというだけの要素で、文法上の意味はありませんでした。

見た目に関することはCSSで表現という認識から、あまり使われてこなかったタグです。

しかし、HTML5で「区切りを示す」要素として再定義され、文法上の意味が生まれます。

段落の区切りとしては、hrが有効ということです。

しかし、そのままでは意図したデザインにはなりません。ブラウザごとに見た目が異なる場合もあります。

hrを使用するにも、CSSは必要です。

CSS
hr {
border-width:
1px 0 0 0; /*線の太さの指定*/
border-style:dotted;
/*線の種類の指定*/
border-color:
#000000; /*線の色の指定*/
}

太さを持たせるのは、上方向だけにしなければなりません。

hrという線の周りにborderを指定するという考え方なので、全方向だとborderが重なり合って太くなってしまいます。

そのためプロパティを分けて、方向別に太さの指定ができるborder-widthを使用しています。

もしくはborderの指定すべてを1方向にするという方法も有効です。

CSS
hr {
border-top:dotted
1px #000000; 
}

この方法で有効なのはborder-topのみです。

border-bottomではデフォルトの線と指定したborderが重ならず、border-leftとborder-rightでは横に短い線が表示されるだけです。

hrはHTMLの要素なので、それ自体にCSSを指定できるというのが便利なポイントです。

CSS
hr {
margin:30px　0;
}

hrの上下に30pxの余白を指定しました。

hrは区切りを示す要素なので、線と同時に余白も設けられるというのは効率的です。

CSSで線を引くプロパティ：outline

お問い合わせなどのフォームを作成する際に、inputタグやtextareaタグを使用します。

inputタグやtextareaタグによって作成されるテキスト入力エリアの周りに線を引くプロパティがoutlineプロパティです。要素の外側に線を引くためにはborderを使用しますが、outlineはさらにその外側の輪郭に線を引きます。

outlineを使うタイミングとしては、名前や電話番号、お問い合わせ内容などを書く際に入力中であることを示す時に使用されることが多いです。

簡単なコード例を紹介します。

HTML
<input  type="text">

CSS
input:focus{
  outline:solid 5px rgb(255, 0, 0);
}

上記のoutlineプロパティは、ショートハンドで記述する方法です。

outlineプロパティは詳細も設定することができるので下記で紹介します。

outlineプロパティの詳細

outlineプロパティの詳細を設定することで、入力欄にフォーカスされた時のデザインを自由に変更することができます。

outlineを自由に変更するための記述方法について解説します。

outline-color

outline-colorは、outlineの色を変更することができます。

色を変えることでユーザーの目に止まりやすいように装飾ができます。

下記にコード例を紹介します。

HTML
<input  type="text">

CSS
input:focus{
  outline-color: rgb(255, 100, 100);
}

基本的には、入力中であることをユーザーに伝えたいのではっきりした色を使用することをおすすめします。

outline-style

outline-styleは、outlineの線の形状を指定するプロパティです。

数種類の形状を設定できます。表示できる線の種類を下記の表にまとめました。

値	線の形状
solid	一本線
dashed	波線
double	二重線
dotted	点線
groove	線の中心に溝を入れたような線
ridge	線の中心が隆起したような線
inset	内側に凹んでいるような線
outset	外側に凹んでいるような線

簡単なコード例を紹介します。

HTML
<input  type="text">

CSS（solidの場合）
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: 3px;
}

CSS（dashedの場合）
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: dashed;
  outline-width: 3px;
}

CSS（insetの場合）
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: inset;
  outline-width: 3px;
}

上記のように、様々な形状の線を引くことができるので、時間がある時にそれぞの値を試してください。

表現の幅も広がるので、このような線を引けることだけでも覚えておきましょう。

outline-width

outline-widthは、outlineの幅を決めることができます。

outline-widthで指定できる値を下記の表にまとめました。

値	効果
(length)	pxなどの任意の値を設定します
thin	細い線を表現します
medium	中程度の線を表現します
thick	太い線を表現します

(length)は任意のpxなどを指定します。thinは1px、mediumは3px、thickは5pxと同様の太さになります。

簡単なコード例を紹介します。

HTML
<input  type="text">

CSS（thickの場合）
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: thick;
}

ほとんどの場合は、pxで指定することが多いです。outline-widthを指定しなければ1pxの線が表示されます。

より目立たせたいのであれば、太めの線にすることをおすすめします。

outlineプロパティは、入力欄の周りに線を引くプロパティです。

ユーザーの使いやすさを考えると重要な線とも言えるでしょう。

CSSで線を引く：まとめ

Webサイト制作において、CSSで線を引くという機会は幾度となく訪れます。

どのような線を引くべきかは、状況によって異なってくるでしょう。

目的や場所に応じて、今回紹介したtext-decoration、border、background、hr、outlineを効果的に使い分けてください。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！