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

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

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

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

 

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

 

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

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

 

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

はい!

目次

 

borderとは

borderとは、HTML要素の枠線の部分のことです。

最近のブラウザは、デフォルトでborderが非表示になっていることが多いため、いざ枠線つきのテーブルやdiv領域を描く時に戸惑う方も多いと思います。

borderプロパティを使うことで、以下のようにHTML要素の見た目を変更することができます。

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

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.矩形の1辺だけ、線を見えなくする

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では初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。