【Bootstrap4】liタグの左横の余白と「・」を消す方法

スポンサーリンク

専業ブロガーのかわんです。

Bootstrap4は複雑なCSSでFirebugで見ると悶絶します(笑)。

で、ulタグを使ってリストを作成するのですが、

liで囲むテキストは左に謎の空白が出来ます。

こんな感じで。

この場合のHTMLはこう書いています。

<ul>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
    <li>テキスト</li>
</ul>

何の変哲もないHTMLです。この場合、上の画像のように「テキスト」の左横に余白が出来てしまいます。

この場合、CSSでこう書いてやると、余白が消えます。

ul {
    list-style: none;
    padding: 0;
}

上の説明をしますと、まず、「list-style: none」で「・」を消します。

そのあと、「padding: 0」で左側の余白を消します。

これでOKです。

特定の箇所だけ左横の空白を消したい

上の方法は、全ulタグに関してCSSが適用されてしまいます。

特定の個所だけ左横の空白を消したい時は、ulに対してクラスもしくはidを割り当てます。

HTMLはこんな感じです。

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

ulに「list」クラスを割り当てます。で、CSSでこう書きます。

.list {
    list-style: none;
    padding: 0;
}

これで完成です。簡単ですよね。

バックアップを取ってから作業しよう

今回は、HTMLとCSSをいじるので、壊れる可能性があります。

なので、バックアップを取ってから作業しましょう。

また、今回の方法は僕の環境下で実現したものです。

皆さまの環境では上手くいかないかも知れません。

その時はごめんなさい。他サイト様の記事をご覧下さい。

なお、何か起きても僕ではサポート出来ませんので自己責任で行なって下さい。

まとめ

Bootstrap4の場合、はじめからCSSが適用されている状態になります。

なので解析が難しい訳ですが、慣れてしまうとBootstrap4無しではWebサイトを制作出来なくなります(笑)

だって、1からCSSを書くのは面倒だもの(笑)

という感じで、liタグの左横の空白が気になる方はお試し下さい。

なお、上でも書いたように、HTMLやCSSをいじるのでバックアップを取ってから作業しましょう。

何か問題が発生しても僕ではサポート出来ませんので自己責任で行なって下さいね。