1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
こんな方に読んでほしい
CSSについて学びたい方へoutlineとは、ボックスのアウトラインを指定する際に指定します。
線を引く際には、borderプロパティが存在しますが、outline(アウトライン)は、border線より外に表示します。
 Chrome |  Safari |  Firefox |  IE |  Edge |
|---|---|---|---|---|
[記事の内容]
outlineとは、ボックスのアウトラインを指定する際に指定します。
線を引く際には、borderプロパティが存在しますが、outline(アウトライン)は、border線より外に表示します。
基本的は指定方法は、borderプロパティと変わりはありません。
書き方は以下のようになります。
outline
<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とは、スタイル(線種)を指定します。
基本はborderプロパティと同じ値を指定できます。
outline-style
<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;
--*/
}
outline-widthとは、幅を指定します。
幅に関しては、borderプロパティと違った点があります。
注意ポイント！
「outlineは上下左右で同じ値しか指定しかできない」って事です!!
つまり、「-top: 5px」、「-right: 10px」、「-right: 8px」、「-left: 12px」個別に指定ができません。
outline-width
<div class="outline-dashed">width</div>
/*--CSS--*/
.outline-double {
outline: double 5px #fd6158; /*--上下左右 同じ値が適用--*/
/*--内訳 ↓ 適用されません。
outline-top: 〇〇;
outline-right: 〇〇;
outline-bottom: 〇〇;
outline-left: 〇〇;
--*/
}
outline-colorとは、色を指定します。
幅と同じように「上下左右」個別に指定はできません。
borderプロパティとは違い、outline-widthは「上下左右」個別には指定できません。
また、2つのプロパティを指定する際には、outlineが「外側」、borderが「内側」になります。
書き方は以下のようになります。
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に対してborderを指定しレイアウトが崩れた経験はありませんか。
そのような時は、outlineを指定するとレイアウトが崩れがなくなるので、とても便利です。
書き方は以下のようになります。
: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の基本的な書き方は、線の種類、線の太さ、線のカラーを半角スペースで区切り一括指定(ショートハンド)します。
| outline要素 | 【CSS】outlineの使い方、outline-style(線)を学ぼう! |
|---|
今回はこれで以上です。
outlineとは、ボックスのアウトラインを指定する際に指定します。:hoverに、outlineを指定するとレイアウトが崩れがなくなるので、とても便利です。| Chrome | Safari | Firefox | IE | Edge |
|---|---|---|---|---|
2022.06.10
2022.06.03
2021.08.10
2021.08.03
2023.03.30
2023.03.23
2023.03.16
2023.03.09
2023.03.02
2023.02.23
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog
