Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>枠線のスタイルを設定しよう!

枠線のスタイルを設定しよう!
(border-top-style、border-bottom-style、border-left-style、border-right-style、border-style プロパティ)

じっくりコースアイコンの説明 じっくりコースアイコンの説明

使用プロパティ セレクタ { border-top-style: スタイル; }

CSS一覧プロパティ辞典 … border-top-style プロパティ

border-top-style プロパティを使うと、枠線の上側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。

使用プロパティ セレクタ { border-bottom-style: スタイル; }

CSS一覧プロパティ辞典 … border-bottom-style プロパティ

border-bottom-style プロパティを使うと、枠線の下側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。

使用プロパティ セレクタ { border-left-style: スタイル; }

CSS一覧プロパティ辞典 … border-left-style プロパティ

border-left-style プロパティを使うと、枠線の左側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。

使用プロパティ セレクタ { border-right-style: スタイル; }

CSS一覧プロパティ辞典 … border-right-style プロパティ

border-right-style プロパティを使うと、枠線の右側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。

使用プロパティ セレクタ { border-style: スタイル; }

CSS一覧プロパティ辞典 … border-style プロパティ

border-style プロパティを使うと、枠線の上下左右の枠のスタイルをまとめて指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。また、値を1個から4個指定可能で、並べた値の数よって意味が変わります。詳細は下の「[border-styleプロパティの値]」という表をご覧ください。

[border-styleプロパティの値]
border-styleプロパティの値の個数 効果
スタイルを1個指定した場合 上下左右の枠線のスタイルになる。
「border-style: solid;」と指定すると、上下左右の枠線が実線になります。
スタイルを2個指定した場合 一つ目の値が上下、二つ目の値が左右の枠線のスタイルになります。
「border-style: solid double;」と指定すると、上下の枠線が実線になり、上下の枠線が二重線になります。
スタイルを3個指定した場合 一つ目の値が上、二つ目の値が左右、三つ目の値が下の枠線のスタイルになります。
「border-style: solid double dotted;」と指定すると、上の枠線が実線になり、左右の枠線が二重線になり、下の枠線が点線になります。
スタイルを4個指定した場合 一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の枠線のスタイルになります。
「border-style: solid double dotted dashed;」と指定すると、上の枠線が実線になり、右の枠線が二重線になり、下の枠線が点線になり、左の枠線が破線になります。

枠線のスタイルの種類

値(キーワード) 値の効果 ブラウザでの表示例
none 枠線の非表示 ブラウザでの表示例
dotted 点線の表示 ブラウザでの表示例
dashed 破線の表示 ブラウザでの表示例
solid 実線の表示 ブラウザでの表示例
double 二重線の表示 ブラウザでの表示例
groove 枠線がへこんだように表示 ブラウザでの表示例
ridge 枠線が飛びしているように表示 ブラウザでの表示例
inset 枠線の中の要素がへこんだように表示 ブラウザでの表示例
outset 枠線の中の要素が飛び出したように表示 ブラウザでの表示例

画像リンクの枠線を非表示にしよう!

枠線のスタイルのキーワードには「none」という値があります。このキーワードを使うと、画像をリンクにしたときに表示される枠線を非表示にできます。

使用例

border-left-styleプロパティ、border-right-styleプロパティを使用し、h1 要素の左右のみに枠線を表示しよう!

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">

body { background-color: moccasin;}

h1 {
background-color: orange;
text-align: center;
border-left-style: solid;
border-right-style: solid;
}

span{ font-weight: bold; }

p {
line-height: 1.7em;
text-align: center;
}

p.copy{ font-family: "M SP明朝",serif; }

</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します!</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>

使用例の表示

[border-left-styleプロパティ、border-right-styleプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

料理を少しおいしくするための
ワンポイントを紹介します!

おいしいチャーハンの作り方

Copyright © 2007 TomMY. All Rights Reserved.

↓
[border-left-styleプロパティ、border-right-styleプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

料理を少しおいしくするための
ワンポイントを紹介します!

おいしいチャーハンの作り方

Copyright © 2007 TomMY. All Rights Reserved.

このように h1 要素の左右にだけ枠線を指定しました!
枠線の色と太さは自動的に設定されていますが、詳しくは「枠線の注意事項!」を参照してください。

関連情報ページ

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system