【14】borderとよく似た outlineはレイアウトを崩さない
最終更新日:2017年11月14日 (初回投稿日:2015年12月17日)
borderプロパティのついでに、今回は borderとよく似た outlineプロパティ について。
outlineは、borderと同じように要素の外枠を表示します。
outline の border との最大の違いは ボーダー領域ができない こと。
(なので、outlineプロパティは「ボックスモデル」じゃなくて「ユーザーインターフェイス」のプロパティなんですが、せっかくだからついでに)
これ、普段からけっこう目にしているんですよ。
例えば、リンクをクリックした時に残る点線の囲み罫が outlineプロパティのブラウザデフォルト。
フォームの部品を触ったときに出る枠も outlineによるブラウザデフォルトのスタイルです。
outline はボーダー領域を作らない
下の2つのテキスト入力欄をクリックしてみてください。
上(outline)だと外枠が出ても他のレイアウトに影響が出ません。
下(border)だと外枠が出ると要素がガクッと下がるのがわかりますね。
border だと、ボーダー領域ができるので、その分それ以降の要素もズレます。
outlineはボーダー領域を作らない(レイヤーで浮いた状態って言うのかな)。だからスペースができなくて、レイアウトに影響を及ぼしません。これが outline の特徴です。
それでクリック時や フォーカス時に使われているんですね。レイアウトを崩さないから。
上のサンプルの HTMLはこちら。
<div id="smp1_1">
<input type="text" size="20" placeholder="クリックで outline の外枠"><br>
<input type="text" size="20" placeholder="クリックで border の外枠" id="smp1_1bdr">
</div>
CSSはこちら。
div#smp1_1 input {margin:0 0 1em} /*outlineの指定をしなくてもデフォルトでoutlineが付きます*/
div#smp1_1 input#smp1bdr:focus {border:solid 10px #f9c; outline:none}
outline は上下左右の区別無し
outline の指定のしかたは、スタイルも太さも色指定も border とほぼ同じです。
ただ、border と違うのは、上下左右の区別が無いこと。全部同じスタイル・色・太さでしか指定できません。
ま、レイアウト用というより、ユーザの使い勝手のための表示用なので、上下左右を変える必要性は無いということなんでしょうね。
outlineのプロパティと値の一覧
outline のプロパティの一覧と、その値です。
上下左右の区別が無いのでプロパティも少なめ。それ以外はborderとほぼ同じような指定です。
プロパティ | 概要 | 値 |
---|---|---|
outline-style | スタイル | border-styleと同じ(hiddenは無いけど) none, solid, dotted, dashed, double, groove, ridge, inset, outset。デフォルト値はnone |
outline-color | 色 | 色の指定。invert(地色を反転) デフォルト値はブラウザが invert をサポートしていればinvert、それ以外では currentColor |
outline-width | 太さ | 単位付きで数値。またはキーワードmedium, thin, thick(border-widthと同じ)デフォルト値はmedium |
outline-offset | 外側に離す距離 | 単位付きで数値。またはinherit(親を継承)デフォルト値は0。 CSS3から追加されたプロパティ |
outline | ショートハンドプロパティ | outline-styleの値、outline-colorの値、outline-widthの値を「半角スペース」で区切ってまとめる。順不同 (outline-offset の値はショートハンドに入りません) |
値の継承 | なし | 適用できる要素 | 全部 |
---|
outline は borderプロパティと同じスタイル・色・太さの値なので、プレビューは【13-1】borderと borderのショートハンド でご確認ください。
CSS3で追加された outline-offset
border との違いはもう1つ。 outline-offsetプロパティがあること。
これは要素の外側に余白を取ってアウトラインを配置できます。CSS3から追加されました。
このoutline-offset は、残念ながら現時点(2015年12月)で IEで非対応なんだって。IE 11 でもダメだって。IE以外のブラウザならOK。
サンプルを見てください。マウスオーバーもしてみてください。(IE以外のブラウザで見てね)
outline-offsetなし
outline-offsetあり
サンプルでは要素の領域が分かりやすいように border も指定しています。
border の外側に outline が付くのがわかりますね。
そして、outline-offset を指定すると、レイアウトが崩れること無く、要素との間に余白ができてアウトラインが外側に広がります。
上のサンプルの HTMLはこちら。
<div id="smp2_1">
<p>outline-offsetなし</p>
<p id="smp2_1offset">outline-offsetあり</p>
</div>
CSSはこちら。
div#smp2_1 p {
margin:0 0 2em;
border:solid 1px #ccc;
width:60%;
padding:0.5em;
outline:solid 5px #0cc;}
div#smp2_1 p:hover {outline-offset:3px;}
div#smp2_1 p#smp2_1offset {outline-offset:3px;}
div#smp2_1 p#smp2_1offset:hover {outline-offset:0;}
outline-offset は、ショートハンドプロパティ「outline」に含ませることができません。
ですのでコイツだけは単独で追加指定することになります。
outline:solid 5px #0cc;
outline-offset:3px; /*ショートハンドに入れられないので単独で*/
やっぱり outline-style があれば表示される
borderとの違いを比較してきた outline ですが、基本はやっぱりoutline-styleプロパティ。
borderのときと同じように outline-style さえ指定してあればアウトラインが表示されます。
その場合、border のときとまったく同じで、太さはデフォルトの medium(3px)になります。
色はデフォルトが invert(地色を反転)なんですが、この invert をサポートしているブラウザはまだ少ないみたい。ブラウザが invert をサポートしてなければ border と同じく currentColor(文字色)になります。
★注意★
ブラウザが invert をサポートしていないのに、あえて outline-style: invert を指定すると、ブラウザは単なる無効値と解釈して、アウトラインが表示できないそうです。
当分わざわざ書かないほうがイイね。
サンプルです。outline-style を指定しただけでアウトラインが出現
上のサンプルの HTMLはこちら。
<p id="smp2_3">サンプルです。outline-style を指定しただけでアウトラインが出現</p>
CSSはこちら。
p#smp2_3 {
color:green; /*文字色をグリーンにしています*/
outline-style: solid; /*アウトラインのスタイルだけ指定*/
margin:2em 0;
text-align:center;
line-height:3em;}
outline と border の組み合わせ
outline は border と一緒に使うことができます。border の外側に表示されます。
(フォーム関連の要素では、デフォルトのスタイルによって borderを指定するとoutlineが表示されない場合があります)
画像の枠をちょっと加工してみたり。

CSSはこちら。
img#smp3_1 {
outline:1px solid #ddd; /*全体をグレーの細いoutlineで囲んでいます*/
border-top:1px solid #fff; /*上と*/
border-right:1px solid #fff; /*右に borderで白い線を入れています*/
background: #eee; /*背景色を薄いグレーに*/
padding:1em} /*paddingを指定して背景色を見せています*/
この↓ように、outline-offsetを使って二重線で囲むこともできますね。
サンプルです。マウスオーバーしてください
上のサンプルの HTMLはこちら。
<p id="smp3">サンプルです。マウスオーバーしてください</p>
CSSはこちら。
p#smp3_2 {
margin:2em 0;
text-align:center;
line-height:3em;
border:solid 2px #3cf; /*borderを指定*/
outline:solid 4px #3cf; /*outlineも指定*/
outline-offset:3px;} /*outline-offsetですき間を空ける*/
p#smp3_2:hover {
border-color:#ffe6e6; /*borderの色を変えてみた*/
outline:solid 8px #ffe6e6} /*outlineの色や太さを変えてみた*/
border は border-radius で角丸にできますが、outline はまだ無理みたい。(2015年12月記)
W3Cの仕様では「Outlines may be non-rectangular.(矩形じゃなくてもいい)」って書いてあるんですけどね。(CSS Basic User Interface Module Level 3 _ #outline-props)
border-radius が効くといいな
p#smp3_3 {
margin:1em 0;
text-align:center;
line-height:3em;
border:solid 2px #ffe6e6;
border-radius:15px;
outline:solid 4px #ffe6e6;
outline-offset:3px;}
moz系(Firefox)では「-moz-outline-radius」なんてのがあったんですが、もともとW3Cの非標準だったのが、とうとう削除されるそうです(参考:Firefox サイト互換性情報 )で「outline は border-radius の形に従うべき」ということなんですがね。
次回予告
いかがでしたか? ボーダー領域を作らない outline、けっこうレイアウトで使えそうですね。
次回からは、background関連のプロパティについて。
background はその名のとおり要素の背景を指定する、視覚的レイアウトでは不可欠なプロパティです。グレースケールのサイトでだって背景色は使うからね。
色、グラデーション、画像を指定できて、複数の画像を背景にしたり、画像とグラデーションの組み合わせもできます。
- 関連記事
-
- 【16-2】下限の min-width, min-height 上限の max-width, max-height
- 【16-1】幅の width、高さの heightプロパティ
- 【15-5】backgroundのショートハンド まとめ
- 【15-4】background関連のプロパティ(4/4 clip と origin)
- 【15-3】background関連のプロパティ(3/4 background-size)
- 【15-2】background関連のプロパティ(2/4 background-position)
- 【15-1】background関連のプロパティ(1/4)
- 【14】borderとよく似た outlineはレイアウトを崩さない
- 【13-2】border-imageと border-imageのショートハンド
- 【13-1】borderと borderのショートハンド
- 【12】paddingと paddingのショートハンド
- 【11-4】marginの相殺(margin collapsing)
- 【11-3】はみ出て便利♪ ネガティブ・マージン(Negative Margin)
- 【11-2】marginの auto という値の「?」を解決しておこう
- 【11-1】marginと marginのショートハンド
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク