【CSS】outlineの使い方とborderとの違いを徹底解説

2021.10.25

CSSを学習していて、borderはなんとなくわかるけど、outlineはどのように使うのだろう。

今回の記事では、上記のような悩みに対して、outlineの使い方とborderとの違いを初心者にもわかりやすく解説します。

CSSのoutlineはユーザビリティの観点からも大事なプロパティになりますので、この記事を読んでマスターしましょう。

CSSのoutlineは輪郭を表示するプロパティ

CSSのoutlineは、要素の外側に輪郭を表示するプロパティです。

要素の外側に線を引くためにはborderを使用しますが、outlineはさらにその外側の輪郭に線を引きます。

borderとoutlineの違いの詳細については記事の後半で解説します。

outlineプロパティを使うタイミング

要素の外側に線を引くborderは頻繁に使われますが、outlineプロパティは頻繁には使われません。outlineプロパティを使うタイミングは限られているからです。

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

例えば、以下の画像のように入力欄がフォーカスされた時に周りの線を表示させる際、outlineプロパティが使われています。これは入力欄が選択されていることを示しています。

outlineプロパティを使用した時の画像

このようにoutlineはユーザーがWebサイトを使いやすいように工夫するプロパティの一つです。しかし、outlineは記述をしなくてもブラウザの標準機能で線は表示されます。

ここからは、outlineプロパティについて記述方法と、細かい設定方法を解説していきます。

outlineを細かく設定することで、さらにユーザーが理解しやすいWebサイトを作ることができます。

outlineプロパティの詳細

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

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

outline-color

outline-colorは、outlineで表示される色を変更することができます。カラーネームで指定することもできますが、詳細に設定する場合はrgb()を使用しましょう。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(226, 132, 132);
}
outline-colorを指定した時の画像

少しオシャレに半透明にしたい時は、rgba()を使用します。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgba(226, 132, 132, 0.137);
}
outline-colorを半透明にしたときの画像

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

outline-style

outline-styleは、outlineの線の形状を変更できるプロパティです。数種類の形状が用意されています。それぞれ形状をみていきましょう。

outline-style: solid;

solidは一本線を表す値になります。borderでも頻繁に使われる値になります。outlineでもsolidを使うことが一番多いでしょう。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをsolidに指定した時の画像

outline-style: dotted;

dottedはその名のとおり、ドットで線を表します。あまり見ない表現です。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: dotted;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをdottedに指定した時の画像

outline-style: dashed;

dashedは、ダッシュで線を表します。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: dashed;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをdashedに指定した時の画像

outline-style: double;

doubleは二重線で線を表します。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: double;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをdoubleに指定した時の画像

outline-style: groove;

grooveとは英語で溝を表す単語です。outline-style:grooveは線に溝を付けたような表現が可能です。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: groove;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをgrooveに指定した時の画像

outline-style: ridge;

ridgeは英語で頂上などの意味があります。outline-style: ridge;は線が隆起したような表現が可能です。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: ridge;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをridgeに指定した時の画像

outline-style: inset;

insetでは、内側にへこんでいるような線を表現できます。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: inset;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをinsetに指定した時の画像

outline-style: outset;

outsetはinsetと逆に内側から外側に向かって飛び出るような線を表現できます。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: outset;
  outline-width: 5px;
/* あえて線を太くしています。 */
}
outline-styleをoutsetに指定した時の画像

outline-width

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

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

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

outline-width:(length);

outlineの線の太さをpxで表示する方法です。任意の値を指定します。outline-widthは基本的にpxで指定することが多いです。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: 3px;
}
outline-widthを3pxに指定した時の画像

極端に太くすることもできます。

CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: 10px;
}
outline-widthを10pxに指定した時の画像

pxで指定することにより自由に太さを決めることができます。

outline-width:thin;

細い線でoutlineを表示します。1pxと同様の太さになります。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: thin;
}
outline-widthをthinで指定した時の画像

outline-width:medium;

中程度のoutlineを表示します。3pxと同様の太さになります。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: medium;
}
outline-widthをmediumで指定した時の画像

outline-width:thick;

太い線でoutlineを表示します。5pxと同様の太さになります。

HTML
<input  type="text">
CSS
input:focus{
  outline-color: rgb(255, 0, 0);
  outline-style: solid;
  outline-width: thick;
}
outline-widthをthickで指定した時の画像

outline

上記で紹介した、outline-color、outline-style、outline-widthの3つを一括で指定できるのがoutlineプロパティです。

outlineを指定したいときには無駄なコードを省いて表示するoutlineプロパティを使用するのが一般的です。

記載の順番は関係なく、半角スペースで区切ります。

HTML
<input  type="text">
CSS
input:focus{
  outline:solid 5px rgb(255, 0, 0);
}
outline:solid 5px rgb(255, 0, 0);を指定した時の画像

outline-offset

outlineには上記で紹介した3つのプロパティ以外にも使用できるプロパティがあります。outline-offsetです。

outline-offsetはpaddingのような働きがあり、outlineの内側に余白を設けることができます。

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

HTML
<input  type="text">
CSS
input:focus{
  outline:solid 5px rgb(255, 0, 0);
  outline-offset: 3px;
}
outline-offsetを3pxで指定した時の画像

内側に余白を設けることで、入力欄から離してoutlineを表現できます。

outline-offsetはoutlineプロパティでの一括指定はできませんので、個別に指定する必要があります。

outlineプロパティはデザインにも使用できる

outlineプロパティは、フォーカス時だけでなくデザインにも使用できます。

上記で説明したoutline-offsetを使用することで、見出しなどのデザインをオシャレに変更できます。

簡単な例を紹介します。

outlineプロパティで見出しに縫い目を追加

ここではoutline-offsetを使用して、見出しに縫い目を表現します。

HTML
<h2>outlineでデザイン</h2>
CSS
h2{
  padding: 10px 20px;
  background-color: rgb(241, 212, 185);
  outline: 2px dashed brown;
  outline-offset: -10px;
}
outline-offsetでデザインされた見出しの画像

outline-offsetを負の値にすることで要素の中に輪郭を表現することができます。

線の形状を変えるだけでも違うデザインを表現することが可能です。

HTML
<h2>outlineでデザイン</h2>
CSS
h2{
  padding: 10px 20px;
  background-color: rgb(241, 212, 185);
  outline: 2px dotted brown;
  outline-offset: -10px;
}
outline-offsetでドットにデザインされた見出しの画像

一手間加えるだけで、オシャレなデザインができますので参考までに覚えておいてください。

outlineプロパティとborderプロパティの違い

ここからは、線を表現するoutlineプロパティとborderプロパティの違いについて解説します。

線を表現できるのであればborderプロパティだけで良いように思いますが、outlineプロパティとの明確な違いがあります。

  • outlineプロパティは要素の幅に影響を与えない
  • outlineプロパティは上下左右の指定はできない

それぞれ解説します。

outlineプロパティは要素の幅に影響を与えない

borderプロパティはボックスモデルの一つです。もし太い線のborderをフォーカスした時に表現してしまうと全体の要素がズレてしまいます。

HTML
<input  type="text">
CSS
input:focus{
  border: solid 10px rgb(255, 0, 0);
}
フォーカス時にborderのみを指定した時の画像

入力欄が少しズレていることがわかります。

outlineプロパティは輪郭を表現するだけですので、要素がズレることはありません。

outlineプロパティは上下左右の指定はできない

outlineプロパティは、輪郭を表現するためだけのプロパティです。そのため、上下左右のどれかを指定して表示することはできません。outline-topなどは存在しないということです。

もし、フォーカスした時に上下左右のどれかだけを指定したいのであれば細いborderを使用するのであれば可能です。下記ではその方法を紹介します。

フォーカスした時に下だけに線を表示させる

outlineプロパティでは、上下左右の指定はできないと説明しました。

しかし、どうしてもフォーカスした時に上下左右のどこかだけ線を表示したいことがあるでしょう。

そんなときはborderを使用しましょう。細いborderであれば大きくデザインを崩すこともありません。

まずは下だけに線を表示する方法をコードを用いて解説します。

HTML
<input  type="text">
CSS
input:focus{
  outline: none;
  border: none;
  border-bottom: 2px solid red;
}
フォーカス時に下にだけ線を表示させた画像

まず、outline: none;でフォーカスした際にoutlineを消します。outlineはブラウザの標準で表示されてしまうからです。

次に、inputタグのborderをnoneで削除します。inputタグのborderもブラウザの標準で表示されます。

最後に表示したい下にのみborderを指定します。あまりにも太い線だと表示ズレてしまうので注意が必要です。

左のみに線を表示したい場合は、上記コードのborder-bottomを変更します。

HTML
<input  type="text">
CSS
input:focus{
  outline: none;
  border: none;
  border-left: 2px solid red;
}
フォーカス時に左にだけ線を表示させた画像

あまり使う頻度は多くはないかもしれませんが、表現可能であることを知っておきましょう。

outlineプロパティの使い方:まとめ

outlineは、ユーザーが入力欄を選択中であることを知らせる大事なプロパティです。ユーザビリティを考慮するのであれば、わかりやすい色や線を選ぶように心がけましょう。

outlineは工夫することによりフォーカス時だけでなく、見出しなどのデザインにも使用できます。

borderプロパティとの違いも考慮しつつ、使用するプロパティを選択しましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5