CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで箇条書き（ビュレット）なしのulリストを作成する方法

HTMLの<ul>要素はデフォルトで黒丸（ビュレット）が表示されますが、CSSを使えば簡単にこれを非表示にできます。ナビゲーションメニューやカスタムデザインのリストを作成する際によく使われるテクニックです。

ポイント：list-style-typeプロパティ

箇条書きを消すには、list-style-typeプロパティにnoneを指定します。あわせてmarginとpaddingを0に設定すると、ブラウザ標準の余白も取り除けます。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
    }
</style>
</head>
<body>
<h1>ulからビュレットを削除する例</h1>
<ul>
<li>トラ</li>
<li>キリン</li>
<li>ライオン</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、ビュレット（黒丸）が表示されず、項目名だけが左揃えで表示されます。

CSSで箇条書き（ビュレット）なしのulリストを作成する方法

補足

list-style-type: none;を指定しても、リストのインデント用の余白は残る場合があります。完全に余白をなくしたい場合は、margin: 0;とpadding: 0;も一緒に設定しておくと確実です。また、リスト項目を横並びにしたい場合は、li要素にdisplay: inline-block;やFlexboxを組み合わせると便利です。

  1. HTMLで黒丸（disc）の箇条書きを使った番号なしリストを作成する方法

    HTMLで番号なしリストを作成する基本 HTMLで番号なしリスト（順序付けされていないリスト）を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで開始し、各項目は<li>タグで囲みます。項目の先頭には黒丸（disc）、白抜きの円（circle）、四角（square）などのマーカーが表示され、デフォルトでは小さな黒い円（disc）が使われます。 list-style-typeプロパティでマーカーを指定する 黒丸（disc）の箇条書きを持つ番号なしリストを作成するには、CSSのlist-style-typeプロパティを使用します。ここではstyl

  2. HTMLがわからなくても大丈夫！コード不要でWebサイトを作成する2つの方法

    HTMLやCSSの知識がまったくなくても、心配はいりません。実は、HTMLコードを一行も書かずにWebサイトを作成することは可能です。 ここでは、コードを一切書かずにWebサイトを構築できる主な方法を2つご紹介します。 方法1：ウェブサイトビルダーを利用する レンタルサーバーのホスティングプランを契約すると、多くのホスティング会社が無料のウェブサイトビルダー機能を提供しています。このツールを使えば、HTMLコードを一切書かずに、直感的な操作だけでWebサイトを簡単に作成できます。 方法2：CMS（コンテンツ管理システム）を利用する WordPress、Drupal、JoomlaなどのCMS（コ