【14】borderとよく似た outlineはレイアウトを崩さない

最終更新日:2017年09月23日  (初回投稿日:2015年12月17日)

borderプロパティのついでに、今回は borderとよく似た outlineプロパティ について。
outlineは、borderと同じように要素の外枠を表示します。
border と outline の最大の違いは、ボーダー領域ができるかできないか です。
border はボーダー領域ができるけど、outline はできない。
(なので、ボックスモデルじゃなくて、ユーザーインターフェイスのプロパティだけど、せっかくだからついでに)

これ、普段からけっこう目にしているんですよ。
例えば、リンクをクリックした時に残る点線の囲み罫が outlineプロパティのブラウザデフォルト。

クリックしてください(点線の囲み罫がoutline)

フォームの部品を触ったときに出る枠も outlineによるブラウザデフォルトのスタイルです。

本日のINDEX
  1. outline はボーダー領域を作らない
  2. outline は上下左右の区別無し
    1. outlineのプロパティと値の一覧
    2. CSS3で追加された outline-offset
    3. やっぱり outline-style があれば表示される
  3. outline と border の組み合わせ

outline はボーダー領域を作らない

下の2つのテキスト入力欄をクリックしてみてください。


上(outline)だと外枠が出ても他のレイアウトに影響が出ません。
下(border)だと外枠が出ると要素がガクッと下がるのがわかりますね。

border だと、ボーダー領域ができるので、その分それ以降の要素もズレます。
outlineはボーダー領域を作らない(レイヤーで浮いた状態って言うのかな)。だからスペースができなくて、レイアウトに影響を及ぼしません。これが outline の特徴です。
それでクリック時や フォーカス時に使われているんですね。レイアウトを崩さないから。

<div id="smp1_1">
<input type="text" size="20" placeholder="クリックで outline の外枠"><br>
<input type="text" size="20" placeholder="クリックで border の外枠" id="smp1_1bdr">
</div>
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 の値はショートハンドに入りません)
値の継承 なし 適用できる要素 全部

outlineborderプロパティと同じスタイル・色・太さの値なので、プレビューは【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 を指定すると、レイアウトが崩れること無く、要素との間に余白ができてアウトラインが外側に広がります。

<div id="smp2_1">
<p>outline-offsetなし</p>
<p id="smp2_1offset">outline-offsetあり</p>
</div>
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 を指定しただけでアウトラインが出現

<p id="smp2_3">サンプルです。outline-style を指定しただけでアウトラインが出現</p>
p#smp2_3 {
	color:green;   /*文字色をグリーンにしています*/
	outline-style: solid;   /*アウトラインのスタイルだけ指定*/
	margin:2em 0;
	text-align:center;
	line-height:3em;}

outline と border の組み合わせ

outline は border と一緒に使うことができます。border の外側に表示されます。
(フォーム関連の要素では、デフォルトのスタイルによって borderを指定するとoutlineが表示されない場合があります)

画像の枠をちょっと加工してみたり。

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を使って二重線で囲むこともできますね。

サンプルです。マウスオーバーしてください

<p id="smp3">サンプルです。マウスオーバーしてください</p>
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 はその名のとおり要素の背景を指定する、視覚的レイアウトでは不可欠なプロパティです。グレースケールのサイトでだって背景色は使うからね。
色、グラデーション、画像を指定できて、複数の画像を背景にしたり、画像とグラデーションの組み合わせもできます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.