HTML で箇条書きにする方法
箇条書きを使用すると、大量のテキストを分割し、有用な情報のリストを指摘するのに役立ちます。箇条書きはワード プロセッシング ソフトウェアで簡単に作成できますが、HTML ドキュメントを入力する場合は、箇条書きを作成するコードを知っている必要があります。箇条書きリストを作成するために必要なコードはそれほど多くありません。各リストを
で囲む- または「順序なしリスト」タグで囲みます。その後、Cascading Style Sheet コードを使用して、箇条書きリストで必要なことを行うことができます。
ステップ 1
箇条書きのテキストを書きます。各ポイントを独自の行で開始します。各行を
で折り返す
ステップ 2
箇条書きの上に空白行を作成し、開始を入力します
その行に- タグを付けます。箇条書きの末尾を見つけて、そこに別の空白行を作成します。締めくくりを入力してください
- タグにクラスまたは ID 属性を追加します。 ID 属性を使用した短い箇条書きリストの例を次に示します。
- 箇条書き 1
- 箇条書き 2
ステップ 3
CSS コードを使用して箇条書きリストを作成するには、「スタイル」を使用します。
の間に CSS コードを追加します。 間のタグ と タグを使用するか、CSS コードを外部の .CSS ファイルに記述し、次のようなタグを使用してファイルを埋め込むことができます。 「path/to/stylesheet.css」を、作成した .CSS ファイルへのパスに変更します。次のように、ID または class 属性を使用して箇条書きリストを選択します。
#mylist li { font-style:italic; }
上記のコードはすべての
を選択します ID が「mylist」のタグ内の
ステップ 4
箇条書きの種類を変更するには、CSS の「list-style」プロパティを使用します。使用可能な箇条書きの種類には、白丸、塗りつぶされた円盤、番号なし、アルファベット順でないリストの四角形が含まれます。以下は四角い箇条書きの例です:
#mylist li {list-style:square;}
ヒント
を使用します
- の代わりに
- 繰り返さない左揃えの背景画像にタグを付けます。各 の左側にパディングを追加します
- タグを使用してテキストを移動します。そうしないと、画像に重なってしまいます。
- タグを使用して、番号付きリストを作成します。次に、「リストスタイル」タイプをさまざまなタイプの数字または文字に設定できます。
"list-style" 属性に "none" を指定して画像の箇条書きを作成し、すべての
を指定します。