【css】ボーダー(border)の使い方まとめ

タッチタイピングをマスター
borderの使い方

cssのボーダー(border)とは枠線の事です。 単純に枠線といってもすごい色んな種類を設定できます。 例えば、点線だったり、2重線だったり、いろいろあります。

他にも線を透明にしたり、ボーダーを使いこなすとほんっとデザインの幅が広がります!!

このページではボーダー(border)の種類と設定の方法を紹介していきますね!

※ボーダーって?イマイチわかんないと言う時はcssのボックスモデルってなに?スタイルシートの基本を覚えよう」をご覧ください。

目次
ボーダーを個別に設定

ボーダー(border)の指定方法

ボーダーは、線の太さや色、スタイルを自由に指定することができます。 書き方は下のように書きます。

border:スタイル 太さ 色;

※スタイル、太さ、色の記述する順番は、任意で大丈夫ですが、必ず半角スペースで区切って下さい。

.example{border:solid 3px #f7941d;}
実際の表示例

border:solid 3px #f7941d;

上の場合ボーダーの4辺をまとめての指定でしたが、上下左右バラバラに指定する事もできます。 例えば、4辺の色を別々にしたり、下のボーダーのみ表示するということも可能です。

太さ、色、スタイルを上下左右それぞれの辺ごとに指定するには下のように書きます。

プロパティ 意味
border 上下左右のボーダーをまとめて指定
border-top 上のボーダーを指定
border-bottom 下のボーダーを指定
border-left 左のボーダーを指定
border-right 右のボーダーを指定
.example{border-top:solid 3px #f7941d;}
.example{border-bottom:solid 3px #f7941d;}
.example{border-left:solid 3px #f7941d;}
.example{border-right:solid 3px #f7941d;}
borderの各配置

では、それぞれのボーダーがどういうふうに表示されるか見てみましょう! ここでは、分かりやすいように背景を薄い青にしています。

それぞれのボーダー表示例
border-top
border-bottom
border-left
border-right

ボーダーのスタイル設定

border:スタイル 太さ 色;

ボーダースタイルを設定することで、枠線の種類を決めることができます。 というより、ボーダーはスタイルを設定しないと表示されませんので、覚えておいて下さいね。 下がボーダースタイルの種類です。

ボーダースタイル 意味
none ボーダーは表示されない。太さも0になる。他のボーダーと重なっている場合は、noneは優先されない。ちなみにnoneが初期値。
hidden ボーダーは表示されない。太さも0になる。他のボーダーと重なっている場合は、hiddenが優先される。
solid 1本線
double 2本線
groove 立体的な谷型の線
ridge 立体的な山型の線
inset 上と左が濃い色になり、下と右の線が明るい色になる。ボタンを押したような立体的な形
outset 上と左が明るくなり、下と右の線が濃い色になる。ボタンを押すまえのような立体的な形。insetの逆
dashed 破線
dotted 点線
ボーダースタイル表示例
solid
double
groove
ridge
inset
outset
dashed
dotted

ボーダーの太さの設定

ボーダーの太さは数値に「px、em、ex、pt」などの単位をつけて指定します。 用途に応じて使い分けて下さい。 「よくわかんねw」って場合はpxを使ってれば大丈夫です。

単位をつけて指定する以外にもキーワードで指定する事もできます。

キーワード 意味
thin 細い線
medium 普通の線
thick 太い線
キーワード指定の表示例
thin
medium
thick
.example{border:solid thin #f7941d;}

ボーダーの色設定

borderの色を指定しよう

ボーダーの色は「#ffffff」などのRGB値、もしくはrgba(0, 0, 0, 1)などのRGBA値で指定するか「red」などのカラーネームで指定することができます。 ちなみにボーダーの色は「transparent」で透明にすることができます。

例えば、テーブル(table)の中の線(tdなど)を消したいけど、線の分の1pxの隙間は残したい! そんな時に「transparent」が使えます。

これを使うと、テーブルの中の線を透明にして、線の分の隙間だけ残すって事ができちゃいます。 (このページで使用しているオレンジと緑のテーブルのような感じにできるってこと)

.example{
  border: transparent 1px solid;
}

書き方は上のような感じで色の部分を「transparent」に置き換えるだけ。

とっても簡単ですよね(^-^)

かなり便利なので、機会があったら使って見て下さいね(^^♪

ボーダーを個別に設定

上では、色、スタイル、太さをまとめて設定する書き方を紹介してきました。 ですが、ボーダーを辺ごとに設定できるように、色・スタイル・太さ、も個別に設定することができます。

プロパティ 意味
border-style ボーダーのスタイルを設定する
border-color ボーダーの色を設定する
border-width ボーダーの太さを設定する
.example{border-style:solid;}
.example{border-color:#ffffff;}
.example{border-width:1px;}

個別に指定する場合は、スタイル・色・太さをそれぞれ設定して下さいね。 例えば「スタイルと太さを設定したけど、色は設定してない」っていうふうになるとボーダーは表示されません。 なので個別に記述することはできますが、必ず「スタイル・色・太さ」の3つを設定して下さい。

ちなみにスタイル・色・太さは、辺ごとに設定する事もできます。

辺ごとのスタイル表示例
border-style:solid double dotted dashed;
border-style:solid double dotted dashed;
border-width:1px 3px 5px 7px;
border-color:red blue black orange;
/*まとめて記述する場合「上・右・下・左」の順番*/
border-top:solid red 1px;
border-right:double blue 3px;
border-bottom:dotted black 5px;
border-left:dashed orange 7px;

ボーダーをいろいろ組み合わせる事で、いろんなデザインにする事ができます。 テーブルに使ったり、枠に使ったりと使い方は色々です。

仕組みはちょっと複雑に感じるかもしれません。 ですが簡単にいえば「上下左右の色・スタイル・太さ」を設定するだけです。 なので、すぐに使いこなせるようになりますので、ぜひ使って見て下さいね(^^♪

それとボーダーは個別に設定する事もできますが、全部個別に記述しちゃうとすごいcssが長くなります。 なので、できる限り簡単にまとめるようにしましょうね(^^♪

以上、「ボーダー(border)について」でしたー(^-^) それではー(^^)/