2017初めて子供が生まれました。初めての子供なので毎日楽しいのですがわからない事もいっぱいあります。 子育てを経験されたかたなどからのコメントお待ちしております。 また、これから出産される方などに少しでもお手伝いできたらと思っています。

パパが娘にできること

初めての子供で子供のために何ができるか挑戦中

余白の調整

余白の調整

 

 

今日もHTMLの基礎をします。

これは私自身の頭の中の整理のために記載しております。

間違えや表現が違う可能性があります。

間違えや表現が違う場合は教えて頂けると嬉しく思います。

 

 

  1. 余白の調整
  2. 余白の種類
  3. 余白の記載方法

 

 

CSSを使用するときはHTMLファイルとは別にCSSファイルが必要です。

 

 

余白の調整

HTMLで記載した要素は基本的に縦に並びます。

これを横並びにするにはCSSファイルで指定をします。

 

ヘッダーの余白を調整することのいより

適切な配置になります。

 

余白を指定する場合はCSSファイルに

”padding”を使用します。

 

 

HTMLファイル

<div class="logo">

TEST1

</div>

 

CSSファイル

.logo{

padding:20px;

}

paddingは上下左右の余白を追加する。

 

 

余白の種類

 

 

上を20px余白を作るには

.logo{

padding-top:20px;

}

 

下を20px余白を作るには

.logo{

padding-bottom:20px;

}

 

左を20px余白を作るには

.logo{

padding-left:20px;

}

 

右を20px余白を作るには

.logo{

padding-right:20px;

}

 

 

余白の記載方法

 

余白指定の記載方法は3種類あり

それぞれ記載します。

 

記載方法1

 

CSSファイル

.logo{

padding-top:20px;

padding-right:10px;

padding-bottom:20px;

padding-left:10px;

}

 

 

記載方法2

 

CSSファイル

.logo{

padding:20px 10px 20px 10px;

}

上→右→下→左の順番で記載できる。(時計回り)

 

 

記載方法3

 

CSSファイル

.logo{

padding:20px 10px;

}

 

上と下、右と左が同じ場合はまとめて記載することができる

20PXが上下、10pxが左右のセットになる。

 

毎日少しづつ頑張ろう!!