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

HTMLで画像マーカー付きの順不同リスト（箇条書き）を作成する方法

HTMLで画像を使った順不同リストを作成するには？

HTMLで順不同リスト（番号なしリスト）を作成するには、<ul>タグを使用します。リスト全体を<ul>タグで囲み、個々の項目は<li>タグで記述します。

通常、リスト項目の先頭には「disc（黒丸）」「square（四角）」「circle（白丸）」といったマーカーが表示され、デフォルトでは小さな黒い丸（disc）が使われます。しかし、CSSを活用すれば、これらの標準的なマーカーの代わりに任意の画像を箇条書きのマーカーとして表示することも可能です。

CSSのlist-style-imageプロパティを使う

画像を箇条書きのマーカーとして設定するには、CSSのlist-style-imageプロパティを使用します。このプロパティに画像ファイルのURLを指定することで、お好みの画像をリストマーカーとして表示できます。

本記事では、HTMLのstyle属性を使ってインラインスタイルとして指定する方法を紹介します。style属性は要素に直接スタイルを適用する仕組みで、<ul>タグにlist-style-imageプロパティを組み合わせることで、手軽に画像マーカーのリストを実現できます。url()関数の中に、使用したい画像のパスを記述してください。

注意点： style属性で指定したスタイルは、<style>タグ内や外部スタイルシートで定義されたスタイルよりも優先されます。そのため、意図しないデザインの上書きが起こらないよう、使用場面には注意しましょう。

HTMLで画像マーカー付きの順不同リスト（箇条書き）を作成する方法

実装コード例

以下のコードを実行すると、画像をマーカーとした順不同リストの実際の表示を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML 順不同リスト</title>
   </head>
   <body>
      <h2>チュートリアル</h2>
      <p>チュートリアルの一覧：</p>
      <ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
         <li>Java</li>
         <li>C++</li>
         <li>Ruby</li>
      </ul>
   </body>
</html>
  1. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト

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

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