MENU
HTML/CSS

【HTML/CSS】ul・olを使った箇条書き左揃えのパターンをまとめてみたよ

takahide

おはようございます。タカヒデです。

HTML/CSSを勉強していて、「よし！箇条書き書くぞー」って思ったときに、
「あれ…なんか違う…」
そんな経験ありませんか？

私はあったんですよ。
「手あたり次第に色んなパターンを試して求めているものを見つける。」
そんな無駄な時間を過ごしていました。

でもそんな時間も今日でおしまい。

この記事を見れば、「ul・olを使った箇条書き左揃えのパターン」を網羅できるようにまとめておきました。

「これじゃないんだよなー…」ってパターンも含めて、全12パターンをまとめているので是非参考にしてください。

こんな人にオススメ
  • HTML/CSSを使って箇条書きをしたい
  • 箇条書きの左揃えをしたいんだけど何か求めているものと違う

それでは見ていきましょう。

Contents
  1. ①タグに「text-align:center」を指定
  2. ②タグに「text-align:center」を指定＋横幅（width）を指定
  3. ③タグに「margin:auto」を指定
  4. ④タグに「margin:auto」を指定+widthを指定
  5. まとめ

①タグに「text-align:center」を指定

まずは、タグに「text-align:center」を指定するパターンです。

先にお伝えしますが、これは私の求めていなかったNGパターンです。

①-１：ulに対して「text-align:center」を指定

では、ulに対して「text-align:center」を指定してみます。
コードは以下です。

<ul class="pattern1">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern1{
    text-align: center;
}

実行するとこんな感じ↓

「・」は画面の左に位置しているものの、テキストは画面中央に配置されています。
いけてないですね。

①-２：liに対して「text-align:center」を指定

次に、liに対して「text-align:center」を指定してみます。
コードは以下です。

<ul class="pattern2">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern2 li{
    text-align: center;
}

実行するとこんな感じ↓

先ほどと同じですね。

①-３：親要素に対して「text-align:center」を指定

最期に親要素に対して「text-align:center」を指定してみます。
コードは以下です。

<div class="pattern3">
    <ul>
        <li>テキスト</li>
        <li>テキストテキスト</li>
        <li>テキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
    </ul>
</div>
.pattern3{
    text-align: center;
}

実行するとこんな感じ↓

うーん。どれも同じ実行結果でしたね。

②タグに「text-align:center」を指定＋横幅（width）を指定

続けて、タグに「text-align:center」を指定＋横幅（width）を指定するパターンを見ていきましょう。

私が求めているものではありませんでしたが、②-２のパターンは使うこともあるかと思います。

②-１：ulに対して「text-align:center」を指定＋横幅（width）を指定

ulに対して「text-align:center」を指定＋横幅（width）を指定してみます。
コードは以下です。

<ul class="pattern4">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern4{
    width: fit-content;
    text-align: center;
}

実行するとこんな感じ↓

画面全体の左には寄っているものの、テキストが中央揃えになっています。
これまたいけてないですね。

②-２：liに対して「text-align:center」を指定＋横幅（width）を指定

次は、liに対して「text-align:center」を指定＋横幅（width）を指定してみます。
コードは以下です。

<ul class="pattern5">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern5 li{
    width: fit-content;
    text-align: center;
}

実行するとこんな感じ↓

お、悪くないんじゃないですか？
「・」もテキストも左揃えされています。

②-３：親要素に対して「text-align:center」を指定＋横幅（width）を指定

最後に、親要素に対して「text-align:center」を指定＋横幅（width）を指定してみます。
コードは以下です。

<div class="pattern6">
    <ul>
        <li>テキスト</li>
        <li>テキストテキスト</li>
        <li>テキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
    </ul>
</div>
.pattern6{
    width: fit-content;
    text-align: center;
}

実行するとこんな感じ↓

②-１と同じパターンでしたね。

③タグに「margin:auto」を指定

次は、タグに「margin:auto」を指定するパターンを見ていきましょう。

これはすべて②-２の結果と同じパターンになります。
「margin:auto」を指定しておけばすべて「・」もテキストも左揃えされるようですね。

③-１：ulに対して「margin:auto」を指定

ulに対して「margin:auto」を指定してみます。
コードは以下です。

<ul class="pattern7">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern7{
    margin: auto;
}

実行するとこんな感じ↓

うん。左揃えされています。

③-２：liに対して「margin:auto」を指定

liに対して「margin:auto」を指定してみます。
コードは以下です。

<ul class="pattern8">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern8 li{
    margin: auto;
}

実行するとこんな感じ↓

一緒の結果ですね。

③-３：親要素に対して「margin:auto」を指定

親要素に対して「margin:auto」を指定してみます。
コードは以下です。

<div class="pattern9">
    <ul>
        <li>テキスト</li>
        <li>テキストテキスト</li>
        <li>テキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
    </ul>
</div>
.pattern9{
    margin: auto;
}

実行するとこんな感じ↓

はい。すべて同じ実行結果でした。

④タグに「margin:auto」を指定+widthを指定

最後に、タグに「margin:auto」を指定+widthを指定するパターンを見ていきましょう。

私がやりたかったのはこれです。
画面中央に箇条書きを作成し、テキストを左揃えしたかったのです。

④-１：ulに対して「margin:auto」を指定

まずは、ulに対して「margin:auto」を指定してみます。
コードは以下です。

<ul class="pattern10">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>

.pattern10{
    width: fit-content;
    margin: auto;
}

実行するとこんな感じ↓

画面中央に箇条書きを作成し、テキストを左揃えになっています。
ようやくできましたね。

④-２：liに対して「margin:auto」を指定

つぎに、liに対して「margin:auto」を指定してみます。
コードは以下です。

<ul class="pattern11">
    <li>テキスト</li>
    <li>テキストテキスト</li>
    <li>テキストテキストテキスト</li>
    <li>テキストテキストテキストテキスト</li>
</ul>
.pattern11 li{
    width: fit-content;
    margin: auto;
}

実行するとこんな感じ↓

ああ、違う。
この絶妙にイケてない箇条書きが本当に嫌でした…

④-３：親要素に対して「margin:auto」を指定

最期に親要素に対して「margin:auto」を指定してみます。
コードは以下です。

<div class="pattern12">
    <ul>
        <li>テキスト</li>
        <li>テキストテキスト</li>
        <li>テキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
    </ul>
</div>
.pattern12{
    width: fit-content;
    margin: auto;
}

実行するとこんな感じ↓

うんうん。バッチリですね。
これで私のやりたい箇条書きができました。

まとめ

以上が、「ul・olを使った箇条書き左揃えのパターン」でした。

まとめ

画面左に箇条書きを作成したいときは、タグに「margin:auto」を指定

画面中央に箇条書きを作成したいときは、タグに「margin:auto」を指定+widthを指定

まあ、こんなことはわざわざ覚える必要はないと思うので、「あれ？どうやるんだっけ？」ってなった際にはまた本記事に来ていただけると幸いです。

お疲れさまでした。

ABOUT ME
タカヒデ
タカヒデ
ITを楽しく勉強中
通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね
Recommend
こちらの記事もどうぞ
記事URLをコピーしました