CSS入門(borderプロパティの使い方)

borderプロパティの基本的な使い方について書きます。borderプロパティは、要素に枠線を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
セレクタ名{ border: スタイルの種類 太さ 色; }

上記でボーダーのスタイル、太さ、色をまとめて指定します。上下左右のボーダーをそれぞれ記述する場合は、border-top、border-bottom、border-left、border-rightで指定します。また、「スタイルの種類」「太さ」「色」を個別に指定する場合は、border-style、border-width、border-colorで指定します。

borderプロパティの基本情報

主なスタイルの種類

• none:表示しない
• solid:1本線
• double:2本線
• dashed:破線
• dotted:点線

太さの指定

• 数値で指定(px、emなど)
• キーワードで指定
  • thin、medium、thickのうちどれかを指定する

色の指定

• 16進数やカラーネームなどで指定する

サンプルコード

四角形に枠線を付ける例です。

<div id="sample1">solid</div>

#sample1{
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
  border: solid 2px black;
}

表示例

solid

double

dashed

dotted

ボーダーのスタイルにそれぞれ「solid」「double」「dashed」「dotted」を指定しています。

まとめ

borderプロパティの基本的な使い方について書きました。

borderプロパティの使用例としては、「見出しのデザイン」「他の要素と区切るための装飾」「ボタンの装飾」などが考えられます。他のプロパティと組み合わせて、色々な見せ方ができます。