cssプロパティoutlineについての説明

こんにちは tanaka です。

今回は、
cssプロパティ
outline の説明です。

outlineは、
線で文字や文章などを囲む
プロパティです。

画像blog-outline01

outlineは、
領域を持たないため、
自由に使う事ができます。


outlineには、
様々な線の種類が
用意されています。


outlineは、
borderとよく似ていますが、
違いがあります。

outlineborder
ボックスモデル
としての領域
×
topだけ、など
1辺ずつ指定できる
×
画像を入れられる×
文字や画像と重なる×
マイナス指定できる×
自由度が高い×
outlineborder

プロパティoutlineの種類は、
4種 + 一括指定があります。

(1)outline-style = 線の種類
(2)outline-color = 色
(3)outline-width = 太さ
(4)outline-offset = 線の位置

(5)outline    = 一括指定

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティoutlineの説明

outlineとは

outlineは、
線で文字や文章などを囲む
プロパティです。

画像blog-outline01

outlineは、
topだけ、bottomだけ
などの1辺だけ使うということは
できず

四方の囲み線でしか
使えません。

しかし
outlineは、
領域を持たないため

borderと比べ
かなり自由にあつかえます。

プロパティoutlineの種類

プロパティoutlineの種類は、
4種 + 一括指定があります。

(1)outline-style = 線の種類
(2)outline-color = 色
(3)outline-width = 太さ
(4)outline-offset = 線の位置

(5)outline    = 一括指定

(1)outline-style = 線の種類

outline-styleは、
線の種類を指定します。

種類は以下の通りです。

none表示されず、太さも0
auto機種依存の線
どのような線に
なるかは
ブラウザ、OSしだい
(太さ変更不可)
solid1本線
double2本線
groove立体な凹線
ridge立体な凸線
inset立体な凹線(四方用)
outset立体な凸線(四方用)
dashed破線
dotted点線

(2)outline-color = 色

outline-colorは、
色を指定します。

指定方法は5種類

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent太さは
そのままに透明
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
色指定できるプロパティ同士で
色を使いまわせるプロパティです。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への
使い回しはできますが、

兄弟要素では、
できません。

(3)outline-width = 太さ

outline-widthは、
線の太さを指定します。

指定方法は2種類

名称指定(細い)thin
(普通)medium
(太い)thick
数値px
em
など

(4)outline-offset = 線の位置

outline-offsetは、
線の位置を決めます。

プラスとマイナスの
指定ができます。

プラス  = 広がる
マウナス = せばまる

outline-offset = 0

画像blog-outline14

outline-offset = プラス

画像blog-outline15

outline-offset = マイナス

画像blog-outline16

(5)outline = 一括指定

outline-style、outline-color、outline-widthを
1行にまとめることもできます。

注意)
outline-offsetは、
一括指定へ入れることはできない。

(例)
outline-style: solid;
outline-color: lightgreen;
outline-width: 50px;

↓1行にまとめると↓

outline: solid lightgreen 50px;

cssプロパティoutlineの具体例

outline-style 線の種類

none 非表示、太さも0
画像blog-outline17
auto 機種依存(太さは変更不可)
画像blog-outline02
solid 1本線
画像blog-outline03
double 2本線
画像blog-outline04
groove 立体な凹線
画像blog-outline05
ridge 立体な凸線
画像blog-outline06
inset 立体な凹線(四方用)
画像blog-outline07
outset 立体な凸線(四方用)
画像blog-outline08
dashed 破線
画像blog-outline09
dotted 点線
画像blog-outline10

outline-width = 線の太さ(名称指定)

thin(細い)
画像blog-outline11
medium(普通)
画像blog-outline12
thick(太い)
画像blog-outline13

まとめ

outlineとは

outlineは、
線で文字や文章などを囲む
プロパティ。

画像blog-outline01
自由度高い

outlineは、
領域を持たないため、
自由に使う事ができる。

outlineは、4種+一括指定

プロパティoutlineの種類は、
4種 + 一括指定がある。

(1)outline-style = 線の種類
(2)outline-color = 色
(3)outline-width = 太さ
(4)outline-offset = 線の位置

(5)outline    = 一括指定

outline-offsetは一括指定に含まれない

outline-offsetを、
一括指定へ入れることはできない。

以上、
outline
の話でした。

ありがとうございました。

タイトルとURLをコピーしました