
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
ITコラム
2017.04.17
outlineプロパティは、アウトラインのスタイル、太さ、色をまとめて指定できるプロパティです。
borderプロパティと同じように要素の外枠を表示しますが、outlineプロパティは、上下左右にそれぞれ線を引くのではなく、囲み線として設置します。ボーダーよりも、簡便に囲み線を付けるイメージです。
今回は、このoutlineプロパティについてまとめたいと思います。
1.outlineプロパティ
2.borderプロパティとの違い
outlineプロパティは、ボックスのアウトラインをまとめて指定するショートハンドプロパティです。
アウトラインを指定するプロパティには、次のようなものがあります。
outline-style スタイルを指定する 値:none(デフォルト値)、solid、dotted、dashed、double、groove、ridge、inset、outset
outline-color 色を指定する 値:invert(地色を反転)、currentColor
デフォルト値は、ブラウザがinvertをサポートしていればinvert、サポートしていなければcurrentColoroutline-width 太さを指定する 値:medium(デフォルト値)、thin、thick、単位付きの数値
outline-offset 外側に離す距離を指定する(CSS3から追加されたプロパティ) 値:単位付きの数値(デフォルト値は0)、inherit(親を継承)
outline アウトラインのショートハンドプロパティ
但し、outline-offsetの値はショートハンドで指定不可
outlineプロパティの値は、継承されません。
また、outlineプロパティは、全ての要素で使用できます。
outlineプロパティは、要素の外枠を作るという点でborderプロパティと共通していますが、次の3つの違いがあります。
●outlineプロパティは表示のためのスペースをとらない
●outlineプロパティには上下左右の区別がない
●CSS3から追加されたoutline-offsetプロパティ
次の入力欄は、上がoutlineプロパティ、下がborderプロパティを使って作成されたものです。
入力欄でクリックしてみて下さい。
アウトライン(上)は、クリックして外枠が表示されても、他のレイアウトに影響はありません。
ボーダー(下)は、クリックして外枠が表示されると、ボーダー領域の分だけ他に影響を及ぼします。
ソースは次の通りです。
(CSS)
div#sample input {margin:0 0 1em;}
div#sample input#s_bd:focus {border:solid 10px #31A9EE; outline:none;}(HTML)
<div id=”samle”>
<input type=”text” placeholder=”outlineプロパティで作成した外枠”><br>
<input type=”text” placeholder=”borderプロパティで作成した外枠” id=”s_bd”>
<div>
input要素の入力欄(input type=”text”)は、クリック時やフォーカス時にデフォルトでアウトラインが付くため、ここでは特にoutlineプロパティの設定はしていません。
borderプロパティで外枠を設置すると、ボーダー領域ができるため、その分それ以降の要素の位置が変わります。
outlineプロパティで外枠を設置すると、ボーダー領域のようなスペースは生じないため、他のレイアウトに影響が出ません。
この点が、outlineプロパティの大きな特徴です。
outlineプロパティの指定方法は、スタイルも太さも色指定も、borderプロパティとほぼ同じです。
ですが、outlineプロパティには、上下左右の区別がありません。
この点も、outlineプロパティの大きな特徴です。
上下左右とも全て同じスタイル、色、太さの指定となります。
CSS3からoutline-offsetプロパティが追加されました。
outline-offsetプロパティは、アウトラインのオフセット値を指定する際に使用します。
アウトラインは、デフォルトではボーダー領域のすぐ外側に表示されますが、outline-offsetプロパティを使うと、ボーダー領域から離してオフセット表示することができます。
outline-offsetプロパティでは、ボーダー領域の端からアウトラインを離す距離を指定します。デフォルト値は0です。
次の表示は、上がoutline-offsetプロパティの指定のないもの、下がoutline-offsetプロパティの指定があるものです。
マウスオーバーしてみて下さい。
outline-offsetなし
outline-offsetあり
要素の領域が分かりやすいように、borderプロパティも指定しています。
ボーダーの外側にアウトラインが付くのが確認できます。
そして、outline-offsetプロパティを指定すると、他のレイアウトに影響を及ぼさずに、要素との間にスペースができます。
ソースは次の通りです。
(CSS)
div#sample p {
margin:0 0 2em;
border:solid 1px #AAA;
width:60%;
padding:0.5em;
outline:solid 5px #31A9EE;}
div#sample p:hover {outline-offset:3px;}
div#sample p#s_os {outline-offset:3px;}
div#sample p#s_os:hover {outline-offset:0;}(HTML)
<div id=”sample”>
<p>outline-offsetなし</p>
<p id=”s_os”>outline-offsetあり</p>
<div>
outline-offsetプロパティは、ショートハンドプロパティのoutlineプロパティで指定することができません。
ですので、
outline:solid 5px #31A9EE;
outline-offset:3px;
のように、アウトラインのプロパティの中でoutline-offsetプロパティだけは、単独で別途指定する必要があります。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.