Box for decoration

ここは、装飾用boxについての適当簡単講座です。

ちなみに、装飾用boxとは、↓のヤツです。



ほとんどのテンプレートの「top.html」内の、下のほうにあるヤツです。


一応、簡単な構造説明と増殖方法の説明をする予定です。
興味ない方は、見るだけ無駄ですから回れ右でお願いします。

あと、他講座のborderとmargin・paddingを理解されていることを前提として説明していきます。

Lecture

では、まずはテンプレートDLファイルに同梱されている「style.css」を開いてみてください。
装飾boxについて書かれている所を探してください。(細かい数値・色指定にはテンプレートによって違いがあるかと思います)



上が説明になります。書いている通りですね! marginとpaddingは 他講座 を参考にしてください。





で、boxの数を増やしたい場合は、上の青文字部分を付け足してくださいな。
box増やすのは、以下延々と同じようにタグ付け足していけば、何個でも増やせますので。
(線の種類や、背景色は自分で調整しましょう)

*上では、background となっておりますが、background-colorでもどちらでも構いません。




ではでは、ここからサンプルboxを置いておきます。
使えそうだったらコピペして使ってみてください。改造もお好きなようにしてもらって構いませんよ。
(サンプルはbox3という設定として表示してあります。御自身で適宜必要なタグを書き足したり、修正したりしてください)


.box3{
border:1px solid #33aaff;
background-color:#ccffff;
}
.box3{
border:3px double #33aaff;
background-color:#ccffff;
}
.box3{
border:1px dashed #33aaff;
background-color:#ccffff;
}
.box3{
border:2px dashed #33aaff;
background-color:#ccffff;
}
.box3{
border:2px dotted #33aaff;
background-color:#ccffff;
}
.box3{
border:3px dotted #33aaff;
background-color:#ccffff;
}
.box3{
border:3px double #aaffff;
background-color:#aaffff;
}
.box3{
border:8px double #aaffff;
background-color:#aaffff;
}
.box3{
border-top:3px solid #33aaff;
border-bottom:1px solid #33aaff;
background-color:#ccffff;
}
.box3{
border-top:3px solid #33aaff;
border-bottom:3px solid #33aaff;
background-color:#ccffff;
}
.box3{
border-style:solid;
border-color:#33aaff;
border-width:1px 3px 3px 1px;
background-color:#ccffff;
}
.box3{
border-style:solid;
border-color:#33aaff;
border-width:1px 3px 1px 4px;
background-color:#ccffff;
}
.box3{
border-left:20px double #ccffff;
border-right:1px solid #33aaff;
background-color:#ccffff;
}
.box3{
border-top:20px double #ccffff;
border-bottom:20px double #ccffff;
background-color:#ccffff;
}



…下にいくほど、わけわからんデザインになってますな!
色は全て水色系統にしてますが、色変えはご自分でやってくださいね。