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

ブログが作りたい!CSS入門 > 罫線を描く【border】:CSS入門

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

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

CSS入門(6)

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

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

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

▲ページの先頭に戻る

罫線で囲んでみましょう

1:「border」を使ってみる

(01)

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

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

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

前回までの状態

(02)

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

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

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

(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ファイルを保存してみましょう。

(06)

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

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

ブラウザで表示

(07)

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

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

「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」を追加しただけです。

▲ページの先頭に戻る

罫線の種類

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

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

solid

実線

dotted

dashed

点線

double

二重線

groove

罫線を掘り込む

ridge

罫線を浮き出す

inset

ボックス全体を掘り込む

outset

ボックス全体を浮き出す

none

罫線なし

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

▲ページの先頭に戻る

次回予告

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

▲ページの先頭に戻る

関連記事

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

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

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

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

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

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

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

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/266-21b29b0b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて