今回は【CSS】outlineの使い方、outline-style(線)を学ぼう!
の解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
CSS
について学びたい方へ - 今回はoutline-style(線)について解説しております。
outline
とは、ボックスのアウトラインを指定する際に指定します。
線を引く際には、borderプロパティが存在しますが、outline(アウトライン)は、border線より外に表示します。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
outlineについて
outline
とは、ボックスのアウトラインを指定する際に指定します。
線を引く際には、borderプロパティが存在しますが、outline(アウトライン)は、border線より外に表示します。
基本的は指定方法は、borderプロパティと変わりはありません。
書き方は以下のようになります。
<div class="outline-box">
outline
</div>
/*--CSS--*/
.outline-box {
width: 30%;
padding: 2em;
text-align: center;
background-color: #e8e8e8;
outline: solid 5px #fd6158;
/*--内訳
outline-style: solid;
outline-width: 5px;
outline-color: #fd6158;
--*/
}
outline-style(線種)について
outline-style
とは、スタイル(線種)を指定します。
基本はborderプロパティと同じ値を指定できます。
outline-style
double
dashed
<div class="outline-double">double</div>
<div class="outline-dashed">dashed</div>
/*--CSS--*/
.outline-double {
outline: double 5px #fd6158;
/*--内訳
outline-style: double;
outline-width: 5px;
outline-color: #fd6158;
--*/
}
.outline-double {
outline: dashed 5px #fd6158;
/*--内訳
outline-style: dashed;
outline-width: 5px;
outline-color: #fd6158;
--*/
}
- 指定できる値
- solid
直線(1本線)のスタイル
- double
2本の直線(2本線)のスタイル
- dotted
点線のスタイル
- dashed
破線のスタイル
- groove
彫り込んだ線のスタイル
- ridge
浮き出るような線のスタイル
- inset
立体的に埋め込まれてるような線のスタイル
- outset
立体的に浮き出るような線のスタイル
outline-width(幅)について
outline-width
とは、幅を指定します。
幅に関しては、borderプロパティと違った点があります。
注意ポイント!
「outlineは上下左右で同じ値しか指定しかできない」って事です!!
つまり、「-top: 5px」、「-right: 10px」、「-right: 8px」、「-left: 12px」個別に指定ができません。
<div class="outline-dashed">width</div>
/*--CSS--*/
.outline-double {
outline: double 5px #fd6158; /*--上下左右 同じ値が適用--*/
/*--内訳 ↓ 適用されません。
outline-top: 〇〇;
outline-right: 〇〇;
outline-bottom: 〇〇;
outline-left: 〇〇;
--*/
}
- 指定できる値
- 数値
px(ピクセル)のスタイル
- thin
細い線のスタイル
- medium
普通(デフォルト)線のスタイル
- thick
太い線のスタイル
outline-color(色)について
outline-color
とは、色を指定します。
幅と同じように「上下左右」個別に指定はできません。
outlineとborderの違いについて
borderプロパティとは違い、outline-width
は「上下左右」個別には指定できません。
また、2つのプロパティを指定する際には、outlineが「外側」、borderが「内側」になります。
書き方は以下のようになります。
<div class="outline-box">
内側、外側
</div>
/*--CSS--*/
.outline-box {
outline: solid 5px #fd6158;
border: solid 5px #1ece50;
/*--内訳 外側
outline-style: solid;
outline-width: 5px;
outline-color: #fd6158; 赤色
--*/
/*--内訳 内側
border-style: solid;
border-width: 5px;
border-color: #fd6158; 緑色
--*/
}
:hoverとの違いについて
:hover
に対してborderを指定しレイアウトが崩れた経験はありませんか。
そのような時は、outlineを指定するとレイアウトが崩れがなくなるので、とても便利です。
書き方は以下のようになります。
:hoverとの違い
outline:hover
border:hover
<div class="outline">outline</div>
<div class="border">border</div>
/*--CSS--*/
.outline:hover {
outline: solid 10px #fd6158;
}
.border:hover {
border: solid 10px #1ece50;
}
関連記事
borderプロパティ参考になるかも
borderの基本的な書き方は、線の種類、線の太さ、線のカラーを半角スペースで区切り一括指定(ショートハンド)します。
まとめ
今回はこれで以上です。
- POINT
-
outline
とは、ボックスのアウトラインを指定する際に指定します。 - outlineは上下左右で同じ値しか指定しかできません。
- 2つのプロパティを指定する際には、outlineが「外側」、borderが「内側」になります。
-
:hover
に、outlineを指定するとレイアウトが崩れがなくなるので、とても便利です。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事