元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについて書いています。

 menu

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

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

記述の仕方

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

上記でボーダーのスタイル、太さ、色をまとめて指定します。上下左右のボーダーをそれぞれ記述する場合は、border-topborder-bottomborder-leftborder-rightで指定します。また、「スタイルの種類」「太さ」「色」を個別に指定する場合は、border-styleborder-widthborder-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プロパティの使用例としては、「見出しのデザイン」「他の要素と区切るための装飾」「ボタンの装飾」などが考えられます。他のプロパティと組み合わせて、色々な見せ方ができます。