cssプロパティborderについての説明

こんにちは tanaka です。

cssプロパティ
border の説明です。

border は
ボックスモデルを
線で囲むために使います。

画像blog-css-list01-01

しかも、
様々な種類の線が
用意されています。

さらに
線へ画像を入れることもできます。

しかし、
線へ画像を入れるやり方が
とても難しいため

画像に関しては、
他の手段を取る方が良いでしょう。

そして、
それぞれ
辺の指定もできて便利です。

border-top
border-right
border-bottom
border-left

それでは、詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

borderの説明

borderとは

border は
ボックスモデルを
線で囲むために使います。

画像blog-css-list01-01

線も8種類あり、
色をつけることができます。

border-imageという
borderに画像を入れる
プロパティもありますが

扱いが非常に難しいため、

現状、
囲み線の画像を入れる場合は、

HTML<IMG>や
cssのバックスクリーンで入れる方が良いでしょう。

プロパティの種類

borderプロパティの種類は、
4種 + 一括指定があります。

(1)border-style 線の種類
(2)border-color 色
(3)border-width 太さ
(4)border-image 画像を入れる

(5)border 一括指定

それぞれ
詳しく説明していきます。

(1)border-style 線の種類

border-styleプロパティは、
線の種類を指定します。

種類は以下の通りです。

none表示されず、太さも0
hidden表示されず、太さも0
(テーブル用)
詳しくは具体例にて
solid1本線
double2本線
groove立体な凹線
ridge立体な凸線
inset立体な凹線(四方用)
outset立体な凸線(四方用)
dashed破線
dotted点線

(2)border-color 色

border-colorプロパティは、
色を指定します。

指定方法は5種類

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent幅、高さは
そのままに透明
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
色指定できるプロパティ同士で
色を使いまわせるプロパティです。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への
使い回しはできますが、

兄弟要素では、
できません。

(3)border-width 太さ

border-widthプロパティは、
線太さを指定します。

指定方法は2種類

名称指定(細い)thin
(普通)medium
(太い)thick
数値px
em
など

(4)border-image 画像を入れる

borderに画像を入れます。

このborder-imageは、
とても難しいため
別の記事を用意しました。

詳しくはこちらをご覧ください。

(5)border 一括指定

border-style、border-color、border-widthを
1行にまとめることもできます。

(例)

border-style: solid;
border-color: lightgreen;
border-width: 50px;

↓1行にまとめると↓

border: solid lightgreen 50px;

ポジションを交えての指定

それぞれ個別の辺だけを
指定するときは

プロパティ名に
辺の名前を入れます。

(例)

border-top-style: solid;

border-right-color: lightgreen;

border-bottom-width: 50px;

border-left: solid lightgreen 50px;

borderの具体例

(1)border-style 線の種類

none、hidden(非表示、太さも0)
画像blog-css-border01-02
solid 1本線
画像blog-css-border02-02
double 2本線
画像blog-css-border03-02
groove 立体な凹線
画像blog-css-border04-02
ridge 立体な凸線
画像blog-css-border05-02
inset 立体な凹線(四方用)
画像blog-css-border06-02
outset 立体な凸線(四方用)
画像blog-css-border07-02
dashed 破線
画像blog-css-border08-02
dotted 点線
画像blog-css-border09-02

   none、hiddenの違い

border-style
none、hiddenの違いは

none  = 非表示
hidden = テーブルで非表示
      border-collapse: collapse;
     (テーブルの境界線をすべて結合)
      の時に使用。

(例)
こういったテーブルがあったとします。

画像blog-css-border13

border-style: none; は
何かと重なっている線は残します。

画像blog-css-border14

一方、

border-style: hidden; は
自分の周りの線を
すべて非表示にします。

画像blog-css-border15

(3)border-width 太さ

thin(細い)
画像blog-css-border10-02
medium(普通)
画像blog-css-border11-02
thick(太い)
画像blog-css-border12-02

まとめ

border

border は
ボックスモデルを
線で囲むために使います。

画像blog-css-list01-01
borderプロパティ4種 + 一括指定

borderプロパティの種類は、
4種 + 一括指定があります。

(1)border-style 線の種類
(2)border-color 色
(3)border-width 太さ
(4)border-image 画像を入れる

(5)border 一括指定

辺の指定も可能

それぞれ辺の指定も可能

(例)
border-top-style: solid;
border-right-color: lightgreen;
border-bottom-width: 50px;
border-left: solid lightgreen 50px;

以上、
border
の話でした。

ありがとうございました。

タイトルとURLをコピーしました