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

【HTML入門】四角い箇条書き（スクエア）の順序なしリストを作成する方法

HTMLで順序なしリスト（番号のないリスト）を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで囲み、各項目は<li>タグで記述します。項目の先頭に表示されるマーカーには、disc（黒丸）・square（四角）・circle（白丸）などがあり、何も指定しない場合のデフォルトは小さな黒丸（disc）です。

四角い箇条書きを作るためのCSSプロパティ

四角形（square）の箇条書きを持つ順序なしリストを作成するには、CSSのlist-style-typeプロパティを使用します。ここでは、HTML要素に直接スタイルを指定できるstyle属性（インラインスタイル）を使う方法を紹介します。style属性を<ul>タグに設定し、値としてlist-style-type:squareを指定することで、リストのマーカーが四角に変更されます。

style属性使用時の注意点

style属性で指定したスタイルは、最優先で適用される点に注意してください。具体的には、以下のようなスタイル設定よりも優先されます。

  • <style>タグ内に記述したスタイル
  • 外部スタイルシート（CSSファイル）で定義されたスタイル

【HTML入門】四角い箇条書き（スクエア）の順序なしリストを作成する方法

サンプルコード

以下のコードを実行すると、四角い箇条書き（スクエア）の順序なしリストが表示されます。実際にブラウザで試してみてください。

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

このように、list-style-typeプロパティの値を変更するだけで、黒丸・白丸・四角など、さまざまな種類のマーカーに簡単に切り替えることができます。デザインに合わせて使い分けると、リストの見栄えがぐっと向上します。

  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