スタイルシート講座〜ボックス編
それではＢＯＸ編行って見ましょう。
まずは枠線の色を指定してみます。
border-color:上下左右同一色
border-color:上下、左右
border-color:上、左右、下
border-color:上、右、下、左
で指定します。
ここではＰタグに指定してみます。
border-solidは次に出てきます。
ＨＥＡＤ宣言：
<style type="text/css">
P.class1 {border-color:green;border-style:solid;}
P.class2 {border-color:red blue yellow;border-style:solid;}
<style>
ＢＯＤＹ宣言：
<p class="class1">枠線を変えてみました。</p>
<p class="class2">枠線を変えてみました。</p>
枠線を変えてみました。
枠線を変えてみました。
次はさっきも出てきた枠線のスタイルの指定をします。
border-styleに続けて書きます
solid 直線
double 二重線
groove 溝線
ridge 稜線
inset 沈み込み線
outset 浮き上がり線
dotted 点線
dashed 破線
none なし
です。
ＨＥＡＤ宣言：
<style type="text/css">
P.class3 {border-style:solid;}
P.class4 {border-style:double;}
P.class5 {border-style:groove;}
P.class6 {border-style:ridge;}
P.class7 {border-style:inset;}
P.class8 {border-style:outset;}
P.class9 {border-style:dotted;}
P.class10 {border-style:dashed;}
<style>
ＢＯＤＹ宣言：
<p class="class3">枠線を変えてみました。</p>
<p class="class4">枠線を変えてみました。</p>
<p class="class5">枠線を変えてみました。</p>
<p class="class6">枠線を変えてみました。</p>
<p class="class7">枠線を変えてみました。</p>
<p class="class8">枠線を変えてみました。</p>
<p class="class9">枠線を変えてみました。</p>
<p class="class10">枠線を変えてみました。</p>
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
枠線を変えてみました。
最後に枠線のスタイルの設定をまとめてみましょう。
ここで新しくborder-widthが出てきますが、これは枠線の太さの設定です。
border:色 スタイル 太さ
で指定します。
ＨＥＡＤ宣言：
<style type="text/css">
P.class11 {border:groove 8pt red;}
P.class12 {border:dotted 8pt green;}
<style>
ＢＯＤＹ宣言：
<p class="class11">枠線を変えてみました。</p>
<p class="class12">枠線を変えてみました。</p>
枠線を変えてみました。
枠線を変えてみました。
