入門6:CSSのborderを完全に理解したい人はこちら【秒速解説】

入門6:CSSのborderを完全に理解したい人はこちら【秒速解説】 CSS入門
CANIT先生
CANIT先生

お二人は、CSSのborderを使いこなしていますか?

猫田さん
猫田さん

borderって線のこと……だよね?

牛山くん
牛山くん

そうそう、borderで線が引けるんですよね。見出しの装飾で使ってるところを見ました

CANIT先生
CANIT先生

そうですね。前回は「入門5:【CSS/important】の基本的な使い方と注意点〜初心者向」としてやや実践的な内容を解説しましたが、今回もより実践的なborderについて解説していきます。

CSSのborderは要素の境界を指定するプロパティです。見出しの装飾だけでなく、領域を区切ったり、目立たせたりするときにも使えます。

このページではCSSのborderプロパティの基本的な使い方から、覚えておきたいborderのポイントを解説します。実際の記述例も紹介するので試しながら読むとより理解が深まるでしょう。

CSSのborderって何?

CSSのborderって何?
CANIT先生
CANIT先生

borderはCSSプロパティの1つです。要素の境界線についてのデザイン定義を行うのですが……borderプロパティには定義できる項目が3つあります

  • border-style
  • border-width
  • border-color

3つも種類があると難しそうに感じますが、内容はシンプルです。スタイルやカラーなど、英語表記そのままの意味合いで覚えられます

牛山くん
牛山くん

スタイルはきっと二重線とか点線のことですね。あとは、太さと色でしょう。 たしかに英語表記そのままの意味で覚えれば良さそうですね

CANIT先生
CANIT先生

飲み込みが早いですね。 では、それぞれを詳しく紹介していきましょう

border-style

CANIT先生
CANIT先生

まずは、border-styleです。border-styleは文字通り境界線の種類を指定するものですよ

solid:1本線のボーダーを生成します。

double:2本線のボーダーを生成します。

dashed:1本線のボーダーを破線で生成します。

dotted:1本線のボーダーを点線で生成します。

groove:立体的に窪んだボーダーを生成します。

ridge:立体的に隆起したボーダーを生成します。

inset:囲われた空間が窪んで見えるように色の明るさに差をつけて表示します。上側と左側のボーダーが暗い色で表示され、下側と右側のボーダーが明るい色で表示されます。

outset:囲われた空間が隆起して見えるように色の明るさに差をつけて表示します。上側と左側のボーダーが明るい色で表示され、下側と右側のボーダーが暗い色で表示されます。

none:境界線を表示しません。境界線の太さが0になります。境界が他の要素と重なり合っているときは他の要素のスタイルが優先されます。

hidden:こちらも境界線を表示しません。境界線の太さが0になります。noneとは違い境界が重なり合ったときでもhiddenの値が優先されます。

CANIT先生
CANIT先生

以上がborderで指定できる境界線の種類です

ridgeとoutset、grooveとinsetは似ているように感じるかもしれませんので補足します。ridgeやgrooveは線自体を立体的に表現するもので、outsetとinsetは囲った空間を立体的に表示するものです。間違えやすいポイントなので注意しましょう。

border-width

CANIT先生
CANIT先生

続いては、border-widthです。これは、線の太さを指定するプロパティですね。数値やキーワードで太さを指定します

指定する数値にはピクセルのほか、フォントサイズを基準としたemexという単位が使えます。

キーワードのにはthin、medium、thickが使えます。thinsが細い線、mediumが普通の線、thickが太い線の扱いです。キーワード指定した場合、表示される太さはブラウザに依存します。環境によって見栄えが変わってしまうので、一般的にはあまり使いません。

border-color

CANIT先生
CANIT先生

最後にborder-colorですが……これは線の色を指定するプロパティです

色を指定する際は#FF0000のように16進数のカラーコードを使います。また、transparentを指定すると、線の色を透明にすることもできます。

transparentを使うときの注意点
線の太さを指定した状態で色をtransparentにすると領域の余白のように表示されます。領域のスペースを確保したいときはmarginという別のCSSプロパティが存在するのでそちらを使いましょう。
CANIT先生
CANIT先生

二人とも、ここまでは大丈夫ですか?

牛山くん
牛山くん

ちょっと不安だけど、なんとかついていけています

猫田さん
猫田さん

実際にやってみないと、なんとも言えませんね

borderプロパティでの装飾のやり方:4つの具体例

具体的な装飾のやり方
CANIT先生
CANIT先生

では、ここからはborderプロパティを使った具体例を4つ紹介しますね

牛山くん
牛山くん

いよいよ実践編ですね……全部覚えられるかなぁ……

猫田さん
猫田さん

余裕、余裕

CANIT先生
CANIT先生

ここで紹介するborderプロパティでの装飾の具体例は、以下の4つです

  1. 見出しの装飾
  2. 文章を囲む
  3. ボタンを目立たせる
  4. 領域をハッキリさせる

具体例①:見出しの装飾

CANIT先生
CANIT先生

まずは、見出しの装飾をしてみましょう。いろいろなサイトで見出しの装飾は行われていますね

borderを指定して見出しを装飾します。以下はh2タグにborderを指定しているサンプルです。

h2 { border : solid 3px #FF0000; }

h2見出しに1本の境界線が3ピクセルの太さで表示されます。色は赤色を指定しています。

具体例②:文章を囲む

borderプロパティは文章に対しても使うことができます

段落を示すpタグに指定すれば段落が境界線で囲われますし、強調を示すstrongタグに指定すれば強調したい文字部分だけが境界線で囲われます。以下はpタグに指定した例です。

p { border : double 4px #00FF00; }

段落が太さ4ピクセルの2重線で囲われます。色は緑色を指定しています。

具体例③:ボタンを目立たせる

border-styleoutsetにすることで立体的なボタンのように表示できます。以下の例では、divで囲われたボタンという文字列に灰色の立体的なボーダーを表示しています。

HTMLの記述

<div class=”button”>ボタン</div>

CSSの記述

.button { border : outset 4px #999999; }

具体例④:領域をハッキリさせる

border-colorを使い分けることで領域をハッキリさせる使い方もできます。1つ目の段落と2つ目の段落を明確に区切りたい場合、以下の例のように境界線の色変更で区切りを強く表現できます。

HTMLの記述

<p class=”d1”>これは1つ目の段落です</p>
<p class=”d2”>これは2つ目の段落です</p>

CSSの記述

d1 { border : solid 1px #FF0000; }
d2 { border : solid 1px #0000FF; }

1つ目の段落は赤線で囲われ、2つ目の段落は青線で囲われます。

CANIT先生
CANIT先生

はい。以上が、borderプロパティを使った4つの具体例です

猫田さん
猫田さん

ちょ……ちょっと難しかったかも(汗

牛山くん
牛山くん

同じく……なにがなにやら……

CANIT先生
CANIT先生

そうですね。慣れないうちは実践的なコードを見てもなかなか覚えられません。でも、慣れて仕舞えば、そんなに難しい部分ではないんですよ。以下で、書き方の基本を改めて解説するので、そちらをしっかり覚えましょう

書き方の基本

書き方の基本
CANIT先生
CANIT先生

CSSでborderを指定するときの書き方には、まとめて記述する方法とプロパティごとに分けて記述する方法があります

猫田さん
猫田さん

プロパティ……なんだっけそれ

牛山くん
牛山くん

この前やったばかりですよ。 たしか「入門4:【CSSのセレクタ基礎】をマスターしたい方へ【チートシート付】」で出てきたはずです

CANIT先生
CANIT先生

そうですね。猫田さんは改めて確認してきましょう。ここでは色々なborder指定の書き方を解説しますよ

まとめて記述する

border指定の基本となるのはまとめて記述する方法です。以下のように線の種類、線の太さ、線の色を一括指定できます。

h2 { border : solid 1px #123456; }

プロパティごとに分けて記述する例

以下はプロパティごとに分けて記述する場合の例です。

h2 {
	border-style : solid;
	border-width : 1px;
	border-color : #123456;
}
牛山くん
牛山くん

どっちの書き方がおすすめですか?

CANIT先生
CANIT先生

慣れないうちは1つずつ書いたほうが、後で見たときにわかりやすいですよ。 でも、慣れてきたら改行せずに1行にまとめて書いたほうが早いので、1行で書く人も多いです。 ちなみに、セミコロンまでが1つのプロパティとして扱われるので覚えておいてくださいね

borderの位置を指定する

borderの位置を指定する
CANIT先生
CANIT先生

ここまでは特定の要素をボーダーで囲む方法について紹介しました。実はborderにはそれ以外にも使い道があります。要素の上下左右の任意の場所にだけborderを表示させる方法です

牛山くん
牛山くん

縦線も設定できるんですね?

猫田さん
猫田さん

さらにその線も点線にできるってわけかぁ……可能性は広がるなぁ

上下左右の任意の位置にボーダーを表示

borderの位置を指定したいときは、プロパティに位置を付け加えます。

CANIT先生
CANIT先生

位置の指定の仕方は以下のとおりです

border-top:上辺のボーダー指定
border-bottom:下辺のボーダー指定
border-left:左辺のボーダー指定
border-right:右辺のボーダー指定

いくつか例を紹介します。まずはh2見出しの下辺にだけボーダーを表示する例です。

h2 { border-bottom : solid 6px #0000FF; }

見出しの下辺に太さ6ピクセルの青いボーダーが表示されます。

また、位置の指定を行っているときでもプロパティごとに分けて記述する方法が使えます。今度はh2見出しタグの下辺だけを対象に、線の種類を変更してみます。

h2 { border-bottom-style : dotted; }

これで下辺の線の種類だけが点線に変更されました。もちろん線の種類だけでなく、太さや色を指定する際にもプロパティごとに分けて記述する方法が使えます。

borderを使った応用デザイン

CANIT先生
CANIT先生

ここからはborderプロパティの応用です。border指定を使ったよくあるデザインについて解説します

猫田さん
猫田さん

こういうのを待ってたのよね! これならスラスラ覚えられそう

左にだけ太い線がついている見出し

Webサイトやブログなど広いメディアで見られる見出しの装飾方法です。このデザインは以下のようにborder指定することで作れます。

h2 { border-left : solid 6px #4568E6; }

見出しの左側にだけ青い太線が表示されます。

左に太い線があり下に細い線がある見出し

左と下それぞれに別のスタイルを指定することでL字型のボーダーを表示します。

h2 {
    border-left : solid 6px #4568E6;
    border-bottom : solid 1px #4568E6;
}

左に青い太線が表示され、下には同じ色の細い線が表示されます。

outsetを使わずにボタンを作る

border-styleプロパティのoutsetを使えば、要素が隆起して見えるようにボーダーが付きます。しかし、outsetでは色指定の自由度が低くなってしまいます。そんなときには、outsetを使わずにボタン表現をする方法を試してみましょう。

上と左、下と右のそれぞれに異なるボーダー色を指定して、ボタンのようなデザインを作ります。

.button {
    border-top : solid 1px #879def;
    border-right : solid 1px #1c44d3;
    border-bottom : solid 1px #1c44d3;
    border-left : solid 1px #879def;
}

上と左のボーダーに明るい青、下と右のボーダーに暗い青を指定して立体を表現しています。また、明るくするボーダーと暗くするボーダーを逆にすると、今度は立体的ではなく凹んでいるボタンを表現できます。

牛山くん
牛山くん

こうやって、工夫をしながらデザインしていくんですね。 これ、難しいけれど面白いですよ

radiusプロパティで角丸を作る

radiusプロパティで角丸を作る
CANIT先生
CANIT先生

borderのデザインとして忘れてはいけないのが、border-radiusプロパティです。このプロパティは要素の境界線の角を丸めるときに使います。スマートフォンのアイコンなどで身近になった角丸のデザインを表現できますよ

牛山くん
牛山くん

角がふんわりと少し丸くなっているデザインですよね

CANIT先生
CANIT先生

そうです。border-radiusの指定方法は、難しい部分があるので1つ1つ順番に解説しますね

border-radiusの記述方法

border-radiusはピクセルやパーセントなどの値を入力することで角を丸める度合いを指定します。

猫田さん
猫田さん

ふむふむ。 どのくらい丸めるのか……を指定するのね

例1 border-radius : 10px;
例2 border-radius : 5%;
例3 border-radius : 1em;

ピクセルは絶対値での指定、パーセントはボーダーで囲った領域の広さに対しての割合、emはフォントサイズを基準にした相対値での指定です。

丸め度合いを指定する仕組み
指定したピクセル数は角からの距離を表しています。10pxであれば、角から内側に向かって縦横10px進んだ位置です。この位置を中心として円を描いたときの円の丸まりの度合いが角丸として再現されます。

4角に別々の角丸を設定する

border-radiusプロパティでは上下左右の4角に別々の丸まり度合いを設定できます。例を見てみましょう。

border-radius:1px 2px 3px 4px;
border-radius:1px 2px 3px;
border-radius:1px 2px;
border-radius:1px;

値を4つ記述すると4角の丸まりの度合い指定となります。左の値から順番に、左上、右上、右下、左左の丸まりを指定しています。

値を3つ記述すると左上、右上と左下、右下への指定となります。

値を2つ記述すると左上と右下、右上と左下への指定となります。

値を1つ記述したときは最初に紹介したように全ての角丸に共通の値が適用されます。

猫田さん
猫田さん

便利なんだろうけど、慣れるまで大変だね。これ

CANIT先生
CANIT先生

自分の中でいちばん使いやすいものを決めて、まずは1つ使いこなせるようにするといいですよ。その上で慣れてきたら、別の指定の仕方にも挑戦してみましょう

radiusで正円を作る

border-radiusを50%にすることで正円を表現できます。

まずは対象となる要素のwidth(横幅)とheight(高さ)を同じ長さにして正方形とします。正方形の要素に対して50%のborder-radiusを指定します。以下の例では100pxの正円が表示されます。

.circle {
    width : 100px;
    height : 100px;
    border-radius : 50%;
    border : solid 1px #000000;
 }

radiusで楕円を作る

radiusで楕円を作るのは簡単です。正円を作るときは正方形の要素に対してradiusを指定しましたが、今度は長方形の要素にradiusを指定します。

.ellipse {
	width : 200px;
	height : 100px;
	border-radius : 50%;
	border : solid 1px #000000;
 }

widthを長くすると横長の楕円に、heightを長くすると縦長の楕円になります。

猫田さん
猫田さん

これもちょっと難しいなー

CANIT先生
CANIT先生

最初から全てを丸暗記ではなく、仕組みを覚えることが大切です。実際に書いてみて値を変えながらどの部分を変えたらどう表示が変わるのか確認してみましょう

【WEBツール】CSS 配色テスター こちらのサイトでは実際に上記のコードをコピペして値を変えることで、どの部分がどのように変わるのか目で見て確認することができます。

CSSのborder設定まとめ

CSSのborder設定まとめ
CANIT先生
CANIT先生

さて、今回学んだのはCSSのborderでしたね。 要素の境界線について指定するプロパティでした。 線の種類や指定位置を工夫することでボーダーだけでもさまざまなデザインを作れますのでマスターしましょう

牛山くん
牛山くん

とくにborder-radiusプロパティを使った正円や楕円の作り方は、ぜひ覚えておきたいテクニックでしたね

猫田さん
猫田さん

あとは、borderプロパティにまとめて書く方法だよなぁ。ここが使いこなせたら、楽になりそうよね

CANIT先生
CANIT先生

プロパティごとに記述する方法もデザインの一箇所だけを変更したい時によく使いますよ

今回はborderについてより実践的に解説していきました。ホームページ上でよく使われますのでしっかりと覚えていきましょう。今回のborderの書き方の基本を押さえていけば、そのほかのいろいろなCSS要素も基本は同じ書き方です

次回もより実践的な「【CSS/margin】マージンの基本と応用を徹底マスターしよう」をお届けします。今回は「線」にまつわる内容でしたが、次回は「余白」にまつわるお話しです。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

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