記事本文を飾り付けてみよう「（その３７）CSS超入門１１」

　今回は、ボーダーのスタイル・太さ・色を一括で設定する方法を「京都写真日記：Wiki文法を使いこなそう」のSUZUTAさんに教えていただいたので、それをご紹介したいと思います。それでは早速始めましょう。

ボックスについてはこちらを参考にしてください。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

style='border:ボーダーのスタイル ボーダーの太さ ボーダーの色;'

という感じになります。
（スタイル・太さ・色のそれぞれの間には" "半角スペースが入ります。）
（今までは付けて説明しなかったのですが、今回は設定値の最初と最後に[']シングルクォーテーションが入ります。これは、間に半角スペースが入った為、付けないと上手く表示されないからです。）
（":"コロンと";"セミコロンの違いに注意！！）

※ボーダーのスタイルと色に関しては、こちらを参考にしてください。

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

それでは、実際に設定したものを見てみましょう。

■ボーダーを普通線、太さ10px、黄色にする（border:solid 10px #ffff00;の場合）

文法）
||<#ccffff' style='border:solid 10px #ffff00;' ``ボーダーのスタイルが普通線・太さが10px・色が黄色の場合||

※補足　分かりやすくするために、セルに色を付けています。以下も同様。

結果）

ボーダーのスタイルが普通線・太さが10px・色が黄色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーを2本線、太さ20px、青色にする（border:double 20px #0000ff;の場合）

文法）
||<#ccffff' style='border:double 20px #0000ff;' ``ボーダーのスタイルが2本線・太さが20px・色が青色の場合||

結果）

ボーダーのスタイルが2本線・太さが20px・色が青色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーを点線、太さ30px、緑色にする（border:dotted 30px #00ff00;の場合）

文法）
||<#ccffff' style='border:dotted 30px #00ff00;' ``ボーダーのスタイルが点線・太さが30px・色が緑色の場合||

結果）

ボーダーのスタイルが点線・太さが30px・色が緑色の場合

※点線に見えませんが、、、、。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上手くいかない場合は、[']シングルクォーテーションなどの付け忘れを確認してくださいね。一括で設定できると、とても楽ですね。是非、試してみてください。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。