【CSS入門】borderを使いこなすための3つのステップ

CSSのborderを使って枠線を引く方法を知りたい
borderで枠の太さや色を指定するにはどうすればいいの?
borderを使ってさまざまな形の図を作成したい

こんにちは!フリーランスエンジニア兼フリーライターの ワキザカ サンシロウ です。

HTMLやCSSを使ってサイトを作っている時、枠線を引きたい時ってありますよね。そんな時に使うのが、CSSのborderというプロパティです。
borderを使えば、ただ枠線を引くだけではなく、オシャレな図を作成したり、位置調整時に使用することもできます。

この記事では、CSSのborderの基本から、ちょっとした応用的な使い方までをわかりやすく解説していきます。

  • CSSのborderとは?
  • borderの種類や使い方
  • borderの応用的な使い方

この記事を読んで、ぜひborderを使いこなせるようにしましょう!

CSSのborderとは

見出し1

borderはHTMLの部品に枠線を引くためのcssのプロパティの一つです。枠線を引くことで、HTML要素を強調したい場合や、位置調整時に一時的に枠線を表示して調整する場合などに利用することができます。

HTML + CSSについては以下に詳しく説明されているので、こちらも参考にしてみてくださいね!

【初心者必見】HTML/CSS入門サイト厳選7選
更新日 : 2019年5月3日
【最新版】CSSがしっかりわかる!おすすめ書籍まとめ10選
更新日 : 2018年11月23日

CSSのborderを使いこなすための3つのステップ

まずはborderの書き方を理解しよう

それでは、実際にborderの書き方を説明したいと思います。まずは、一番シンプルな例として、HTMLのdiv要素をborderで囲ったケースです。

borderイメージ

【画面イメージ】

【css】
border.css

.border-solid {
    border: solid;
    margin-top: 100px; /*見やすさを考慮し、画面上部に空間を入れる*/
    width: 100%;       /*画面の横幅を最大に設定*/
}

【html】
border.html

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="border.css" />

    <title></title>
</head>
<body>
    <div class="border-solid">
        test
    </div>

</body>
</html>

このように、cssのプロパティとして【border: XXXXXX;】を入力することで、枠線を引くことができます。

borderの種類と使い方を理解しよう

borderでは枠線の種類や、色・太さなどを変更することができます。

ボーダーのスタイルを指定する場合

〇書き方

    border:solid; /*スタイル*/

〇ボーダータイプ

No指定方法概要
1none非表示
2solid1本線
3double2本線
4dotted点線
5dashed破線
6groove立体的に窪んだ枠線
7ridge立体的に隆起した枠線
8inset内面全体が窪んだ枠線
9outset内面全体が隆起した枠線

中でも、以下の四つは特によく使うので、ぜひ覚えてくださいね!

  • solid:1本線で表示
  • double:2本線で表示
  • dotted:点線
  • dashed:破線

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

〇書き方

    border:30%; /*線の太さ*/

〇太さの指定方法

No指定方法概要
1数値で指定pxや%などで直接サイズ指定が可能
2キーワードで指定thin、medium、thickを指定してサイズ変更が可能

px(ピクセル)単位または、%指定はよく使うのでぜひ覚えてくださいね!

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

〇書き方

    border: solid #FF0000; /*線の色*/

〇色の指定方法

No指定方法概要
1カラーコードで指定16進数のカラーコード
2カラーネームで指定redで赤、blueで青のようにカラーネームで指定が可能

色を指定できるカラーコード(#XXXXXX)を使用するケースが多いので、こちらを覚えてみてくださいね!

borderの応用的な使い方を理解しよう

borderはそのまま使うだけでなく、他のプロパティと組み合わせることでより便利に使うことができます。
実際に実践的な使い方に関してご紹介したいと思います。

角丸をまとめて指定する(border-radius)

角丸を指定することで、図形をちょっとおしゃれな形にすることができます。

border-radius適用前

border-radius指定前

border-radius適用後

border-radius指定後

【css】
border.css

.img-1 { 
  background-color: #9df6f7;
  border-radius: 10px;
  height: 100px;
  width: 100px;
  display: inline-block;
}
.img-2 { 
  background-color: #efb2c8;
  border-radius: 50px 3px;
  height: 100px;
  width: 100px;
  display: inline-block;
}
.img-3 { 
  background-color: #fce9a8;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  display: inline-block;
}

【html】
border.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="border.css" />
    <title></title>
</head>

    
    
    
  
</html>

指定した数値によってさまざまな形に変えることができるので、実際に書いて色々試してみると良いかもしれませんね。

線を内側に指定する

先ほど紹介した、ホームページ作成時に枠線を表示する例でいうと、メインとサイドバーは70%、30%でサイズ指定しているのですが、そのまま設定してしまうと横並びではなく折り返して表示されてしまいます。

折り返してしまう際のイメージ
ホームページ作成時のサンプル_枠線内側指定なし

これは、【メインの幅70% + 枠線1px】 + 【サイドバーの幅30% + 枠線1px】が、100%を超えてしまうことで起こります。この、1px分を70%または30%内に含めるための、borderを内側に設定する方法があります。

box-sizing: border-box;

%で要素の横幅を指定して横並びにする場合は、【box-sizing: border-box;】を使ってみてくださいね!

まとめ

今回は、cssのborderで枠線を設定する方法について実践的な内容も含め、ご紹介させていただきました。borderは開発する際の効率を上げるための位置調整にも使えますし、border-radiusのようにデザインを意識した使い方にも応用が利きます。

覚えておくことで、WEB開発の効率が上がるので、ぜひチャレンジしてみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説