サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

輪郭線をカスタマイズする(CSS:outline)

輪郭線をカスタマイズする(CSS:outline)

この記事にはプロモーションが含まれています。

お問い合わせフォームをクリックすると、通常であれば枠線が表示されます。
これはborder(境界線)ではなく、outline(輪郭線)です。よく似ているCSSプロパティですが、全く異なるCSSプロパティなので、特にフォームの枠線をカスタマイズしたい場合には注意が必要です。

今回は、そんな輪郭線を指定するCSS、outlineプロパティを紹介していきます。

– 目次 –

動画内容:要素の輪郭線

輪郭線と境界線の違い

要素の枠と言えば真っ先に思い浮かぶのは、borderプロパティだと思います。

ですが、実は要素に枠線を表示させるCSSプロパティはもう1つあって、それがoutlineプロパティです。
どちらも要素の外側に枠線をつけるという意味ではほとんど変わりませんが、borderで表示される線は境界線、outlineで表示される線は輪郭線と呼ばれています。

では、境界線と輪郭線はどう違うのでしょうか?試しに、borderプロパティで枠線を表示したものと、outlineプロパティで枠線を表示したものを並べてみましょう。

*borderで枠線を表示*

*outlineで枠線を表示*

…見事なまでに同じ表示結果ですね。ただ、borderプロパティとoutlineプロパティは、正真正銘まったく別のCSSプロパティです。

その証拠に、この2つのプロパティには以下のような大きな違いがあります。

*borderとoutlineの違い*
outlineは上下左右の枠線を全て表示させることしかできない
borderプロパティは、border-top、border-leftなどを使うことで、枠線の一部だけを表示させることができますが、outlineプロパティではそれができません。

具体例を見ていきましょう。borderプロパティならば以下のような表示が可能ですが…

*borderで枠線を一部表示*

outlineプロパティでは四辺全ての枠線が表示されます。

*outlineで枠線を表示(枠の色やスタイルは変更できます)*

このように、普段使いならば圧倒的にborderプロパティの方が使いやすく、カスタマイズの自由度が高いです。
「だったら何のためにoutlineプロパティは存在しているの?」と思うかもしれませんが、全く別のプロパティだからこそ、共存(同時に表示)させることが可能になっています。(下のサンプルを参照)

*borderとoutlineで枠線を表示*

ちょっと応用的なテクニックですし、そんなに頻繁に使う機会があるわけではないですが、覚えておくとCSSによるデザインの幅が広がるのは間違いありません。

    POINT!
  1. ・枠線の表示には境界線(border)と輪郭線(outline)がある!
  2. ・borderでは枠線の一部表示や角を丸めることが可能だが、outlineではそれができない!
  3. ・borderとoutlineは異なるCSSプロパティなので、同時に表示させることも可能!

outlineプロパティの値

outlineプロパティは、borderプロパティと同じく、枠線のスタイル(outline-style)・枠線の色(outline-color)・枠線の太さ(outline-width)を一括できるプロパティであり、値もこの3種ということになります。

*outlineの値*

説明
outline-style枠線の種類。solid(普通の線)、dashed(破線)、dotted(点線)など
outline-color枠線の色。red(赤)、#ffff(カラーコードの白)、rgb(0,0,0)(RGB値の黒など)
outline-width枠線の太さ。10px、1rem、thin(細線)、thick(太線)など。

borderプロパティの設定と同じく、それぞれに対応する値の間を半角スペースで区切って記述します。
,(カンマ)で区切るわけではないので注意してください。
例)p { outline: solid red 10px; }

下に、outlineプロパティの値を任意で変更できるサンプルを用意したので、表示の違いを確認してみてください。

この周りに輪郭線が表示されます。

outline-style

outline-color

outline-width

基本的には、outlineの値は、borderの指定と全く同じと思って大丈夫です。outline-topとか、outline-radiusなんていうプロパティはありませんが、四辺を全て一括表示する場合の値において言えば、違いは特にありません。

また、borderプロパティもそうなのですが、outline-colorやoutline-widthに該当する値がしっかり設定されていても、outline-styleに該当する値が未指定だと枠線は表示されません。
outline-styleに関しては初期値が「none」なので、指定が必須となっています。(outline-colorとoutline-styleは未指定でも枠線は表示されます)

    POINT!
  1. ・outlineプロパティの値は、枠線のスタイル、色、太さの3種類!
  2. ・値の指定の仕方は、基本的にborderプロパティと同じ!
  3. ・outline-styleに該当する値は指定が必須!(初期値が非表示の「none」であるため)

フォームの枠線をカスタム

多くのWebサイトに設置されているお問い合わせフォームですが、主要なブラウザでは、フォーカスするとデフォルトで枠線が表示される設定になっています。

用語解説:フォーカス(focus)

百聞は一見にしかずということで、まずは下のフォームをクリック(タップ)してみてください。外側に枠線が表示されます。

こういったフォームをクリックすると現れる枠線ですが、これはborderではなくoutlineプロパティによる枠線の出現です。
なので、フォーカス時の枠線をカスタマイズしたいなら、borderではなくoutlineプロパティを設定する必要があります。

たとえば、フォーカス時の枠線を非表示にしたい場合は、フォームをセレクタに指定した上で、{ outline: none !important; }と指定すればOKです。
フォーカスが外れている(選択されていない状態)の時の枠線は、outlineではなくborderですし、フォーカスされた時もborderの線が消えるわけではないので、outlineをnone(非表示)に固定しても枠線が全て消えてしまうことはありません。
下のサンプルは、outline: none;でフォーカス時の枠線を消したものです。

また、フォーカス時の枠線の色を変えたい場合は、対象に{ outline-color: red !important; }と設定することで、実装できます。(下のサンプルをクリックしてみてください。)
※ブラウザやデバイスによっては、{ outline: solid red; }というふうに、outline-styleも併せて設定しないと効かない場合があります。

同じ要領で、フォーカス時の枠線のスタイルを変更したい場合は、対象にoutline-styleを設定すればOKです。…と言いたいところですが、outline-styleは設定した時点で枠線が表示されてしまいます。

そのため、少し面倒臭いですがちゃんと擬似クラスの:focusでセレクタを指定を行い、CSS調整を行う必要があります。

	<input type="text" class="sample_outline_focus">    

	.sample_outline_focus:focus {
	  outline-style: dashed;
	}

用語解説:擬似クラスとは?

フォーカス時の挙動はブラウザによって異なるので、カスタマイズをし過ぎると想定しないような表示になることもあり得るので注意が必要ですが、フォーカス時の強制枠線表示を消す程度であればリスクは少ないですし、割とよく使うテクニックかと思います。

    POINT!
  1. ・フォームがフォーカスされた時に現れる枠線は、borderではなくoutline!
  2. ・outlineプロパティを指定することで、フォームがフォーカスされた時の枠線をカスタムできる!
  3. ・outline-styleをカスタムしたい場合は、擬似クラスの:focusを使うべし!

便利なoutline-offset

borderとoutlineでは、borderの方がカスタマイズの自由度が高くて使いやすいのですが、outlineプロパティにしかない強みもあります。
それが、outline-offsetプロパティの存在です。

要素と境界線(border)の間隔を広げるには、paddingプロパティを適用させればよいですが、逆に言うとborderの場合はpaddingを使うしか選択肢がありません。

一方、outlineプロパティであればpaddingだけでなく、outline-offsetプロパティで間隔を広げることが可能なのです。

要素の内側の余白を広げずに枠線と要素の間隔を広げられるので、極端な例ですが、レイアウトを崩すことなく枠線と他の要素を被らせることも可能です。

また、borderと合わせて、種類や色の異なる二重線を作ることもできます。

内側がborderの線、外側がoutlineの線。

	<p>内側がborderの線、外側がoutlineの線。</p>    

	p {
	    width: fit-content;
	    margin: 2rem auto;
	    border: solid darkblue;
	    padding: 20px;
	    outline: dotted darkorange;
	    outline-offset: 10px;
	}

また、輪郭線(outline)と境界線(border)の間の空間の色は、透明です。
輪郭線を指定した要素と同じ背景色になるのではなく、輪郭線を指定した親要素と同じ背景になるので、背景色を変えたい場合は少し注意が必要です。

また、outline-offsetの値は、pxやremなど数値+単位を使った一般的な距離の指定方法になりますが、%(パーセント)は使用できないので、paddingと全く同じようには指定できません。

    POINT!
  1. ・outlineはoutline-offsetプロパティで、要素との間隔を空けられる!
  2. ・要素の内側の余白(padding)を広げるわけではないので、間隔を空けてもレイアウトが崩れない!
  3. ・境界線(border)と組み合わせて、種類や色が異なる二重線にすることも可能!

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      p {
        padding: 20px;
        width: fit-content;
        margin: 200px auto;
      }
      input {
        display: block;
        margin: 100px auto;
      }
      .outline1 {
        outline: solid black;
      }
      .outline2 {
        border: solid blue;
        border-radius: 50%;
        outline: dashed red;
      }
      .outline_form:focus {
        outline-style: none;
      }
      .outline3 {
        border: dashed darkorange;
        outline: solid red;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <p class="outline1">輪郭線を表示</p>

    <p class="outline2">境界線と輪郭線を表示</p>

    <input type="text" name="" value="" placeholder="デフォルトのフォーム">

    <input class="outline_form" type="text" name="" value="">

    <p class="outline3">outline-offsetを利用してborderと合わせて二重の枠線に。</p>
  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン