枠線などを指定したい！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プロパティを使いこなすことで、このようなタブつきの表示エリアを描けるようになります。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| 寺谷文宏 (Teratani Fumihiro)
WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、 TechAchademyではフロントエンド、Javaコースを担当。 |
線の色や種類、太さを変えて表示してみたよ。
画面を見ると、それぞれの指定が合わせて適用されているのが分かりますね。
ここで注意したいのが、borderの幅というのは領域のwidthやheightの中ではなく外に配置されていることだね。これについてはbox-sizingというプロパティに関係してくるのでそちらも合わせて勉強しておこう。
box-sizingについても調べておきます。ありがとうございました！
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
