space
テクニック:上下左右で枠線の太さを変化させる
 
space

スタイルシート「border-width:」では、上下左右のすべての枠線に対し、まとめて線の太さを指定していました。しかし、これらの線の太さを一つひとつ個別に指定することも可能です。「border-top-width:」は上の線の太さについて、同様に「border-bottom-width:」は下の線の太さ、「border-left-width:」は左の線の太さ、「border-right-width:」は右の線の太さを指定できます。また線の太さを「0px」に指定すると、その線だけが表示されなくなります。つまり、上下だけに枠線を表示するといった変則的な枠線を作り出すことも可能なわけです。

 

CSSを使った枠線

CSSを使用すると、このようなデザインのコラムを簡単に作成することができます。枠線の形式や色、余白などを上手に調整して、カッコいいデザインを作成してみては?

▼Source

<P style="border-style:solid ; border-color:#FF9900 ;
border-top-width:10px ; border-bottom-width:1px ;
border-left-width:10px ; border-right-width:1px ;
padding:10px ; margin:20% ; background-color:#FFFFCC">
< FONT size="3" color="#CC0033"><B><U>
CSSを使った枠線
< /U></B></FONT><BR>
< FONT size="2" color="#333333"><BR>
CSSを使用すると、このようなデザインのコラムを簡単に作成することができます。枠線の形式や色、余白などを上手に調整して、カッコいいデザインを作成してみては?
< /FONT>
< /P>

return