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

　今回も前回に引き続き、「ボーダー」についてご説明したいと思います。今回は太さを設定してみます。それでは早速始めましょう。

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

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

基本的なルールとしては

border:ボーダーのスタイル;border-color:ボーダーの色;border-width:ボーダーの太さ;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

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

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

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

■ボーダーの太さを10pxにする（border-width:10px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:10px; ``ボーダーの太さが10pxの場合||

※補足　分かりやすくするために、セルとボーダーに色を付けています。また、スタイルは普通の線で表示しています。以下も同様。

結果）

ボーダーの太さが10pxの場合

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

■ボーダーの太さを20pxにする（border-width:20px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:20px; ``ボーダーの太さが20pxの場合||

結果）

ボーダーの太さが20pxの場合

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

■ボーダーの太さを30pxにする（border-width:30px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:30px; ``ボーダーの太さが30pxの場合||

結果）

ボーダーの太さが30pxの場合

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

今回は、簡単ですね。他のスタイルでも、太さを変えることができますので、いろいろと試して見てくださいね。

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

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

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

早速のコメントありがとうございました。良い評価ををおおきに！！アドバイスをひとつ

'style='border:solid 12px #0000ff'で一括設定出来ますよ。ぼくは出来るだけ省略できるようにテストいろいろしております。またヨロシク♪

SUZUTAさん、いつも有り難うございますね。参考にさせて頂きます。後で記事を書いてみますね。また、参考にさせていただきますので、よろしくお願いします。

[casino gambling]

Nice Hello site: http://urlcut.com/1ckkw payday http://1nk.us/abjr gambling

転載させてください

[Aliyah]

<a href="http://1234famed.freehoxt.com/302.html" >lala andersen</a> [url=http://1234famed.freehoxt.com/302.html]lala andersen[/url] <a href= http://1234famed.freehoxt.com/302.html >lala andersen</a>
<a href="http://1234famed.freehoxt.com/748.html" >mission 辿 辿rinaire gamez</a> [url=http://1234famed.freehoxt.com/748.html]mission 辿 辿rinaire gamez[/url] <a href= http://1234famed.freehoxt.com/748.html >mission 辿 辿rinaire gamez</a>
<a href="http://1234famed.freehoxt.com/43.html" >watch her

転載＆傑作させてくださいね＾＾