CSSスキル - 第4章 Lesson6

境界線を付けるborderプロパティの書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

境界線をつけるborderというプロパティについて学んでいきましょう。



この動画で学べること

・borderの書き方



境界線をつけるborderを書いてみよう

境界線とは、marginとpaddingの間の、ボックスの背景の周りに入る線のことです。
境界線の書き方は、「border: 線のサイズ 線の種類 色 ;」となりますが、例えば10pxの実線で赤い色の場合、border: 10px solid red; と書きます。
線の種類には以下のようなものがあるので、よく使うものは覚えておきましょう。





では実際に<header>タグにborderを書いてみましょう。


header {
width: 100%;
height: 80px;
border-bottom: 1px solid #D1D1D1;
}




一度、保存してブラウザで見てみましょう。
ヘッダーの下に薄い境界線を引くことができました。
次に、<div>タグのid名「design」の部分を見ていきましょう。
これは上の境界線だけデザインが違うので、上下左右のボーダーをそれぞれ書く必要があります。



div#design {
width: 460px;
height: auto;
background-color: #fff;
margin: 30px 0 30px 30px;
padding: 20px 20px 20px 20px;
border-right: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
border-left: 1px solid #D1D1D1;
border-top: 3px solid #d86487;
}




保存してブラウザで見てみると、上の線だけ色や太さが違うデザインになりました。
同じやり方で、<div>タグのid名「event」の部分にも上だけ色の違う境界線をかけてください。




div#event {
width: auto;
height: auto;
background-color: #fff;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
padding: 20px;
border-right: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
border-left: 1px solid #D1D1D1;
border-top: 3px solid #59B0C1;
}