【CSS】floatで並び方をかえる

リストを横並びと縦並びとでわける

フルーツは横並びで野菜（赤文字）は縦並びにしたい。

例.html

<div class="fruits">
  <ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>メロン</li>
  </ul>
</div>
<div class="vegetable">
  <ul>
    <li>トマト</li>
    <li>かぼちゃ</li>
    <li>キャベツ</li>
  </ul>
</div>

例.css

.fruits {
  float: left;
}

.vegetable {
  float: left;
  color: red;
}

li {
  float: left;
  list-style: none;
  margin-right: 20px;
}

コードを確認すると・・・

CSSファイルの fruits クラスと vegetable クラスの float: left; はHTMLファイルで div を使っているのでブロック化されている。
それを横並びにしただけ。
これはとくに関係なさそう。

CSSファイルの li の float: left; はブロック関係なく全ての li に対して横並びになっている。
原因はこれだな。

これを野菜ブロックだけ縦並びにしたい。
野菜ブロックだけに適応させたいということは、CSSを・・・

例.css

li {
  list-style: none;
  margin-right: 20px;
}

.fruits li {
  float: left;
}

まずは li の部分の float: left; を消す。
それからフルーツブロックの文字を横並びにしたいので
.fruits クラスの li に float: left; を適用するようコーディングすれば・・・

Web
↓

できました！

まとめ

CSSでクラス名のあとに要素名を記入すると、そのクラスの要素にのみcssを適用することができる。

.クラス名 要素名 {
  プロパティ: 値;
}

左右に配置する

さきほどの野菜ブロックを右端に配置してみる

例.css

.vegetable {
  float: right;
  color: red;
}

float: left; を float: right; に変更

Web
↓

かんたん