CSSでliを縦並びにする方法

2022年01月01日

「横並びになっているliを縦並びにしたい！」

「パソコンでは縦並びに、スマホでは縦並びにしたい！」

横並びになっているliを縦並びにする方法を解説します。

liは基本的に縦並び

ul liは意図的にCSSを指定しない限り、下記のように縦並びになります。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

横並びになっているliを縦並びに戻す方法についてみていきましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

liを横並びにしているCSSを解除すれば、縦並びになります。

横並びにしているCSSがわからない場合の確認方法も紹介します。

かかっているCSSを確認するにはDevToolsを使います。

Chromeで確認したい箇所で右クリック＞検証を押すと起動します。

具体的な使い方は下記記事をご確認ください。

ulを確認し「display:flex」が指定されている場合の方法です。

これを解除するにはulに「display:block」を指定しましょう。

ul{
    display: block;
}

liを確認し「float:left」が指定されている場合の方法です。

これを解除するにはliに「float: none」を指定しましょう。

li{
    float: none;
}

liを確認し「display:inline-block」が指定されている場合の方法です。

これを解除するにはliに「display: list-item」を指定しましょう。

li{
    display: list-item;
}

liは基本的に縦並びであるため横並びにしているCSSを特定して解除する。

ulを確認し「display:flex」が指定されている場合「display:block」を指定。

liを確認し「float:left」が指定されている場合「float: none」を指定。

liを確認し「display:inline-block」が指定されている場合「display: list-item」を指定。

以上、CSSでliを縦並びにする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。