スライドショー

【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入門】これから学習を始めるための基礎を解説!学習のコツも
更新日 : 2020年5月8日
【最新版】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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。