「border」CSSで要素に枠を付ける

ボックスモデルでも紹介しましたが、ボックスにはボーダーという概念があります。contentの外枠に該当する部分で、枠を付けたいときに使用します。注意書きやアクセントとして、注目させたい箇所に使用することが多いです。

10141017-4

ボーダーを上手く使いこなすことで、情報の整理をすることが出来ます。見やすいWebページのレイアウトにもなりますから、知っておくようにしましょう。

ここでは、「borderプロパティ」について解説します。

 

要素に枠を付ける(border)

ボーダーとは、テキストや画像の入るコンテンツ部分の外枠の部分で、上下左右を個別に指定することができます。太さや形状、色などを細かく指定できますから、自分の好きなように装飾することが可能です。

上下左右を個別に指定する場合は、「border-top」「border-bottom」「border-left」「border-right」を使いましょう。そして、四辺を一度に指定するなら、「border」を使うようにしてください。

ボーダーのスタイルは、以下のキーワードで指定します。

none ボーダー無し。これが初期設定となります。
solid 1本線で表示
double 2本線で表示
dashed 破線で表示
dotted 点線で表示

他にも種類がありますが、主に使うものだけ紹介しました。

そして、ボーダーの幅は、以下のように指定しましょう。

数値+単位 「px」や「em」などで指定する。
キーワード 「thin(細い)」「medium(普通)」「thick(太い)」の3つ。ブラウザによって、表示される太さが異なる。

さらに、色の指定は、「#000」や「red」などで指定してください。

 

コンテンツのアウトラインを指定する(outline)

ボーダー以外にも、コンテンツの枠を装飾する方法があります。「outlineプロパティ」を使うことで、コンテンツの四辺に枠を付けることが可能です。ただし、ボーダーとの違いは、上下左右を個別に指定できないことです。

さらに、ボックスの数値に含まれないという特徴があります。ですから、レイアウトを崩さずにコンテンツを装飾できるメリットがあります。スタイルの指定方法は、ボーダーと同じです。かなり使いやすいプロパティですから、状況に合わせて使用してください。

 

以上、要素に枠を付ける方法を紹介しました。ボックスや見出しのレイアウトに欠かせないプロパティですから、しっかりと使い方をマスターしましょう。

サブコンテンツ

このページの先頭へ