TECH I.S.

CSSのoutlineの使い方と種類について解説


アウトラインは、要素の境界線の外側に描かれた線です。


この要素には、黒い境界線と幅 10px の緑のアウトラインがあります。

自分で試してみる »



CSSの概要

アウトラインは、要素を「目立たせる」ために、境界線の外側で要素の周りに描かれる線です。

CSS には、次のアウトライン プロパティがあります。

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

ノート:アウトラインが異なります国境!境界線とは異なり、アウトラインは要素の境界線の外側に描画され、他のコンテンツと重なる場合があります。また、アウトラインは要素の寸法の一部ではありません。要素の幅と高さの合計は、アウトラインの幅の影響を受けません。


CSS アウトライン スタイル

outline-styleプロパティはアウトラインのスタイルを指定し、次のいずれかの値を持つことができます:

  • dotted- 点線のアウトラインを定義します
  • dashed- 破線のアウトラインを定義します
  • solid- 実線を定義します
  • double- 二重アウトラインを定義します
  • groove- 3D の溝付きアウトラインを定義します
  • ridge- 3D 隆起したアウトラインを定義します
  • inset- 3D インセット アウトラインを定義します
  • outset- 3D アウトセット アウトラインを定義します
  • none- アウトラインを定義しない
  • hidden- 非表示のアウトラインを定義します

次の例は、異なるoutline-style値:

さまざまなアウトライン スタイルのデモ:

p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;}

結果:

点線の輪郭。

破線のアウトライン。

しっかりとした輪郭。

二重のアウトライン。

グルーブの輪郭。効果は、outline-color の値によって異なります。

尾根の輪郭。効果は、outline-color の値によって異なります。

差し込みアウトライン。効果は、outline-color の値によって異なります。

冒頭の概要。効果は、outline-color の値によって異なります。

自分で試してみる »

ノート:他のアウトライン プロパティ (次の章で詳しく説明します) は、outline-style物件が決まりました!



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細