CSS

borderで境界線をつけてみよう

要素に境界線を設定するためのborderプロパティについて見ていきます。

  • border-width、border-style、border-color
  • border
  • border-top, bottom, right, left
  • border-radius

border-width、border-style、border-color

・今回は境界線を指定するためのborderプロパティについて学んで行きます。

・ボーダーを指定する場合は3種類指定する項目があり、1つ目はボーダーの幅、2つ目はどんなボーダーの種類か、3つ目はボーダーの色です。

・まずボーダーの幅についてはどれくらいの太さのボーダーを指定しプロパティはborder-width: で値はpxで指定できます。2pxで指定したい場合はborder-width:  2px;でいいでしょう。

・ボーダーの種類はよく使われるのは実線と点線などを選ぶことができますプロパティはborder-style: で値は実線ならsolod, 点線ならdashed;と指定します。border-style: solid: と指定すると実線を指定します。

・ボーダーの色は以前やったようにキーワードやrgb, hslなどで指定できます。プロパティはborder-color: なので赤を指定したい場合、border-color: red;とすればいいでしょう。

RGBAを使った色の表現方法を覚えよう

HSLAを使った色の表現方法を覚えよう

border

・また、borderを指定する場合一括指定プロパティが準備されていて、その場合borderプロパティで指定できます。値は幅、種類、色を半角空白を開けて指定すればおkです。

・例えば、幅2px,実線で色は#000の黒を指定したい場合、border: 2px solod #000;とすればいいでしょう。

border-top, bottom, right, left

・また部分的にborderをつけることもできます。プロパティで線を入れる箇所を指定すればよく、上部はborder-top,下部はborder-bottom, 右はborder-right, 左はborder-leftとしていきます。

・なので上部だけに線を入れたい場合、border-top: 2px solid #000;とすれば上部だけに幅2pxの黒い実線が引くことができます。

・またborder: none: とすると線なしと指定できるので四方すべてを囲ったあとに消したい線だけを消すこともできます。

border-radius

・最後に角を丸める方法ですがborder-radiusプロパティをつかってみましょう。値はpxや%で指定できます。

・なのでborder-radius: 10pxと指定すると4つ角すべてが頂点から10px分だけ丸くなります。

・また%で指定すると一辺のそのパーセンテージ分丸めることができ50%にするとアイコンのような丸い円のような図形を作ることができます。

-広告-

 

 






-CSS