枠線などを指定したい!CSSのborderの使い方【初心者向け】

初心者向けにCSSで書くborder(ボーダー)プロパティの使い方に関する解説記事です。borderは、枠線・境界線を作る時などWebデザインをする上で業務でも必要な知識になるので、ぜひ自分でも使えるようにしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くborderの使い方に関する解説記事です。

borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ使えるようにしておきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はborderについて学習するよ。

大石ゆかり

田島メンター!!borderは何を指定するプロパティなんですか〜?

田島悠介

ボックスに枠線を付けたり、その種類を指定するときに使うものなんだ。まずは書き方を確認するよ。

大石ゆかり

はい!

 

目次

 

borderとは

borderはボックス内の枠線を指定する際に使用するプロパティです。ボーダー線は点線・二重線などいくつかの種類を選ぶことができ、太さや色も設定することができます。

枠線をつけることで、内容を強調することができるのであまり多用することはおすすめしませんが、大変便利です。

線の種類も多くあるので、ぜひ自分で試してみてください。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

borderの種類

ボーダー線の種類を指定する場合

border: スタイルの値;

値は以下の中から選択します。

none:枠線は表示されません。(初期値)
solid:1本線になります。
double:2本線になります。
dotted:点線で表示されます。
dashed:破線で表示されます。
groove:立体的に窪んだ枠になります。
ridge:立体的に隆起した枠になります。grooveと影になる位置が真逆になっています。
inset:内側全体が窪んだ枠になります。
outset:内側全体が隆起した枠になります。insetと影になる位置が真逆になっています。

ボーダー線の太さを指定する場合

border: 太さの値;

太さの値はthin(細め),medium(標準),thick(太め)のキーワードで指定する方法と、pxなどの数値で指定する方法があります。

ボーダー線の色を指定する場合の例

border: solid #808000;

枠線の色は#000000などの色コードで指定する方法と、whiteなどのカラーネームで指定する方法があります。transparentを設定すると枠線は透明になります。
ボーダーのスタイルが指定されていないとき(値がnoneの時)は色を指定しても画面には表示されません。

また、ボーダーの線の種類・太さ・色は以下の用に全て同時に指定することができます。

border: double 10px #ff8000;

 

田島悠介

borderで設定できることの一覧だよ。

大石ゆかり

線をつけるかつけないか、線の種類や太さ、線の色というように一通りの指定ができるんですね。

田島悠介

次はいくつかの例で実際にborderを使って、画面でどのように表示されるか見てみよう。

 

実際にborderを書いてみよう

スタイルにsolid(一本線)を指定した場合

html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″>一本線(solid)の場合</p>
</body>
</html>

css

p.content1 {
width: 400px; height: 50px;
border: solid #008080;
}

画面ではこのように表示されます。border線は1本の線で引かれています。また、ここでは太さに関する設定を行っていないため、初期値のmedium(標準の太さ)で表示されています。

bor_p_1

 

スタイルに点線(dotted)を指定した場合

html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″>点線(dotted)の場合</p>
</body>
</html>

css

p.content1 {
width: 400px; height: 50px;
border: dotted #008080;
}

画面ではこのように表示されます。border線は点線になっています。先ほどと同様に太さに関する指定は行っていないためmediumの太さで書かれています。

bor_p_2

 

線の太さを指定する

次に、borderの種類と太さを同時に設定します。

html

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”content1″>一本線(solid)で線の幅を5pxに設定</p>
</body>
</html>

css

p.content1 {
width: 400px; height: 50px;
border: solid 5px #008080;
}

画面ではこのように表示されます。border線は1本線で書かれ、太さは5pxに設定されています。

bor_p_3

 

以上、CSSで書くborderプロパティの使い方について解説しました。

枠線や太さなど書き方の種類は多くあるので、いろいろ書いて試してみましょう。

 

田島悠介

線の色や種類、太さを変えて表示してみたよ。

大石ゆかり

画面を見ると、それぞれの指定が合わせて適用されているのが分かりますね。

田島悠介

ここで注意したいのが、borderの幅というのは領域のwidthやheightの中ではなく外に配置されていることだね。これについてはbox-sizingというプロパティに関係してくるのでそちらも合わせて勉強しておこう。

大石ゆかり

box-sizingについても調べておきます。ありがとうございました!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。