インラインスタイルシート２

スタイルシートその２

テーブルのようにBORDERタグを使ってアクセントをつけてみましょう。

★枠に色を付けてみましょう。

文字を真ん中に移動させる事も出来ます。

borderつまり枠線はstyleで設定します。太さ（ピクセル）、線の種類、色の順になっています。文字の色はcolorで設定します。
テキスト位置はalignで、中央ならcenter、設定して無い場合は左になります。
枠線の種類は none（線無し）、 dotted（点線）、 dashed（粗い点線）、 solid（実線）、 double（二重線）、 groove（谷線）、
ridge（山線）、 inset（内線）、 outset（外線）、 inherit（継承） と色々あります。

★枠線の中に背景色をつける

背景に色を付けると、こんな感じかな

背景の設定は（background）で設定できます。

★枠線の上下左右に色を付ける。

枠線の上下左右に色を付ける事も出来ます。

分かりやすくtop、left、right、bottomで設定してあります。
枠線の太さ（width）は、ピクセル（px)で、
色に関しては色の値（#FFFFFF）にしてあります。
色見本は別のページで確認してください。
文字の大きさも font-sizeで設定できます。

★枠線の中に背景画像を入れる。

どうでしょう？
色々出来るもんですねぇ(^^ゞ
面白いですねぇ
ちなみに枠線を白にすると
きれいに出るかな。

背景画像はbackground-imageで、url（イメージのある場所）
枠線内の余白はpaddingで設定します。padding-leftなら左、上ならpadding-top、下ならpadding-bottom、右ならpadding-right
ピクセルで設定してあります。

これだけでも、結構色々お遊びが出来ると思います。次回は文字にアクセント付けてみましょう。