ホーム＞コース別ガイド一覧＞枠線の太さ、スタイル、色をまとめて設定しよう！
枠線の太さ（width）、スタイル（style）、色（color） をまとめて設定しよう！
（border-top、border-bottom、border-left、border-right、border プロパティ） |
   |
CSS一覧プロパティ辞典 … border-top プロパティ
border-top プロパティを使うと、枠線の上側の太さ、スタイル、色 をまとめて指定できます。値は、太さやスタイル、色を半角スペースで区切って指定します。
CSS一覧プロパティ辞典 … border-bottom プロパティ
border-bottom プロパティを使うと枠線の下側の太さ、スタイル、色 をまとめて指定できます。値は、太さやスタイル、色を半角スペースで区切って指定します。
CSS一覧プロパティ辞典 … border-left プロパティ
border-left プロパティを使うと、枠線の左側の太さ、スタイル、色 をまとめて指定できます。値は、太さやスタイル、色を半角スペースで区切って指定します。
CSS一覧プロパティ辞典 … border-right プロパティ
border-right プロパティを使うと、枠線の右側の太さ、スタイル、色 をまとめて指定できます。値は、太さやスタイル、色を半角スペースで区切って指定します。
CSS一覧プロパティ辞典 … border プロパティ
border プロパティを使うと枠線の上下左右の太さ、スタイル、色 をまとめて指定できます。値は、太さやスタイル、色を半角スペースで区切って指定します。
※値については「枠線の太さを設定しよう！」、「枠線のスタイルを設定しよう！」、「枠線の色を設定しよう！」を参照してください 。
値の並べる順序！
枠線の border-top プロパティ、border-bottom プロパティ、border-left プロパティ、border-right プロパティ、border プロパティ値には太さ、スタイル、色の値を指定できますが、並べる順序に決まりはありません。また、値を省略できたりもします。ただし、注意事項がありますので、「枠線の注意事項！」の内容を確認しておいて下さい。
border-left プロパティ、border-right プロパティを使用し、h1 要素の左右のみの枠線を指定しましょう！なお、border-left プロパティ、border-right プロパティを使用して枠線の左右の太さを共に15pxに指定し、また左右の枠線のスタイルを共に「solid」に指定し、さらに左右の枠線の色を「red」（赤）に指定しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin;}
h1 {
background-color: orange;
text-align: center;
border-left: 15px solid red;
border-right: 15px solid red;
}
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プロパティ、border-rightプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[border-leftプロパティ、border-rightプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように h1 要素の左右それぞれの枠線の太さ、スタイル、色をまとめて指定しました！
※枠線の太さをキーワードで指定するとブラウザによって表示が異なります。また、スタイルを指定しないと枠線は表示されません。詳しくは「枠線の注意事項！」を参照してください。
