HTML その12
<h1>ヘッダー作成その2</h1>
前回、ヘッダーのリスト部分がメインにかかっている時点で終わりました。
今回は、それを横並びにしていきます。
(HTML)
<div class="header-logo">タイトル</div>
<div class="header-list">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</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
}
を追加して、出力してみると。
と、このように、タイトルもリストも全部同じ列に並びました。
次回は、タイトルやリストの文字の大きさを調整しながら、
余白などを作り、見やすくしていきたいと思います。
今回はここまでです、ありがとうございました。
私はプログラミング初体験ですので、表記自体間違えているかもしれません、その時は指摘していただけると助かります。
また、知識のある方、コメントなどでアドバイスをお待ちしております!