枠線などを指定したい！CSSのborderの使い方【初心者向け】
初心者向けにCSSで書くborder（ボーダー）プロパティの使い方に関する解説記事です。borderは、枠線・境界線を作る時などWebデザインをする上で業務でも必要な知識になるので、ぜひ自分でも使えるようにしておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ使えるようにしておきましょう。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はborderについて学習するよ。
田島メンター！！borderは何を指定するプロパティなんですか〜？
ボックスに枠線を付けたり、その種類を指定するときに使うものなんだ。まずは書き方を確認するよ。
はい！
目次
borderとは
borderとは、HTML要素の枠線の部分のことです。
最近のブラウザは、デフォルトでborderが非表示になっていることが多いため、いざ枠線つきのテーブルやdiv領域を描く時に戸惑う方も多いと思います。
borderプロパティを使うことで、以下のようにHTML要素の見た目を変更することができます。
borderを使いこなす
今回は、borderプロパティの実践的な設定方法を5点ご紹介します。
1.solid指定により、borderを「見える化」する
border: solid;
2.borderの太さを指定する
border: 4px solid;
3.borderの色を変更する
border: solid; border-color: #031de2;
4.矩形（四角形）の角を丸くする
border: solid; border-radius: 8px; /* 半径が8pxの角丸 */
5.矩形の１辺だけ、線を見えなくする
border: solid; border-bottom: transparent; /* 下辺が透明になる */
ご自身でCSS設定を試してみましょう！
borderで設定できることの一覧だよ。
線をつけるかつけないか、線の種類や太さ、線の色というように一通りの指定ができるんですね。
次は実際にborderを使って、画面でどのように表示されるか見てみよう。
borderを使った実践的なサンプル
さらに実践的なborderの使い方をご紹介します。今回は、HTMLとCSSだけでタブつきの表示エリアを描画してみましょう。
完成イメージは、この通りです。
実際のHTMLとCSSのコードをご紹介します。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloTechAcademy</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="disp-area">
<div id="smallArea">
<span>Tab</span>
</div>
<div id="largeArea">
<span>Hello TechAcademy!!</span>
</div>
</div>
</body>
</html>
CSS
/* タブエリアのdivへの適用 */
#smallArea {
/* 基本的なサイズの設定 */
background-color: #bbedce;
width: 80px;
height: 26px;
padding-top: 4px;
/* borderに関する設定 */
border: 1px solid; /* 線の太さと可視化 */
border-bottom: transparent; /* 下辺を透明に */
border-top-left-radius: 8px; /* 左上を角丸に */
border-top-right-radius: 8px; /* 右上を角丸に */
/* メイン表示エリアの線の太さだけ下にずらす */
margin-bottom: -1px;
/* その他の設定 */
position: relative;
text-align: center;
}
/* メイン表示エリアのdivへの適用 */
#largeArea {
/* 基本的なサイズの設定 */
background-color: #fff;
width: 200px;
height: 40px;
padding: 20px;
/* 枠線を太さ1pxで表示 */
border: 1px solid;
}
/* コンテンツを見やすく表示 */
.disp-area {
margin-top: 20px;
margin-left: 20px;
}
borderプロパティを使いこなすことで、このようなタブつきの表示エリアを描けるようになります。
執筆してくれたメンター
| 寺谷文宏 (Teratani Fumihiro)
WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、 TechAchademyではフロントエンド、Javaコースを担当。 |
線の色や種類、太さを変えて表示してみたよ。
画面を見ると、それぞれの指定が合わせて適用されているのが分かりますね。
ここで注意したいのが、borderの幅というのは領域のwidthやheightの中ではなく外に配置されていることだね。これについてはbox-sizingというプロパティに関係してくるのでそちらも合わせて勉強しておこう。
box-sizingについても調べておきます。ありがとうございました！
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
