目的
- HTMLファイルのリストで箇条書きにされた内容を縦ではなく横並びに表示する方法をまとめる。
押さえるポイント
- 横並びに表示したいliタグかliタグに与えたクラス名を指定してCSSで設定する。
- CSSではfloatプロパティを使用する。
- 画面の左に寄せて横並びにしたいときはfloatプロパティでleftを指定する。
- 画面の右に寄せて横並びにしたいときはfloatプロパティでrightを指定する。
書き方の例
- 下記にHTMLファイルの内容を記載する。
<ul>
<li>おはようございます。</li>
<li>こんにちは。</li>
<li>こんばんは。</li>
</ul>
- floatプロパティでleft(左)を指定する。 ※画面右側に表示したいときはrightを指定する。
- 下記にCSSファイルの内容を記載する。
li {
float: left;
}
※今回は書き方の例より具体的な例が思い浮かばなかったため、具体的な例は記載しない。