ホーム＞コース別ガイド一覧＞枠線のスタイルを設定しよう！
枠線のスタイルを設定しよう！
（border-top-style、border-bottom-style、border-left-style、border-right-style、border-style プロパティ） |
 
|
CSS一覧プロパティ辞典 … border-top-style プロパティ
border-top-style プロパティを使うと、枠線の上側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。
CSS一覧プロパティ辞典 … border-bottom-style プロパティ
border-bottom-style プロパティを使うと、枠線の下側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。
CSS一覧プロパティ辞典 … border-left-style プロパティ
border-left-style プロパティを使うと、枠線の左側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。
CSS一覧プロパティ辞典 … border-right-style プロパティ
border-right-style プロパティを使うと、枠線の右側の枠のスタイルを指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。
CSS一覧プロパティ辞典 … border-style プロパティ
border-style プロパティを使うと、枠線の上下左右の枠のスタイルをまとめて指定できます。値の表示例は「枠線のスタイルの種類」を参考にしてください。また、値を１個から４個指定可能で、並べた値の数よって意味が変わります。詳細は下の「[border-styleプロパティの値]」という表をご覧ください。
[border-styleプロパティの値]
| border-styleプロパティの値の個数 |
効果 |
| スタイルを１個指定した場合 |
上下左右の枠線のスタイルになる。
「border-style: solid;」と指定すると、上下左右の枠線が実線になります。 |
| スタイルを２個指定した場合 |
一つ目の値が上下、二つ目の値が左右の枠線のスタイルになります。
「border-style: solid double;」と指定すると、上下の枠線が実線になり、上下の枠線が二重線になります。 |
| スタイルを３個指定した場合 |
一つ目の値が上、二つ目の値が左右、三つ目の値が下の枠線のスタイルになります。
「border-style: solid double dotted;」と指定すると、上の枠線が実線になり、左右の枠線が二重線になり、下の枠線が点線になります。 |
| スタイルを４個指定した場合 |
一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の枠線のスタイルになります。
「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: "Ｍ ＳＰ明朝",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 要素の左右にだけ枠線を指定しました！
※枠線の色と太さは自動的に設定されていますが、詳しくは「枠線の注意事項！」を参照してください。
