閉じる
カテゴリー
もっと見る:HTML&CSSコーディング

HTML&CSSコーディング
枠線の種類、太さ、色を指定する

枠線をつけるには、CSSのborderプロパティを使います。

borderプロパティを使うと、枠線のスタイル(種類)、太さ、色を一括して指定することができます。

ここでは、borderプロパティの具体的な使い方をわかりやすく解説します。

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

borderプロパティの値の書き方

borderプロパティには要素を囲う枠線のスタイル(種類)、太さ、色を指定します。

主なスタイルの値

スタイルは次のようなキーワードで記述します。

  • 一本線:solid
  • 二本線:double
  • 点線:dotted
  • 破線:dashed

太さの値

太さは数値で記述します。ここではpxを使ってみます。

二本線(double)の場合、外側の線、内側の線、線と線の間の余白を表示するため、3px以上ではないとうまく表示されません。

  • 1px
  • 2px
  • 4px
  • 8px

色の値

色はカラーネームまはたカラーコードで記述します。

  • 赤のカラーネーム:red
  • 赤のカラーコード:#FF0000
  • 青のカラーネーム:blue
  • 青のカラーコード:#0000FF
  • カラーネームは大文字でも小文字でも大丈夫です。

書き方の例

borderプロパティの3つの値は、カンマを入れずに半角スペースをあけて列記します。また、値に決まった順番はありません。

以下、例として、divタグに対してborderを設定してみます。divタグは、四角いブロック(ボックス)をつくるためのタグで、borderでレイアウトして使うことが多いです。

HTML
<div>今日は晴れでした。</div>
CSS
div {
  border: solid 1px black;
}
DEMO
CSS
div {
  border: double 3px #00FA9A;
}
DEMO
CSS
div {
  font-size: 24px;
  text-align: center;
  border: dotted 2px #6495ED;
}
DEMO

一辺のみ指定する

borderプロパティは四辺の枠線を一括して指定します。特定の一辺のみ指定したい場合は、ロングハンドで記述する必要があります。詳しくはCSSプロパティ ショートハンドとロングハンドをご覧ください。

HTML/CSS一覧