HTML その１２

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

前回、ヘッダーのリスト部分がメインにかかっている時点で終わりました。
今回は、それを横並びにしていきます。

（HTML）
<div class="header-logo">タイトル</div>
<div class="header-list">
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ul>

（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
}

最後の「float: left」が要素を横並びにするコードです。

出力すると、

と、このように横に並びます。
とりあえずは、リストがメインにかからなくなりました。

次に、タイトルもリストも全部横並びにしてみます。

先ほどのCSSのコードに

.header-logo{
  float:left
}

を追加して、出力してみると。

と、このように、タイトルもリストも全部同じ列に並びました。

次回は、タイトルやリストの文字の大きさを調整しながら、
余白などを作り、見やすくしていきたいと思います。

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

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

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