HTML & CSS

リファレンス

CSS

アウトライン ウィズ

outline-widthプロパティ

アウトラインの幅を指定するプロパティです。

  • 初期値

    medium

  • 継承

    不可

  • 適用できる要素

    全要素

次の値を太さとして指定することができます。

  • thin – アウトラインを細く表示。
  • medium – アウトラインを通常の太さで表示。初期値。
  • thick – アウトラインを太く表示。
  • 数値 + 任意の単位 – 「px」や「em」等、任意の単位で指定した太さで表示。

上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。


アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。親要素のmarginプロパティpaddingプロパティの領域に重なる点に注意してください。

アウトラインの表示領域

パターン1

アウトラインの太さに「thin」を指定している例です。

CSSコード例

<style>
.element1 {
	outline-width: thin;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element1"></p>

表示例:

thinを指定した例

パターン2

アウトラインの太さに「medium」(初期値)を指定している例です。

CSSコード例

<style>
.element2 {
	outline-width: medium;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element2"></p>

表示例:

mediumの指定例

パターン3

アウトラインの太さに「thick」を指定している例です。

CSSコード例

<style>
.element3 {
	outline-width: thick;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element3"></p>

表示例:

thickの指定例

パターン4

アウトラインの太さに「thick」を指定している例です。

CSSコード例

<style>
.element4 {
	outline-width: 20px;
	outline-style: solid;
	outline-color: #5cb7ff;
}
</style>
<p class="element4"></p>

表示例:

任意の値を指定した例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。