HTML その１３

<h1>ヘッダー作成その３</h1>

前回のこの画像から、見やすいように、CSSで文字の大きさ、余白の
設定をしていきます。

（CSS）
.header{
  background-color: #f00 ;
  height: 90px;
}

.main{
  background-color: #0f0 ;
  height: 600px;
}

.footer{
  background-color: #00f ;
  height: 270px;
}

li{
  list-style: none;
  float: left;
  padding:33px 20px;
}

.header-logo{
  float:left;
  font-size:36px;
  padding:20px 70px 20px 20px;
}

「font-size」で文字の大きさを調整し、
「padding」で余白の調整をしました。
paddingの表記については後にして出力してみます。

このように、タイトルもロゴも指定した感覚で余白をつけ、
見やすくなったと思います。

・paddingの書き方です。

padding:20px 70px 20px 20px;
これは上部20px、右側70px、下部20px、左側20px
余白をつけろという意味です。

padding-top:20px;
padding-right:70px;
padding-bottom:20px;
padding-left:20px;

の省略形が、padding:20px 70px 20px 20px;　となります。

padding:20px 10px;
という表記だと、上部と下部が20px、右側と左側が10px
余白をつけろということになります。

padding:30px;
これは四方全て30px余白を空けるという意味です。

一応これで、ヘッダーについては終了します。
次回は同じようにフッターを作ってアウトプットしていこうかと
考えています。

今回はここまでにします。
ありがとうございました。

私はプログラミング初体験ですので、表記自体間違えているかもしれません、その時は指摘していただけると助かります。

また、知識のある方、コメントなどでアドバイスをお待ちしております！