CSSのスタイルについて

ヘッダーを作ってみる①

htmlのコードはこんな感じ

index.html

   <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

まずは＜li＞の黒点を外すところから！

stylesheet.css

li {
 list-style: none;
}

これでリストの黒点を外すことができた。

次にリストの中身を横並びにする
floatプロパティを使うことで、指定した要素を横並びにすることができる。

stylesheet.css

li {
 list-style: none;
/*ここにfloatプロパティを追加*/
 float: left;
}

「float: left;」を使用することによって要素が左から順に横並びになる。

ロゴとリストを横並びにする

stylesheet.css

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

＜li＞タグの黒点を外して横並びにするまでやってみました。
次回はこの続きから