|
|
|
HOME > HTML & CSSパーツ > CSS box(ボックス)サンプル
> CSS borderスタイルの指定boxサンプル |
|
CSS borderスタイルの指定boxサンプル |
|
|
|
|
|
|
|
|
|
シンプルなbox(ボックス)の表示のサンプルです。 |
|
box(ボックス)の枠の色やボックス内の色は自由に変えられます。 |
|
|
|
|
|
boxサンプル一覧 |
|
|
|
|
| border solid |
|
border botted |
|
border solidのboxサンプル
|
|
border bottedのboxサンプル
|
|
|
|
| border dashed |
|
border double |
border dashedのboxサンプル
|
|
border doubleのサンプル
|
|
|
|
| border groove |
|
border inset |
border grooveのboxサンプル
|
|
border insetのboxサンプル
|
|
|
|
|
設置方法 |
|
|
|
|
|
 CSS(スタイルシート）記述例 |
|
HTMLへ直接記述する場合は、<head>と</head>の間に下記を記述して下さい。 |
|
|
|
|
|
|
border solid |
|
border botted |
|
|
|
<style type = "text/css">
<!--
.box1 {
width: 200px;
height: 100px;
border: 1px solid #000066;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
<style type = "text/css">
<!--
.box2 {
width: 200px;
height: 100px;
border: 1px dotted #000066;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
|
|
|
border dashed |
|
border double |
|
|
|
<style type = "text/css">
<!--
.box3 {
width: 200px;
height: 100px;
border: 1px dashed #000066;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
<style type = "text/css">
<!--
.box4 {
width: 200px;
height: 100px;
border: 1px double #000066;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
|
|
|
border groove |
|
|
border inset |
|
<style type = "text/css">
<!--
.box3 {
width: 200px;
height: 100px;
border: 8px groove #cccccc;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
<style type = "text/css">
<!--
.box3 {
width: 200px;
height: 100px;
border: 8px inset #999999;/*枠の色*/
background-color: #e7e7e7;/*ボックス内の色*/
}
-->
</style>
|
|
|
|
|
box(ボックス)を並列にする方法 |
|
ボックスを横並びにしたい場合は、floatをスタイルシートに加えれば並列になります。 |
|
float: left; |
|
|
|
|
|
HTML記述例 |
|
ボックスを挿入する場所へ下記を記述して下さい。 |
|
|
|
| border solid |
|
border botted |
|
<p class="box1" align="left">
ここに文章を書く
</p>
|
|
|
|
<p class="box2" align="left">
ここに文章を書く
</p>
|
|
|
|
|
| border dashed |
|
border double |
|
<p class="box3" align="left">
ここに文章を書く
</p>
|
|
|
|
<p class="box4" align="left">
ここに文章を書く
</p>
|
|
|
|
|
| border groove |
|
border inset |
|
<p class="box5" align="left">
ここに文章を書く
</p> |
|
|
|
<p class="box6" align="left">
ここに文章を書く
</p> |
|
|
|
|
|
【外部サイト】 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
