1. TOP
  2. html&CSS入門
  3. CSSで思い通りの枠線を引く方法!border(ボーダー)を使いこなそう

CSSで思い通りの枠線を引く方法!border(ボーダー)を使いこなそう

borderプロパティを使えば、要素を枠線で囲うことができます。

枠線はボーダーと呼ばれることが多いです。

ボーダーを使えば、見出しのように文章に区切りを入れたり、強調したい部分をボーダーで囲ったりなど、色々な使い方が出来ます

ボーダーには初めから点線や2重線など様々なデザインが用意されているので、スタイルを選ぶだけで簡単に凝ったスタイルを適用できます。

簡単な例を見てみましょう。

<p id="demo_65-1">オーソドックスな枠線</p>
<p id="demo_65-2">左だけ太い線</p>
<p id="demo_65-3">点線で重要なことを囲んで見る。背景色を入れるとさらに効果的。線で重要なことを囲んで見る。背景色を入れるとさらに効果的。線で重要なことを囲んで見る。背景色を入れるとさらに効果的。</p>
 #demo_65-1{
   border: 2px solid #4169e1;
   padding: 5px;
 }
 
#demo_65-2{
   border-bottom: 3px solid #008000;
   border-left: 10px solid #008000;
   padding: 5px;
 }

#demo_65-3{
  border: 5px dashed tomato;
  padding: 15px;
  width: 300px;
  background: #fffacd;
  }

オーソドックスな枠線

左だけ太い線

点線で重要なことを囲んで見る。背景色を入れるとさらに効果的。線で重要なことを囲んで見る。背景色を入れるとさらに効果的。線で重要なことを囲んで見る。背景色を入れるとさらに効果的。

このように、色々なタイプのボーダーを簡単に設定することが出来ます。

borderの使い方

boderは上下左右ののプロパティが用意されているので、スタイルを適用したい場所のプロパティを使います。

borderのプロパティ

  • border-top
    上側のボーダー
  • border-right
    右側のボーダー
  • border-bottom
    下側のボーダー
  • border-left
    左側のボーダー

対象のプロパティに対して、下記のように値を設定します。

border-top : 線のサイズ 線の種類 線の色;

線のサイズ、種類、色を半角スペース区切りで指定します。3つの値の順番は自由で、線の種類以外は省略が可能です。省略された場合は初期値が適用されます。(線の種類を省略するとボーダーが表示されません。)

ためしに、上下左右にそれぞれ別々のボーダーを指定してみましょう。

<p id="demo_66">テキストテキストテキスト</p>
#demo_66{
   border-top: 2px tomato solid;
   border-bottom: 2px royalblue solid;
   border-left: 2px lightgreen solid;
   border-right: 2px plum solid;
   padding: 15px;
 }

テキストテキストテキスト

カラフルなボーダーになりましたね。実際にはここまで極端な使い方はしませんが、1つの要素に対して4つの場所にボーダーを設定することが出来ます。

上下左右に一括でボーダーを引く

上下左右に同じスタイルのボーダーを引きたい場合は、borderプロパティを使うと便利です。

border: 線のサイズ 線の種類 線の色;

このようにすることで、4方向に同じスタイルのボーダーが適用されます。

<p id="demo_67">テキストテキストテキスト</p>
#demo_67{
   border: 2px tomato solid;
 }

テキストテキストテキスト

適用したいボーダーが4方向同じ場合は、こちらのほうが手間が少なく書くことが出来ますね。

borderの種類について

borderの種類は下記のようなものがあります。

borderの種類

  • none
    初期値です。ボーダーは表示さません。
  • solid
    1本線で表示されます。
  • double
    2本線で表示されます。
  • dotted
    点線で表示されます。

他にもありますが、基本的に今回紹介するもの以外はあまり使うことがないので説明は省かせていただきます。

それぞれどんな見た目になるのかみてみましょう。

 <p id="demo_68-1">ボーダーなし</p>
 <p id="demo_68-2">1本線</p>
 <p id="demo_68-3">2本線</p>
 <p id="demo_68-4">点線</p>
 #demo_68-1{
   border: 2px tomato none;
 }
 #demo_68-2{
   border: 2px tomato solid;
    padding: 5px;
 }
 #demo_68-3{
   border: 4px tomato double;
    padding: 5px;
 }
 #demo_68-4{
   border: 5px tomato dotted;
    padding: 5px;
 }

ボーダーなし

1本線

2本線

点線

1本線、2本線、点線などの例を設定してみました。よく使う線の種類にはこのようなパターンがあります。

bodreの太さについて

borderの太さは、数値で指定するほかキーワードで指定することが出来ます。

数値で指定する場合

いままでの例でも度々使っていましたが、pxやemで太さを指定することが出来ます。例を見てみましょう。

 <p id="demo_69-1">pxで指定</p>
 <p id="demo_69-2">emで指定</p>
 #demo_69-1{
   border: 5px tomato solid;
    padding: 5px;
 }
 #demo_69-2{
   border: 1em tomato solid;
    padding: 5px;
 }

pxで指定

emで指定

キーワードで指定

下記のようなキーワードで指定もできます。キーワード指定はブラウザによって太さが変わるので、あまり使うことはないと思いますが一応紹介しておきます。

borderの太さ

  • thin
    細い
  • medium
    普通
  • thick
    太い

実際にどうなるか例を見てみましょう。

 <p id="demo_70-1">thinで指定</p>
 <p id="demo_70-2">mediumで指定</p>
 <p id="demo_70-3">thickで指定</p>

 #demo_70-1{
   border: thin tomato solid;
   padding: 5px;
 }
 #demo_70-2{
   border: medium tomato solid;
   padding: 5px;
 }
 #demo_70-3{
   border: thick tomato solid;
   padding: 5px;
 }

thinで指定

mediumで指定

thickで指定

それぞれで太さが変わっているの確認できますね。

borderの色について

ボーダーの色を#ffffffなどのカラーコードや、redなどのカラーネームで指定します。また、transparentを指定することができ、その場合はボーダーの色が透明になります。

 <p id="demo_71-1">カラーコードで指定</p>
 <p id="demo_71-2">カラーネームで指定</p>
 #demo_71-1{
   border: 3px #FF6347 solid;
   padding: 5px;
 }
 
 #demo_71-2{
   border: 3px tomato solid;
   padding: 5px;
 }

カラーコードで指定

カラーネームで指定

このように色を指定することができます。

カラーコードやカラーネームについては以下の記事が参考になると思います。

まとめ

  • borderプロパティを使えば、要素を枠線で囲うことができる
  • 枠線はボーダーと呼ばれることが多い
  • ボーダーには点線や2重線など様々なデザインが用意されているので、スタイルを選ぶだけで簡単に凝ったスタイルを適用できる
  • boderは上下左右のプロパティが用意されている
  • 上下左右に同じスタイルのボーダーを引きたい場合は、borderプロパティを使うと便利