ホーム＞コース別ガイド一覧＞枠線の太さを設定しよう！
枠線の太さを設定しよう！
（border-top-width、border-bottom-width、border-left-width、border-right-width、border-width プロパティ） |
 
|
CSS一覧プロパティ辞典 … border-top-width プロパティ
border-top-width プロパティを使うと、枠線の上側の枠の太さを指定できます。値は、同ページの枠線の太さの値を参照してください。
CSS一覧プロパティ辞典 … border-bottom-width プロパティ
border-bottom-width プロパティを使うと、枠線の下側の枠の太さを指定できます。値は、同ページの枠線の太さの値を参照してください。
CSS一覧プロパティ辞典 … border-left-width プロパティ
border-left-width プロパティを使うと、枠線の左側の枠の太さを指定できます。値は、同ページの枠線の太さの値を参照してください。
CSS一覧プロパティ辞典 … border-right-width プロパティ
border-right-width プロパティを使うと、枠線の右側の枠の太さを指定できます。値は、同ページの枠線の太さの値を参照してください。
CSS一覧プロパティ辞典 … border-width プロパティ
border-width プロパティを使うと、枠線の上下左右の枠の太さをまとめて指定できます。値は、同ページの枠線の太さの値を参照してください。また、値は１個から４個指定可能で、並べた値の数よって意味が変わります。詳細は下の「[border-widthプロパティの値]」という表をご覧ください。
[border-widthプロパティの値]
| border-widthプロパティの値の個数 |
効果 |
| 太さを１個指定した場合 |
上下左右の枠線の太さになる。
「border-width: 1px;」と指定すると、上下左右の枠線が1pxになります。 |
| 太さを２個指定した場合 |
一つ目の値が上下、二つ目の値が左右の枠線の太さになります。
「border-width: 1px 2px;」と指定すると、上下の枠線が1pxになり、上下の枠線が2pxになります。 |
| 太さを３個指定した場合 |
一つ目の値が上、二つ目の値が左右、三つ目の値が下の枠線の太さになります。
「border-width: 1px 2px 3px;」と指定すると、上の枠線が1pxになり、左右の枠線が2pxになり、下の枠線が3pxになります。 |
| 太さを４個指定した場合 |
一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の枠線の太さになります。
「border-width: 1px 2px 3px 4px;」と指定すると、上の枠線が1pxになり、右の枠線が2pxになり、下の枠線が3pxになり、左の枠線が4pxになります。 |
[枠線の太さのプロパティの値]
| 値 |
効果 |
| 長さ |
「px」、「em」などの単位付きの長さ。
|
| thin（シン） |
太さを細めで表示する。 |
| medium（ミディアム） |
太さを中くらいで表示する。 |
| thick（シック） |
太さを太めで表示する。 |
border-left-width プロパティ、border-right-width プロパティを使用し、h1 要素の左右のみの枠線の太さを15pxに指定しましょう！なお、border-left-style プロパティで左の枠線のスタイルを「solid」に、border-right-style プロパティで右の枠線のスタイルを「solid」に指定しています。
記述例
<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;
border-left-width: 15px;
border-right-width: 15px;
}
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-widthプロパティ、border-right-widthプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[border-left-widthプロパティ、border-right-widthプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように h1 要素の左右にだけ枠線の太さを「15px」に指定しました！
※枠線の太さをキーワードで指定するとブラウザによって表示が異なります。また、スタイルを指定しないと枠線は表示されません。詳しくは「枠線の注意事項！」を参照してください。
