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

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

HTMLで番号なしリストを作成する基本

HTMLで番号なしリスト（順序付けされていないリスト）を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで開始し、各項目は<li>タグで囲みます。項目の先頭には黒丸（disc）、白抜きの円（circle）、四角（square）などのマーカーが表示され、デフォルトでは小さな黒い円（disc）が使われます。

list-style-typeプロパティでマーカーを指定する

黒丸（disc）の箇条書きを持つ番号なしリストを作成するには、CSSのlist-style-typeプロパティを使用します。ここではstyle属性を使う方法を紹介します。style属性は要素にインラインスタイルを直接指定するためのもので、HTMLの<ul>タグと組み合わせて、CSSのlist-style-typeプロパティで「disc」を指定することで、黒丸の箇条書きを表示できます。

ただし、style属性で指定したスタイルは優先度が高く、グローバルに設定されたスタイルを上書きする点に注意してください。具体的には、HTML内の<style>タグや外部スタイルシートで定義したスタイルよりも、インラインスタイルが優先されます。

サンプルコード

以下のコードを実行すると、黒丸（disc）の箇条書きを持つ番号なしリストが表示されます。

例：開発国のリスト

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Unordered List</title>
   </head>
   <body>
      <h1>Developed Countries</h1>
      <p>The list of developed countries:</p>
      <ul style="list-style-type:disc">
         <li>US</li>
         <li>Australia</li>
         <li>New Zealand</li>
      </ul>
   </body>
</html>

補足ポイント

実は「disc」はデフォルト値のため、style属性を指定しなくても通常は黒丸が表示されます。あえて指定するのは、他の場所でlist-style-typeが変更されている場合に、確実に黒丸へ戻したいときなどに有効です。また、マーカーを変えたい場合は「circle」（白抜きの円）や「square」（塗りつぶしの四角）、「none」（非表示）なども指定できます。

  1. HTMLでファイルアップロードボタンを作成する方法をわかりやすく解説

    HTMLでファイルアップロードボタンを作成するには、<input>要素のtype属性に「file」を指定します。これにより、ユーザーが自分のPCやスマートフォンからファイルを選択してアップロードできるボタンが簡単に設置できます。 コード例 <!DOCTYPE html> <html> <head> <title>ファイルアップロードボタンの例</title> </head> <body> <h1>ファイルアップロードボタンの例</h1> <p>「ファイルを選択」ボ

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800