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

HTMLで丸型の箇条書きを使って順序なしリストを作成する方法

HTMLで順序なしリスト（番号のない箇条書きリスト）を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで始まり、各項目は<li>タグで記述します。デフォルトでは、小さな黒い丸（ディスク）が箇条書きのマーカーとして表示されます。

丸型（circle）の箇条書きにする方法

デフォルトの黒丸ではなく、中身が空洞の「丸（circle）」をマーカーとして使いたい場合は、CSSのlist-style-typeプロパティを利用します。ここでは、HTML要素に直接スタイルを指定できるstyle属性（インラインスタイル）を使う方法を紹介します。

具体的には、<ul>タグに対してstyle属性を設定し、その値として list-style-type: circle を指定するだけです。これにより、順序なしリストのマーカーが白抜きの丸に変わります。

注意点：style属性の優先度

style属性で指定したスタイルは、他のスタイル指定よりも優先される点に注意してください。<style>タグ内や外部スタイルシートで定義したスタイルがある場合でも、style属性によるインラインスタイルがそれらを上書きします。意図しないデザインの崩れを防ぐためにも、この仕組みを理解しておくことが重要です。

サンプルコード

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

<!DOCTYPE html>
<html>
   <head>
      <title>HTML 順序なしリスト</title>
   </head>
   <body>
      <h1>先進国一覧</h1>
      <p>先進国のリスト：</p>
      <ul style="list-style-type:circle">
         <li>アメリカ</li>
         <li>オーストラリア</li>
         <li>ニュージーランド</li>
      </ul>
   </body>
</html>

list-style-typeで使える主な値

list-style-typeプロパティには、circle以外にもさまざまなマーカースタイルを指定できます。

  • disc：塗りつぶされた黒い円（デフォルト）
  • 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