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

【CSS】HTMLのリストで箇条書きマーカーとテキストの間に余白を作る方法

リストの箇条書きとテキストの間にスペースを作成する方法

HTMLでリストの箇条書きマーカー（・など）とテキストの間にスペースを作りたい場合は、CSSのpaddingプロパティを使用します。具体的には、<ul>タグ内のリスト項目、つまり<li>タグに対して左パディング（padding-left）を追加します。これにより余白が生まれ、箇条書きマーカーとテキストの間に適切なスペースが確保されます。

【CSS】HTMLのリストで箇条書きマーカーとテキストの間に余白を作る方法

基本の例：通常の順序なしリスト

以下は、黒丸（disc）スタイルの箇条書きを使った一般的な順序なしリストのコード例です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML 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>

padding-leftを追加した例

リストの箇条書きマーカーとテキストの間にスペースを追加するには、以下のコードを実行してみてください。先ほどと同じコードを使用し、<li>タグに左パディング（padding-left）を加えて余白を作っています。

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

この例では、最初の「US」の項目にのみpadding-left:1emを適用しています。すべての項目に同じ余白を付けたい場合は、各<li>タグに個別にスタイルを指定しても良いですが、CSSクラスやul li { padding-left: 1em; }のようなセレクタを使って一括設定すると、コードの保守性が高まります。

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

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

  2. 【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法

    HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols