CSS

2021.07.05

枠線や下線を引きたい!CSSのborderの使い方を解説【初心者向け】

「要素に枠線を引いて境界線を作りたい」「テキストに下線を引きたい」などなど、Webサイトに線を引きたい瞬間は幾度となく訪れます。

今回はコーディング、Webデザインをする上でとても重要なborderの使い方についてご紹介します!

borderとは

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

次の画像は、Google Chromeの検証ツールで見ることができるHTML要素の領域を表す図です。

HTML要素には「margin」「border」「padding」という3つの領域があり、それぞれの役割は以下の通りです。

  • padding→内側の余白
  • border→線を引く領域
  • margin→外側の余白

とりあえず、borderはHTML要素に線を引くことができる領域だと覚えておけばOKです!

borderプロパティの基本的な使い方

それでは実際にborderを表示させてみましょう。

borderを表示させるには、CSSのborderプロパティを使用します。

See the Pen border01 by spiqa design (@spiqa_design) on CodePen.

div要素にborderプロパティを指定し、borderを表示させてみました。

borderプロパティを指定する時は、「種類」「太さ」「色」の設定をする必要があります。

borderプロパティはこの3つをまとめて指定することができるプロパティです。順不同なので、色から先に書いたりしても問題ありません!

上記codepenのサンプルコードでは、

  • 種類→solid(1本線)
  • 太さ→1px
  • 色→#000(ブラック)

と指定し、ブラックの1本線を引きました。

太さだけ決めたい時はborder-widthプロパティで個別で指定することも可能ですが、基本まとめて指定することが一般的です!

左右上下どこかだけ線を引きたい!

上記の例では、左右上下に線が引かれて枠線となりました。

しかし、「下だけ引いて下線を表示させたい!」「文頭の左に表示させて見出しのデザインを作りたい」という時もありますよね!

左右上下それぞれ指定するプロパティがあります。

  • border-top→上のborderを指定
  • border-right→右のborderを指定
  • border-bottom→下のborderを指定
  • border-left→左のborderを指定

上述した見出しデザインと下線のサンプルコードをご紹介します。

See the Pen border02 by spiqa design (@spiqa_design) on CodePen.

borderを使いこなすとこのように文章を読みやすくすることができます!

まとめ

「borderの領域」と「borderプロパティの使い方」についてご紹介しました!

今回は基本的な内容を解説しましたが、応用すればborderだけで三角形を作れたりと、奥が深いプロパティです!

スピカノートの別記事で解説していますので気になったら見てみてください!

borderで三角形を作る方法はこちら

この記事をシェアする

関連記事

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.28

    色違いは必要ない!アイコンはcssで色を変えよう!

    CSS

    コーディング

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    CSS

    コーディング

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×