【13-1】borderと borderのショートハンド

border(ボーダー)は、margin や padding と違ってサイズ(線の太さ)だけでなく、
線のスタイル線の色も指定できます。
ですのでショートハンドプロパティもたくさんあって、ちょっとだけ複雑。でも難しくはありません。

よく使うショートハンドプロパティは border
上下左右全部同じ線なら、このプロパティだけ覚えておけば十分です。

上の線だけ他の線と違うものにしたい場合は、border-top というショートハンドプロパティを、
右だけなら border-right
下だけなら border-bottom
左だけなら border-left というショートハンドプロパティを使えばOK。
ここまでの赤字のモノだけ覚えておけば、他のプロパティは使わなくてもイケルはず。

ただ、ボーダーの決まり事を知るために、ボーダーに用意されている全部のプロパティをキチンと知っておいたほうがイイので、今回は基本的なことからみっちり見ていきましょう。

本日のINDEX
  1. border について
    1. border-style さえあればボーダーが表示される
    2. borderのプロパティ一覧
  2. スタイルを指定(border-styleの値)
    1. border-style のショートハンド
  3. 太さを指定(border-widthの値)
    1. border-width のショートハンド
  4. 色を指定(border-colorの値)
    1. border-color のショートハンド
  5. 上下左右全部同じボーダーの場合のショートハンド
  6. 上下左右のボーダーを別々に指定する場合のショートハンド
  7. (おまけ)borderを使って小ちゃい三角形を作る

border について

border は、ボックスの外側につく枠線です。

border も上下左右にありますので
border-top border-bottom border-left border-right という4つのプロパティがあります。

その前に、border「スタイル」「太さ」「色」が指定できるので、まず基本の border-style border-width border-color という3つのプロパティがあります。

ここまでの7つのプロパティは、ショートハンドプロパティ(複数のプロパティの値をまとめて書けるプロパティ)です。

これらのショートハンドプロパティの関係をまとめてみたのがこちらの図。
これは、上下左右のボーダーが全部同じ場合のショートハンドです。
(上下左右全部同じなら border プロパティで1つにまとめられるという例です)

border-style さえあればボーダーが表示される

ボーダーは、border-style さえ指定すれば表示されます。
border-style が要(かなめ)だってことをぜひ覚えておきましょう。

ボーダースタイルには、実線・点線・破線・二重線などがあります。(サンプルは後ほど)
border-style だけ指定された場合、ボーダーの太さ(border-width)と色(border-color)はデフォルト値になります。

太さ(border-width)のデフォルト値は medium(3px)
色(border-color)のデフォルト値は currentColor(要素のcolor(=文字色))です。

サンプルです。border-style を指定しただけでボーダーが出現します♪

<p>サンプルです。border-style を指定しただけでボーダーが出現♪</p>
<style scoped>
p {
	color: green;   /*←この文字色が、border-color のデフォルトになります*/
	border-style: solid;  /*←border-style だけしか指定していません*/
	margin:2em 0;
	text-align:center;
	line-height:3em;}
</style>

border-style のデフォルト値は、実線かと思ったら none(無し)なんです。
ブラウザのデフォルトスタイルでボーダーが無い要素は、この初期値になっているってことですね。
なので、ボーダー指定されている要素を ボーダー無しにしたいときは、
border-style: none を指定します。(border-style: hidden でも同じ結果になります)

margin や padding を「無し」にしたいときは「0」を指定しました。
これは、margin や padding は距離(スペースの幅というか太さ)を指定するものだから。
それにつられて border を無しにしたいとき「border-width:0」なんて指定してもムダ
border-widthに 0は指定できません(マイナスの数値も)。
border はスタイルが基本なので、ボーダー無しにしたいなら「border-style:none」が正解。
(ショートハンドを使って「border:none」でもいけます)

borderのプロパティ一覧

borderは、上・下・左・右と、スタイル・太さ・色を指定するプロパティがあるので、marginやpaddingと比べたら、いっぱいプロパティがあります。

というわけで、まずは borderに関するプロパティを一覧にしてみました。
青字になっているのがショートハンドプロパティです。

線のスタイル
(style)
border-top-style 上のスタイル
border-right-style 右のスタイル
border-bottom-style 下のスタイル
border-left-style 左のスタイル
border-style 上下左右のスタイルの ショートハンドプロパティ
上下左右のスタイルが全部同じ場合、これでまとめる。
線の太さ
(width)
border-top-width 上の太さ
border-right-width 右の太さ
border-bottom-width 下の太さ
border-left-width 左の太さ
border-width 上下左右の太さの ショートハンドプロパティ
上下左右の太さが全部同じ場合、これでまとめる。
線の色
(color)
border-top-color 上の色
border-right-color 右の色
border-bottom-color 下の色
border-left-color 左の色
border-color 上下左右の色の ショートハンドプロパティ
上下左右の色が全部同じ場合、これでまとめる。
スタイル・
太さ・
色をまとめる
ショートハンド
プロパティ
border-top 上の線の ショートハンドプロパティ
上の線のスタイル・太さ・色をまとめて指定。
border-right 右の線の ショートハンドプロパティ
右の線のスタイル・太さ・色をまとめて指定。
border-bottom 下の線の ショートハンドプロパティ
下の線のスタイル・太さ・色をまとめて指定。
border-left 左の線の ショートハンドプロパティ
左の線のスタイル・太さ・色をまとめて指定。
border 上下左右全部の ショートハンドプロパティ
上下左右の線のスタイル・太さ・色をまとめて指定。

上記の他にも、borderがらみのプロパティがあります。

● border-image(線に画像を使用)
borderに画像を使えます。こちらは次回やります。今回長過ぎるので。

● border-collapse と border-spacing(テーブル専用)
これは、table関連の専用プロパティです。
border-collapseは、テーブルセルのボーダーをくっつけるか空けるか指定。
border-spacingは、テーブルセルやテーブルのボーダーどうしの間隔を数値で指定します。
(これらはいずれ、テーブル専用のCSSでまとめます)

● border-radius(ボックスの角丸)
こちらは [18-1] CSS3で、ボックス要素を角丸にしよう(border-radius)
で詳しくメモっていますので、ご覧ください。

では、borderの「スタイル・太さ・色」の指定に使える「値」を順に見ていきましょう。

スタイルを指定(border-styleの値)

border-styleプロパティで borderのスタイルを指定するだけで borderは表示されます。
border-styleだけしか指定していなければ、太さはデフォルトのmedium(3px)、色はデフォルトのcurrentColor(要素のcolorプロパティの色 = 文字色)になります。
というわけで、borderを指定したいなら、border-styleは必須
ほかの border-color、border-width は無くてもデフォルト表示されるというわけです。

border-style の値 には以下のものがあります。

none borderは無し。これがデフォルト値です。
borderを付けたい時はこの none(とhidden)以外の値を指定します。
hidden borderは非表示。太さを指定しても領域そのものが無くなり、noneと同じ結果です。
solid 実線
dotted 点線
dashed 破線
double 二重線。3px以上の太さにしないと二重線に見えません。
groove 線がくぼんで見える。2px以上の太さが必要です。
ridge 線が盛り上がって見える。2px以上の太さが必要です。
inset 上と左、右と下の線の濃度を変えて、ボックスをくぼんで見えるようにします。
outset 上と左、右と下の線の濃度を変えて、ボックスを盛り上がって見えるようにします。
値の継承 なし 適用できる要素 全部

プレビューです。
border-style 以外は無指定なので、太さはデフォルトの3px、
色はcurrentColor = 文字色(本ブログでは#666)です。

border-style: none

border-style: solid

border-style: dotted

border-style: dashed

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

<div>
<p style="border-style:none">border-style: none</p>
<p style="border-style:solid">border-style: solid</p>
<p style="border-style:dotted">border-style: dotted</p>
<p style="border-style:dashed">border-style: dashed</p>
<p style="border-style:double">border-style: double</p>
<p style="border-style:groove">border-style: groove</p>
<p style="border-style:ridge">border-style: ridge</p>
<p style="border-style:inset">border-style: inset</p>
<p style="border-style:outset">border-style: outset</p>

<style scoped>
div {padding:0; margin:0; border:solid 1px #ccc;}
div p {margin:2em; text-align:center; line-height:2em;}
</style>
</div>

border-style のショートハンド

border の上下左右のスタイルを別々に指定することもできます。
上のサンプルでも使っているborder-styleショートハンドプロパティを使います。
ルールは、margin や padding のときと同じです。

値が1つで「上下左右」全部同じ

値が2つで「上下」「左右」

値が3つで「上」「左右」「下」

値が4つで「上」「右」「下」「左」

border-style:noneを使った例

<div>
<p style="border-style:solid">値が1つで「上下左右」全部同じ</p>
<p style="border-style:dotted solid">値が2つで「上下」「左右」</p>
<p style="border-style:dotted outset dashed">値が3つで「上」「左右」「下」</p>
<p style="border-style:dotted solid groove double">値が4つで「上」「右」「下」「左」</p>
<p style="border-style:none none none solid">border-style:noneを使った例</p>

<style scoped>
div {padding:0; margin:0; border:solid 1px #ccc;}
div p {margin:2em; text-align:center; line-height:2em;}
</style>
</div>

太さを指定(border-widthの値)

太さの指定には border-widthプロパティを使います。
border-width の値 には以下のものがあります。

medium デフォルト値。太さの指定が無ければ、自動的にこの値になります。
メディウム(中くらい)の太さって意味ですが、3pxです。
thin ティン(細い)って意味。1px。
thick ティック(太い)って意味。5px。
数値 数値に単位を付けて、相対値や絶対値で指定します。(2px とか 0.5em とか)
*%での指定はできません(%で指定するとデフォルトの medium になります)
*0やマイナスの数値は指定できません
値の継承 なし 適用できる要素 全部

各「値」のプレビューです。
border-style は solid にしています。
色は指定していないのでデフォルトのcurrentColor = 文字色(本ブログでは#666)です。

border-widthの指定無し(デフォルトのmediumになります)

border-width: medium

border-width: 3px

border-width: thin

border-width: 1px

border-width: thick

border-width: 5px

border-width: 0.5em

border-width: 1vmin

<div>
<p>border-widthの指定無し(デフォルトのmediumになります)</p>
<p style="border-width:medium">border-width: medium</p>
<p style="border-width:3px">border-width: 3px</p>
<p style="border-width:thin">border-width: thin</p>
<p style="border-width:1px">border-width: 1px</p>
<p style="border-width:thick">border-width: thick</p>
<p style="border-width:5px">border-width: 5px</p>
<p style="border-width:0.5em">border-width: 0.5em</p>
<p style="border-width:1vmin">border-width: 1vmin</p>

<style scoped>
div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
</style>
</div>

border-width のショートハンド

border-width のショートハンドも、margin や padding のときと同じルールです。

値が1つで「上下左右」全部同じ

値が2つで「上下」「左右」

値が3つで「上」「左右」「下」

値が4つで「上」「右」「下」「左」

<div>
<p style="border-width:thin">値が1つで「上下左右」全部同じ</p>
<p style="border-width:thin medium">値が2つで「上下」「左右」</p>
<p style="border-width:thin medium thick">値が3つで「上」「左右」「下」</p>
<p style="border-width:thin medium thick 8px">値が4つで「上」「右」「下」「左」</p>

<style scoped>
div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
</style>
</div>

色を指定(border-colorの値)

色の指定には border-colorプロパティを使います。
border-color の値 は、CSSでの色指定の値が全部使えます。
その他、以下の値があります。

transparent 透明。rgba(0,0,0,0)と同じです。
currentColor これがデフォルト。要素のcolorプロパティの値(文字色)になります。
(これは別にこのプロパティだけじゃなく、色指定できる全プロパティに使える値です)
値の継承 なし 適用できる要素 全部

デフォルト値はcurrentColorなので、ボーダーの色指定をしなければ要素の文字の色になります。

各「値」のプレビューです。
border-style は solid に、border-width は無指定なのでデフォルトのmediumです。

border-colorの指定無し(デフォルトのcurrentColor(文字色)になります)

border-color: currentColor

border-color: transparent(透明)

border-color: #000

border-color: #adff2f

border-color: hotpink

border-color: rgba(0,191,255,0.7)

border-color: hsla(90,100%,20%,0.5)

<div>
<p>border-colorの指定無し(デフォルトのcurrentColor(文字色)になります)</p>
<p style="border-color:currentColor">border-color: currentColor</p>
<p style="border-color:transparent">border-color: transparent(透明)</p>
<p style="border-color:#000">border-color: #000</p>
<p style="border-color:#adff2f">border-color: #adff2f</p>
<p style="border-color:hotpink">border-color: hotpink</p>
<p style="border-color:rgba(0,191,255,0.7)">border-color: rgba(0,191,255,0.7)</p>
<p style="border-color:hsla(90,100%,20%,0.5)">border-color: hsla(90,100%,20%,0.5)</p>

<style scoped>
div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
/*border-widthは指定していないので、デフォルトのmediumになってます*/
</style>
</div>

border-color のショートハンド

border-color のショートハンドも、margin や padding のときと同じルールです。

値が1つで「上下左右」全部同じ

値が2つで「上下」「左右」

値が3つで「上」「左右」「下」

値が4つで「上」「右」「下」「左」

<div>
<p style="border-width:thin">値が1つで「上下左右」全部同じ</p>
<p style="border-width:thin medium">値が2つで「上下」「左右」</p>
<p style="border-width:thin medium thick">値が3つで「上」「左右」「下」</p>
<p style="border-width:thin medium thick 8px">値が4つで「上」「右」「下」「左」</p>

<style scoped>
div p {border-style:solid;}  /*←ここで border-styleを指定しています*/
/*border-widthは指定していないので、デフォルトのmediumになってます*/
</style>
</div>

上下左右全部同じボーダーの場合のショートハンド

ボーダーの上下左右の「スタイル・太さ・色」を全部同じにしたいなら、
ショートハンドプロパティ border を使います。

border: スタイル(半角スペース)太さ(半角スペース)と、
値を「半角スペース」で区切ってまとめます。
値は順不同。好きな順番でOK。

border:#adff2f solid 0.5em

border:dotted 2px hotpink

border:1ex double rgba(0,191,255,0.7)

border:outset 12px hsla(90,100%,20%,0.5)

<div>
<p style="border:#adff2f solid 0.5em">border:#adff2f solid 0.5em</p>
<p style="border:dotted 2px hotpink">border:dotted 2px hotpink</p>
<p style="border:1ex double rgba(0,191,255,0.7)">border:1ex double rgba(0,191,255,0.7)</p>
<p style="border:outset 12px hsla(90,100%,20%,0.5)">border: outset 12px hsla(90,100%,20%,0.5)</p>

<style scoped>
div p {margin:2em; text-align:center; line-height:2em;}
</style>
</div>

また、style以外は省略可。3つ全部書く必要はありません。省略された値はデフォルト値になります。
例えば、
border:solid だけでもOK。ボーダーは実線で、幅はデフォのmedium(3px)色はcurrentColor(文字色)になります。
border:solid 5em でも可。色はデフォルトになります。
border:#ccc solid でも可。太さだけデフォルトです。
というわけで、border:none もアリ。ボーダー指定している要素だけど、ココだけボーダー無しにしたい時にはコレで。

上下左右のボーダーを別々に指定する場合のショートハンド

上の borderショートハンドプロパティだけだと、上下左右同じボーダーです。
ここで「左のボーダーだけ変えたい」と言う場合には、border-leftショートハンドプロパティを使います。
上ならborder-top、右ならborder-right、下ならborder-bottomを使います。
このときも「スタイル、太さ、色」を順番は自由に半角スペースで区切って使います。
「スタイル」以外の値は省略も可能。色や太さは変更したいモノだけ指定します。

使いどころですが、
例えば「左のボーダーの太さだけ変えたい」時だったら、
基本をborderショートハンドプロパティで指定した後で、border-left-widthプロパティだけ追加して、左の太さだけ上書きしたほうが手っ取り早い。
こんなかんじで、ショートハンドプロパティを組み合わせてシンプルに書こう。

サンプルで見てみましょう。

左の太さだけ変えた場合

左の太さも色も変えた場合

左と下だけボーダーを指定した場合

<div>
<p id="sample1">左の<b>太さだけ</b>変えた場合</p>
<p id="sample2">左の<b>太さも色も</b>変えた場合</p>
<p id="sample3"><b>左と下だけ</b>ボーダーを指定した場合</p>

<style scoped>
div p {margin:2em; text-align:center; line-height:2em;}

div p#sample1 {
	border:solid 1px #999;    /*まず上下左右に同じボーダー指定*/
	border-left-width:15px;}  /*左の太さだけ上書き指定しています*/
    
div p#sample2 {
	border:solid 1px #999;         /*まず上下左右に同じボーダー指定*/
	border-left:solid 2em olive;}  /*左のボーダーを丸ごと書き換え。このほうが効率的です*/
    
div p#sample3 {
	border-left:solid 2em #db7093;     /*左のボーダーだけ指定*/
	border-bottom:dotted 1px #db7093;} /*下のボーダーだけ指定*/
</style>
</div>

(おまけ)borderを使って小ちゃい三角形を作る

borderを使ったTIPSです。
幅も高さも無い要素のボーダーの上下左右の色を変えると、このように表示されます。
それぞれのボーダーが三角形に見えますね。

div#smp6 {
	padding:0;
	width:0;
	height:0;
	border-top:10px solid red;
	border-right:10px solid silver;
	border-left:10px solid silver;
	border-bottom:10px solid red;}

この性質を利用して、このように三角形を作ることができます。
このサンプルは、border-topに色指定し、左右のボーダーは透明(transparent)にしています。

div#smp61 {
	padding:0;
	width:0;
	height:0;
	border-top:15px solid red;
	border-right:10px solid transparent;
	border-left:10px solid transparent;}

右向きの三角形もこんなかんじで。border-leftだけ色を付けてます。
わざわざ画像を用意しなくても、borderだけで三角形が表示できるので便利ですね。

div#smp62 {
	padding:0;
	width:0;
	height:0;
	border-left:15px solid red;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;}

このTIPSを使って、要素のはじっこに小さい三角形を表示して「ふきだし」のように見せることもできます。作り方はこちら↓に書いています。擬似要素「::after」も一緒に使います。
CSSのセレクタ「擬似要素 :after」で「ふきだし」を作ってみた | *Web Design 覚え書き*

次回予告

次回は、border-image プロパティです。
CSS3からが登場した border-image は、ボックスのボーダーに画像を表示できます。
画像を額縁のように簡単に使えるし、ボーダーの領域だけじゃなく、真ん中(要素の padding やコンテンツの部分)にも画像を背景のように敷くことができて、とっても便利なプロパティです。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.