スポンサーサイト

ボックスサンプル集

・背景色をつける場合はbackground-color: 色値
・ボックス内文字色はcolor: 色値
をそれぞれ付け加えて下さい。

boxsample1

boxsample2

boxsample3

boxsample4

boxsample5

boxsample6

boxsample7

boxsample8

boxsample9

boxsample10

.boxsample1 {
width: 45%;
height: 50px;
border: 5px solid #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample2 {
width: 45%;
height: 50px;
border: 5px dotted #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample3 {
width: 45%;
height: 50px;
border: 5px dashed #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample4 {
width: 45%;
height: 50px;
border: 5px double #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample5 {
width: 45%;
height: 50px;
border: 5px groove #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample6 {
width: 45%;
height: 50px;
border: 5px ridge #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample7 {
width: 45%;
height: 50px;
border: 5px inset #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample8 {
width: 45%;
height: 50px;
border: 5px outset #666666;
background-color: #ffffff;
} ▲トップへ
.boxsample9 {
width: 45%;
height: 50px;
border-top: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
border-left: 20px solid #666666;
} ▲トップへ
.boxsample10 {
width: 45%;
height: 50px;
border-bottom: 5px solid #666666;
border-left: 20px solid #666666;
} ▲トップへ

記事を飾ろう!トップ
マージン、パディング基礎
背景色を指定する
背景画像を指定する
枠線幅を指定する
枠線色を指定する
枠線の種類を指定する
枠線ごとに一括指定する
幅、高さを指定する
ボックスサンプル集

次のキーワードを検索:[スタイルシート]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。