HTMLプログラミングを使ってリストに画像を追加する方法

リストはしばしばテキストに使われますが、リストに画像を追加することも可能です。HTMLプログラミングでリストに写真を追加する方法を学ぶには、以下の手順に従ってください。

方法1

順序なしリストの中に画像を入れる

1. 順序なしリストを作成する。

   • ul要素は、リストの要素を順序なしでグループ化するものです。ul要素を作成するには、HTMLテキストエディタに以下を追加します：
2. 順序なしリストタグの中にリストタグを作成します。

   • リストタグを作成するには、HTMLテキストエディタに以下を追加します：
3. リスト・タグの中にimageタグを挿入する。

   • 画像タグを作成するには、HTMLテキストエディタに以下を追加します：
4. src=""に画像のパスを貼り付ける。

   • 画像タグを表示するには、画像の情報が必要です。 必要な画像のファイルパスをコピーし、そのパスを画像のようにsrc=""に貼り付けます。
5. リスト項目ごとに複数の画像を表示したい場合は、imageタグを複製します。

   • 各リスト項目に複数の画像を入れることも可能です。その場合は、画像のようにテキストを追加してください。

方法2

順序付きリストの中に画像を入れる

1. 順序付きリストを作成する。

   • ol要素は、リストの要素を数値でグループ化するものです。ol要素を作成するには、HTMLテキストエディタに次のように記述します。
2. 。

   • リストタグを作成するには、HTMLテキストエディタに以下を追加します：
3. 。

   • 画像タグを作成するには、HTMLテキストエディタに以下を追加します：
4. src=""に希望の画像のパスを貼り付けます。

   • 画像タグを表示するには、必要な画像に関する情報が必要です。必要な画像のファイルパスをコピーし、そのパスを画像のようにsrc=""に貼り付けます。
5. リスト項目ごとに複数の画像を表示したい場合は、imageタグを複製します。

   • 各リスト項目に複数の画像を入れることも可能です。その場合は、画像のテキストをエディタに追加してください。

この記事は、CC BY-NC-SAで公開されている「 HTMLプログラミングでリストに画像を追加する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。