作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > スタイルシート > CSSの属性(線)

CSS属性 これだけはっ!その2

スタイルシートの属性(線)

大事な 大事な 属性ちゃん♪

 ホームページを魅せるためには、線の使い方は重要です。
 線を見せることもデザインなら、見せないこともデザインです。

 CSSで設定してしまえば 「 あの線を出したい、消したい 」が、後からナンボでもできます。

 たかが線。されど線。
 自由に描きまくりましょう。
 
 CSSの線が、どのタグ要素に使えるかというと、すべてです。
 body を筆頭に、table td span h1 などなど、どれにでも線を付けることができます。

 いじくれるタイプは、線の種類、色、太さ、そして場所です。

 まとめて設定することもできるので、線種のお話をしたあと、ヒトっとびにせつめいしていきます。

  1. 線の種類
  2. 線の四辺それぞれを設定
  3. 線の四辺をまとめて設定
■ 線の種類をきめる

線の種類はぜんぶで9つ。「表示しない」ものも含まれます。
例によってずらーっと並べてます。ここでは、色は黒です。

none/hidden[線なし]

dotted   [点線(丸い点)]

dashed   [破線]

solid   [直線]

double   [二重線]

groove   [立体枠(窪み)]

ridge   [立体枠(隆起)]

inset   [立体枠(内側全体が窪み)]

outset   [立体枠(内側全体隆起)]

一口メモ
上の例では<span>タグに設定しています。
幅や、高さも調整してあり、それぞれ width=310  height=15 です。

■ 線の四辺それぞれを設定

各線は、種類のほかにも色や幅を変えることができ、それぞれにプロパティがあります。でも、一本の線に対して3つもの単語をキーインするのはメンドウであり、実用的でもありませんね。

そこで、4つの線(上下左右)それぞれに線種や色などをきめる、便利なプロパティを使うことになります。

下では、h6タグを例にとります。

CSS側 > 文字サイズを大きくしてみます。
        色との複合も自由です。

h6.t_line{
 border-top  : 2px dotted red;
 border-right : 20px double gray;
 border-bottom: 5px solid peru;
 border-left : 10px inset blue;
}


HTML側 ↓

<h6 class="t_line">ナンジャ こりゃァ!</h6>

ナンジャ こりゃァ!

borderプロパティに対するバリューは幅 線種 色の順番で並びます。
上記のborder-top場合、2pxが線の幅、dottedが線種、
そしてredが色となります。

■ 線の四辺をまとめて設定

一つのタグの上下左右にありますね。
線の色や、種類などを設定する方法はいくつかあります。

ここは 「4辺を一つのプロパティでまとまて設定しちゃおう!」というコーナー。メンドくさがりのあなたやわたしにピッタリですね。

線の色や種類を変えないのなら、この方法がカンタンです。

CSS側 > h6要素の線をまとめて設定します。

h6.t_line2{
 border  : 2px dashed red;
}



HTML側 ↓

<h6 class="t_line2">ちがうのよ。わたしはきんどーちゃんよ。うひょひょうひょっ</h6>

ちがうのよ。わたしはきんどーちゃんよ。うひょひょうひょっ
<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする