ボーダーのスタイルの設定
border-style
border:none;ボーダーは描かれない。
border:solid 3px black; 実線
border:dotted 3px red; 点線
border:dashed 3px blue; 破線
border:double 5px brown; 二重線
border:groove 5px; 枠線を窪んだ感じで表示
border:ridge 10px silver; 枠線が盛り上がってみえる。
border:inset 5px; 内側全体がへこんだ感じ
border:outset 5px; 内側全体が隆起した感じ
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<html>
<head>
<title>border-styleプロパティ 枠線の種類、指定</title>
<style type="text/css">
<!--
.OyaDiv{text-align:center;padding:10px 0;
background:#e6e6fa;}
.OyaDiv p{width:500px; margin:10px auto; padding:5px;
background: #afeeee;}
/* .OyaDivはページ装飾用 */
#bStyle0 {border:none;}
#bStyle1 {border:solid 3px black;}
#bStyle2 {border:dotted 3px red;}
#bStyle3 {border:dashed 3px blue;}
#bStyle4 {border:double 5px brown;}
#bStyle5 {border:groove 5px;}
#bStyle6 {border:ridge 10px silver;}
#bStyle7 {border:inset 5px;}
#bStyle8 {border:outset 5px;}
-->
</style>
</head>
<body>
<div class="OyaDiv">
<p id="bStyle0">border:none;ボーダーは描かれない。</p>
<p id="bStyle1">border:solid 3px black;実線</p>
<p id="bStyle2">border:dotted 3px red;点線</p>
<p id="bStyle3">border:dashed 3px blue;破線</p>
<p id="bStyle4">border:double 5px ;brown二重線</p>
<p id="bStyle5">border:groove 5px;枠線を窪んだ感じで表示</p>
<p id="bStyle6">border:ridge 10px silver; 枠線が盛り上がってみえる。</p>
<p id="bStyle7">border:inset 5px;内側全体がへこんだ感じ</p>
<p id="bStyle8">border:outset 5px;内側全体が隆起した感じ</p>
</div>
</body>
</html>border-style プロパティ
| 設定値 | 概要 |
|---|---|
| none | ボーダー表示なし（デフォルト） |
| solid | 実線 |
| dotted | 点線 |
| dashed | 破線 |
| double | 二重線 |
| groove | 枠線を窪んだ感じで表示します。 |
| ridge | 枠線が隆起しているように見えます。 |
| inset | 枠線の内側を窪んだ感じで表示します。 |
| outset | 枠線の内側が浮き上がって見えます。 |
※ IE と Firefoxでは見え方が違います。
IE Firefox ともborder-widthの指定の仕方でも見え方が変わってきます。
画像に枠線を付ける border-style:ridge;
額縁に入れたようでとても気に入ってます。
HTML コード
<p style="width:320px; border:30px ridge silver;">
<img src="sea004.jpg" width="320" height="215"
border="0"></p>
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
paddingプロパティ ボックスの内側の余白
text-align プロパティ
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
a:hoverで、へこむアンカーテキスト、リンクボタン
