[Sponsor] 「これからWebデザインを始めたい」方のための
Webデザインスクールを渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

3-10. 要素に枠線をつける(boder)

要素に枠線をつけるためのCSS「border」について解説します。太さや色・線の形状などが変更できるので、使いこなすと表現できる装飾の幅がぐっと広がります。

  • HTML・CSS
  • Webデザイン

公開日:2019/06/21最終更新日:2019/06/21

1.要素に枠線を付ける(border)

HTML要素には枠線の装飾をつけることができます。枠線はスタイル・太さ・色の3種類を指定することができます。

  • border-style
  • border-width
  • border-color

そしてこの3つをborderで1つにまとめることができます。値をスペースで区切ります。

border{ スタイル 太さ 色 ; }

1本線・太さ3px・青の枠線を引いてみます。

サンプルHTML:

<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <p>枠線をつける</p>
  </body>
</html>

サンプルCSS:

p{
  width: 240px;
  margin: auto;
  border: solid 3px blue;
}

プレビュー:

2.border-styleの違いについて

borderは1本線以外にもいくつかスタイルが用意されています。代表的なものを紹介します。

solid(1本線)

double(2本線)

dashed(破線)

dotted(点線)

3.上下左右を分けて指定する

例えば上下左右のうち、下だけの枠線を引きたいとします。その際は以下のように記述をします。

.border { border-bottom : solid 1px #000 ; }

borderを上下左右に分けると、以下のように記述できます。

  • border-top
  • border-right
  • border-bottom
  • border-left

これを使って、見出しを装飾してみましょう。 

サンプルHTML:

<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>要素に枠線をつける</h1>
  </body>
</html>

サンプルCSS:

h1{
  font-size: 18px;
  padding-left: 10px;
  border-left: solid 5px blue;
  border-bottom: solid 1px #ccc;
}

プレビュー:

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者