Webサイトやブログ記事で使用頻度が高い枠線（ボーダー）。
このように一部を強調したり、要点をまとめる際に使うことが多いでしょう。
これほんの少しだけCSSの知識があれば、自由にデザインできるんですよね。色や枠線のタイプもお好みで変更できるので、当記事でご紹介いたします。
目次
枠線（ボーダー）にはborderプロパティを使う
枠線を表示・デザインしたいときは、CSSのborderプロパティを使います。基本的な形は次の通りです。
まずはHTMLで、枠線で囲みたい対象範囲をdivタグで指定して、適当なクラス（border）を追加します。
<div class="border">これが枠線で囲まれたポイントや注意点です。</div>続いてCSSでは下記のような「borderプロパティ」を使ってみましょう。
.border {
border: 1px solid #ddd;
}これは、1pxの太さのsolidな枠線を#ddd色で表示するという記述になります。solidは「個体の〜」とか「硬い〜」などという意味ですが、枠線の場合、実線で表示したい場合にsolidと指定します。
するとフロントにはこのように表示されます。
このように太さ、種類、色を指定するのが、borderプロパティの基本的な使い方です。
※上記の説明では割愛していますが、borderプロパティだけではテキストと枠線の間のスペースはありません。以下のようにmarginやpaddingを適宜指定すると綺麗に整います（上記例の指定値）。
.border {
margin-bottom: 30px;
padding: 1.1em 2em;
}borderプロパティの種類
ここからはborderプロパティの種類をご紹介いたします。枠線の太さやカラーをピクセル値やカラーコードで指定できるほか、次のように線の種類も指定できます。
※当記事の各種サンプルは、marginとpaddingを指定して見た目を整えています。
none（非表示）
borderプロパティの種類を指定していない状態なので、枠線は表示されません。既存の枠線を非表示にしたい（解除したい）際などに使います。
.border { border:none; }こちらも枠線を非表示にする値ですが、noneとの違いは枠線を非表示にする優先度が高い点です。例えば、テーブルのセルなどで隣接する枠線がある場合もそれを非表示にします。
- noneの場合は、隣接している枠線は非表示にならない
- hiddenの場合は、隣接しているセルの枠線指定に限らず非表示になる
といった違いになります。
dotted（点線）
枠線を点線で表示する値です。
.border { border: 3px dotted #000; }dashed（破線）
破線を表示する値です。dottedと似ていますが、dashedの場合は切り取り線のようなイメージの枠線になります。
.border { border: 3px dashed #000; }solid（実線）
solidは冒頭で説明した通り、シンプルな実線を表示します。
.border { border: 1px solid #000; }double（二重線）
二重線を表示する値です。太さの値を変更して二重線の間隔を調整可能です。太さは2px以上を指定しなければ再現できません。
.border { border: 10px double #000; }groove（窪んだ枠線）
窪んだように見える枠線を表示する値です。
.border { border: 10px groove #00688c; }ridge（立体的な枠線）
手前に飛び出しているように見える立体的な枠線の値です。
.border { border: 10px ridge #00688c; }inset（枠線内を奥に）
左と上の線のカラーが暗くなり、枠線内コンテンツ全体が奥に窪んでいるように見えます。
.border { border: 10px inset #00688c; }outset（枠線内を手前に）
先ほどのinsetの逆ですね。枠線内コンテンツ全体が手前に飛び出しているように見えます。
.border { border: 10px outset #00688c; }まとめ
CSSで枠線（ボーダー）をデザインできるborderプロパティの使い方と種類をご紹介いたしました。
borderプロパティを覚えておくと、記事やページを見やすく整理できると思います。細かくデザインもしやすいです。上下のmarginやpaddingも併せてセットしておくと見た目も綺麗ですね。
ちなみにTCDテーマには、クイックタグ「囲み枠」という機能が搭載されているので、CSSを使わずにワンタッチで囲み枠を表示できます。ここ数年以内にリリースされたテーマにはプレビューしながら枠線をデザインして、枠のラベル（見出し）まで登録できる最新仕様になっています。
コメント