枠線をつける
上部
スタイルシートを使ってボックスの枠線をつける方法について説明していくよ。
枠線を付けるには「border」を使うんだよ。
枠線を付ける際には、太さ、色、線種の３つを指定する事が出来るよ。
枠線を指定する
上部
例えば、「見出し２」に、太さが1pxで、色が黒で、線種が普通の線の枠線をつけたい場合、スタイルシートに次のように書こう。
h2{border:1px #000000 solid;}
学
なるほどー。
上部
ちなみに、上下左右それぞれに枠線を変える事も出来るんだよ。
上の枠線は「border」を「borde-top」に変更しよう。
同様に、下の枠線は「borde-bottom」
右の枠線は「borde-right」
左の枠線は「borde-left」
を使おう。組み合わせることで、上と下だけ枠線を付けることも可能だよ。
学
なるほど。工夫すれば色々出来そうですね。
では、早速僕の自己紹介の「見出し２」に枠線をつけてみますよ。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
background-color:#FFFF99;
border:1px solid #FF9900;
}
h3{
font-size:13px;
background-color:#CCFFFF;
}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
学
「見出し２」にオレンジ色っぽい枠線をつけてみましたよー。
学の自己紹介を新しいウィンドウで開く
うん。さらに鮮やかな色使いになりました！
