ＣＳＳ属性 これだけはっ！その２
スタイルシートの属性（線）
大事な 大事な 属性ちゃん♪
ホームページを魅せるためには、線の使い方は重要です。
線を見せることもデザインなら、見せないこともデザインです。
ＣＳＳで設定してしまえば 「 あの線を出したい、消したい 」が、後からナンボでもできます。
たかが線。されど線。
自由に描きまくりましょう。
ＣＳＳの線が、どのタグ要素に使えるかというと、すべてです。
body を筆頭に、table td span h1 などなど、どれにでも線を付けることができます。
いじくれるタイプは、線の種類、色、太さ、そして場所です。
まとめて設定することもできるので、線種のお話をしたあと、ヒトっとびにせつめいしていきます。
- 線の種類
- 線の四辺それぞれを設定
- 線の四辺をまとめて設定
線の種類はぜんぶで９つ。「表示しない」ものも含まれます。
例によってずらーっと並べてます。ここでは、色は黒です。
none/hidden[線なし]
dotted [点線（丸い点）]
dashed [破線]
solid [直線]
double [二重線]
groove [立体枠（窪み）]
ridge [立体枠（隆起）]
inset [立体枠（内側全体が窪み）]
outset [立体枠（内側全体隆起）]
一口メモ
上の例では<span>タグに設定しています。
幅や、高さも調整してあり、それぞれ width=310 height=15 です。
各線は、種類のほかにも色や幅を変えることができ、それぞれにプロパティがあります。でも、一本の線に対して３つもの単語をキーインするのはメンドウであり、実用的でもありませんね。
そこで、４つの線（上下左右）それぞれに線種や色などをきめる、便利なプロパティを使うことになります。
下では、ｈ６タグを例にとります。
ＣＳＳ側 ＞ 文字サイズを大きくしてみます。
色との複合も自由です。
h6.t_line{
border-top : 2px dotted red;
border-right : 20px double gray;
border-bottom: 5px solid peru;
border-left : 10px inset blue;
}
ＨＴＭＬ側 ↓
<h6 class="t_line">ナンジャ こりゃァ！</h6>
ナンジャ こりゃァ！
borderプロパティに対するバリューは幅 線種 色の順番で並びます。
上記のborder-top場合、2pxが線の幅、dottedが線種、
そしてredが色となります。
一つのタグの上下左右にありますね。
線の色や、種類などを設定する方法はいくつかあります。
ここは 「４辺を一つのプロパティでまとまて設定しちゃおう！」というコーナー。メンドくさがりのあなたやわたしにピッタリですね。
線の色や種類を変えないのなら、この方法がカンタンです。
ＣＳＳ側 ＞ ｈ６要素の線をまとめて設定します。
h6.t_line2{
border : 2px dashed red;
}
ＨＴＭＬ側 ↓
<h6 class="t_line2">ちがうのよ。わたしはきんどーちゃんよ。うひょひょうひょっ</h6>
ちがうのよ。わたしはきんどーちゃんよ。うひょひょうひょっ
|
