罫線を描く【border】：CSS入門

CSS入門（6）

罫（けい）線で囲いたいときなどは、CSSの「border」を使います。

ラグビー選手よろしく、ボーダー柄のラガーシャツを着て、頑張って覚えていきましょう！「前へ！前へ！」前のめりで行こう！

お話は、次の順番で進みます。

• 罫線で囲んでみましょう
• 罫線の種類
• 次回予告
• 関連記事
• この記事へのコメント

▲ページの先頭に戻る

罫線で囲んでみましょう

1：「border」を使ってみる

（01）

さて、前回までは、大見出し（<h1>タグ）の背景色と文字色を変更しました。

しかし、これでは<h2>見出しが、かわいそうです。「ひいきだ！ひいきだ！<h1>タグばかり、ずるいぞ！」と、やいのやいの言われてしまいます。

今回は、<h2>見出しを、罫線で装飾してみましょう。

（02）

borderには、さまざまな指定の仕方があります。とりあえず、よく見かけるオーソドックスな方法を、ご紹介して行きたいと思います。

それでは、テキストエディタで、CSSファイルを開いてください。現状では、次のようになっているはずです。

body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; }

これを次のように、「border」を使って、<h2>見出しに罫線を設定して、CSSファイルを保存してみましょう。

body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; } h2 { border: 2px solid #191970; }

（03）

何をしているのだか分からないと思いますが、HTMLファイルを、ブラウザに放り投げて表示してみましょう。

まず、どうなるのか？結果から見てください。<h2>見出しが、罫線で囲まれているはずです。

borderは、名詞では「境界線」、動詞では「縁（ふち）を囲む」などの意味があります。

（04）

それでは、ひとつずつ見ていくことにしましょう。

border: 2px solid #191970;

まず、「#191970」は、すでにお馴染みなので分かると思います。そうです、「色」の設定ですね。よく覚えていました。偉い！あんたは〜、偉い！（小松の親分さん）

見たことがないのは、「2px」と、「solid」かと思います。これは、線の太さを「2ピクセル」にし、線の種類を「solid（実線）」にしてくださいという指定になります。

線の太さ	2ピクセル
線の種類	solid（実線）

つまり、次のように言い換えることができます。

適用先	<h2>タグの
何を？	上下左右の罫線（border）を、
どうする？	線の太さを「2ピクセル」、線の種類を「solid（実線）」、色を「Midnight Blue」にする。

▲ページの先頭に戻る

2：罫線をそれぞれ指定する

（05）

しかし、何だか味気ない感じがしませんか？上下左右みんな同じです。左側だけ、ちょっと線を太くしてみたいと思います。

CSSコードを次のように設定して、CSSファイルを保存してみましょう。

body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; } h2 { border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; }

（06）

HTMLファイルを、ブラウザに放り投げて表示してみましょう。

たまに、こういう罫線で装飾されているサイトを見たことがあるのではないでしょうか？ちょっと、「CSSを書いている」という感じが高まってきませんか？

（07）

それでは、説明いたします。追加した<h2>タグだけ、見てみましょう。

それぞれ、「border」に「-（ハイフン）」を付けて、「top」、「right」、「bottom」、「left」と書かれています。これは、「上」、「右」、「下」、「左」を意味します。

h2 { border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; }

「border」は、「上」、「右」、「下」、「左」それぞれ個別に罫線を指定することができるのです。

border-top	上の罫線
border-right	右の罫線
border-bottom	下の罫線
border-left	左の罫線

（08）

つまり、次のように言い換えることができます。左の罫線だけ8ピクセルにしたわけです。

適用先	<h2>タグの
何を？	上に位置する罫線（border-top）を、
どうする？	線の太さを「2ピクセル」、線の種類を「solid（実線）」、色を「Midnight Blue」にする。

適用先	<h2>タグの
何を？	右に位置する罫線（border-right）を、
どうする？	線の太さを「2ピクセル」、線の種類を「solid（実線）」、色を「Midnight Blue」にする。

適用先	<h2>タグの
何を？	下に位置する罫線（border-bottom）を、
どうする？	線の太さを「2ピクセル」、線の種類を「solid（実線）」、色を「Midnight Blue」にする。

適用先	<h2>タグの
何を？	左に位置する罫線（border-left）を、
どうする？	線の太さを「8ピクセル」、線の種類を「solid（実線）」、色を「Midnight Blue」にする。

▲ページの先頭に戻る

3：おまけ

（09）

ちょっと、背景が物足りない感じがしませんか？<h2>タグの背景色も変更してみましょう。

私は、白色（#ffffff）にしてみました。ちょっと、ホームページらしい雰囲気になってきました。なかなか良くなったのではないかしら。

ちなみに、CSSコードは次のようになります。たんに、<h2>タグに、「background-color」を追加しただけです。

body { background-color: #ffff00; } h1 { background-color: #191970; color: #ffffff; } h2 { background-color: #ffffff; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 8px solid #191970; }

▲ページの先頭に戻る

罫線の種類

罫線は solid（実線）だけではありません。罫線は、solid（実線）以外にも、いろいろな「線の種類」を選ぶことができます。

時間の許す限り、いろいろと試してみてはいかがでしょうか。

solid	実線
dotted	点
dashed	点線
double	二重線
groove	罫線を掘り込む
ridge	罫線を浮き出す
inset	ボックス全体を掘り込む
outset	ボックス全体を浮き出す
none	罫線なし

＊：ブラウザによっては対応していないために、正確に表示されないことがあります。

▲ページの先頭に戻る

次回予告

次回は、間隔をあける【margin、padding】について書く予定です。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1：カスタマイズ前

• ブログをカスタマイズしたい！
• カスタマイズ前の準備

2：CSSの基本的なこと

• CSS入門 はじめました
• CSSの書き方
• CSSファイルの外部読み込み

3：色の指定

• 背景色の変更【background-color】
• 文字色の変更【color】

4：罫線の指定

• 罫線を描く【border】（この記事です）

5：間隔（余白）の指定

• margin、paddingとは？
• margin、paddingの初期化
• 間隔をあける【margin、padding】

6：継承と子孫セレクタ

• 継承と子孫セレクタとは？

7：箇条書き（リスト）

• 箇条書きの装飾【list-style-type】
• 箇条書きに画像【list-style-image】

8：文字（フォント）の指定

• フォントの指定【font-family】
• 日本人が好きなフォントは？
• 文字サイズの変更【font-size】（1）
• 文字サイズの変更【font-size】（2）

9：idセレクタ、classセレクタ

• idセレクタ、classセレクタとは？

10：文章を読みやすくする

• 段落のインデント【text-indent】
• 行の間隔【line-height】
• 文字の間隔【letter-spacing】

11：文字の中央揃え（センタリング）

• 文字の左右・中央揃え【text-align】

12：レイアウト

• 幅と高さを決める【width、height】
• 段組みレイアウト【float】

13：tableの中央揃え（センタリング）

• 表（table）の中央揃え

14：CSSで飾る

• CSSでリンクを装飾する
• 背景に画像【background-image】

15：まとめ

• 最後にIEでチェック＋CSSハック
• CSS入門まとめ
• HTMLとCSSにコメントを入れる方法

▲ページの先頭に戻る

作成日：2008/04/15 更新日：2008/04/15

« 「文字色の変更【color】」｜「margin、paddingとは？」 »