[HTML&CSS]borderの使い方

今回は、CSSのborderの基本的な使い方についてご紹介します。

[HTML&CSS]borderの使い方

まずは、使用例をご覧ください。

.item {
　　　　border: 5px solid #333;
}

このように、『border: 線の太さ/線の種類/線の色 ;』の順番で線を設定しています。

線の太さの設定・・・px・emの単位を使用する

線の種類・・・none・hidden・solid・double・dashed・dottedなど

線の色・・・『#〜』や『black』など色を指定する

上下左右の一部に線を描きたい場合

上下左右の一部に線を書きたい場合は、『border-top』などのように指定します。

以下の使用例をご覧ください。

HTML

<div class="box box1">
      <img src="./hiyoko.jpg" alt="#">
 </div>    
<div class="box box2">
      <img src="./hiyoko.jpg" alt="#">    
</div>    <div class="box box3">
      <img src="./hiyoko.jpg" alt="#">    
</div>    
<div class="box box4">
      <img src="./hiyoko.jpg" alt="#">    
</div>

CSS

img {
  width: 100%;
　}

.box {
  width: 500px;
  margin: 0 auto 50px;
　}

.box1 > img{
  border-top: 10px solid #333;
　}

.box2 > img{
  border-bottom: 10px solid #333;
　}

.box3 > img{
  border-right: 10px solid #333;
　}

.box4 > img{
  border-left: 10px solid #333;
　}

このように、上下左右の一部に線を描くことができます。

また、以下のように、borderを設定し、線の一部をtransparentによって消す方法もあります。

HTML

 
<div class="box box1">
   <img src="./hiyoko.jpg" alt="#">
 </div>

CSS

img {
  width: 100%;
 }
.box {
  width: 500px;
  margin: 0 auto 50px;
 }
.box1 > img {
  border: 10px solid #333;
  border-right: transparent;
 }

まとめ

・『border: 線の太さ/線の種類/線の色 ;』のように設定する。

・上下左右の一部の線を描きたい場合は、『border-top』のよう設定する。

今回は、borderの基本的な使い方について解説しました。

また、以下の記事では、padding/border/marginの関係について解説していますので、気になる方はぜひ！

[margin/padding]テキストに余白をつける方法[HTML&CSS]

それでは、最後まで読んでいただきありがとうございました。