【CSS】borderプロパティの使用方法を解説!!(入門者向け)

こんにちは。

HTMLやCSSを学んでいると割と序盤で登場するborderプロパティ

けど設定できる値がいっぱいあったりと混乱しがちなプロパティです。

borderって結局何を指定するの?

こんなお悩みありませんか?

なんとなく使っている人も多いborderプロパティですが、使用頻度の高いCSSプロパティの一つになります。

またWebデザイナーを目指している人も知っておいて損はないプロパティです。

今回は、borderプロパティの

・基本的な使い方
・borderの種類

を紹介します!

borderとは

borderの読み方

borderの読み方は「ボーダー」と読みます。

ボーダーは日本語で「境界線」という意味ですが、borderプロパティ自体もほぼ同義で要素の境界線のデザインを指定するプロパティになります。

borderはボックスの上下左右のボーダーを設定するプロパティ

borderプロパティとは、具体的にいうと

ボックスの上下左右のボーダーを設定するプロパティです。

似たようなプロパティとして、線の種類を指定する「border-style」や、太さを指定する「border-width」、ボーダーの色を指定する「border-color」がありますが、borderプロパティはこれら全てを組み合わせたようなプロパティで、

「線の種類」「太さ」「色」の全てを一括で指定することができます。

borderで利用できる値

先ほど記載した通り、borderプロパティでは、「線の種類」「太さ」「色」の3つの値を指定します。

今回はそれぞれどのような値を指定できるのかを紹介します。

線の種類

説明
none ボーダーを非表示にする。(初期値)
hidden ボーダーを非表示にする。
solid ボーダーを実線にする。
 double ボーダーを二重線にする。
dotted ボーダーを点線にする。
dashed  ボーダーを破線にする。
groove ボーダーの線自体が溝になっているようなボーダーにする。
 ridge ボーダーの線自体が盛り上がっているようなボーダーにする。
inset ボーダーの内側の領域全体が低く見えるようなボーダーにする。
outset  ボーダーの内側の領域全体が高く見えるようなボーダーにする。

線の太さ

説明
単位付きの数値 ボーダーの太さを数値に単位をつけて指定する。
thin  ボーダーの線の太さを細めに設定する。
medium ボーダーの線の太さを中くらいに設定する。
 thick ボーダーの線の太さを太めに設定する。

線の色

説明
キーワード redやblueなどの色の英名。
カラーコード  #000000などの#から始まる16進数のコード。
RGB値 rgb ( ) を使用した色の指定。
 transparent 透明色を指定。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

borderの基本的な使い方

borderの実装例

まず初めにborderプロパティのサンプルコードをみていきましょう。

「見出し」の周りに赤い枠が表れましたね。

このように、borderプロパティは「線の種類」「太さ」「色」を同時に指定することによって、ボックスの外を囲うような線を出すことができます。

ちなみに指定の順番は順不同なので、

このように順番を変えても問題なく動作します。順番に決まりはありません。

borderの位置を個別に指定するには?

borderプロパティはボックスの外枠を囲う線のデザインを行うCSSプロパティです。

なので上下左右全てのボーダーを表示することになります。

ですがデザイン上、「左のボーダーだけでいいのにな…」という時もありますよね。

そこでborderに類似して、「border-位置」というプロパティでボーダーの位置を臨機応変に変更することができます。

この「位置」には top, bottom, left, right が入ります。サンプルコードをみていきましょう。

このようにして、ボーダーを部分的に表示させることも可能です。

線の種類を紹介

先ほどのサンプルコードではボーダーの線の種類は solid(実線)でしたが、borderプロパティには様々な線のデザインが存在します。

今回はそのいくつかをサンプルコードと共に紹介します。

double

doubleは二重線を表示します。

今のWebデザイン市場では登場回数は減っているように思いますが、一昔前のWebサイトでは割と頻繁に見た気がします。(笑)

dashed

dotted

こちらも一昔前のWebサイトで見かけた点線ですね。

次に、使用箇所やタイミングは限られますが仕様としては存在するマイナーどころをいくつか紹介します!

groove

ridge

inset

いかがでしたか?

全ての線のデザインを使用するタイミングは限られますが、Webデザインをする上ではこうしたプロパティが存在することを知っておくとデザインの幅が広がります

頭の片隅程度でいいので抑えておきましょう!

borderの角を取るには?

今までborderプロパティの基本的な使い方を紹介してきましたが、実際はborderプロパティに加えて若干のアレンジをすることにより、さらに高度なボーダーをデザインすることがあります。

よく使われるのが、角丸(角が取れた)ボーダーです。

このボーダーの四隅の角を取る際に使われるのが「border-radius」プロパティです。

サンプルコードをみていきましょう。

よく見てみると、見出しのボックスの四隅が丸く角が取れているのが見えますよね?

このように、border-radiusプロパティを使用することによって、ボーダーに柔らかさを与えたデザインを作ることができます。

まとめ

いかがでしたか?

今回は border プロパティの基本的な使い方と細かいデザインの仕方を紹介していきました。

borderプロパティは使い方によって様々なデザインを実現することができるので、しっかりと使い方をマスターしておきましょう!

参考文献:http://www.htmq.com/style/border.shtml

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?