<li>タグ内に画像を回り込ませるためには、画像に対してCSSでフロート（float）を設定し、リストアイテム自体に適切なスタイルを適用する必要があります。以下に、実際のHTMLとCSSの例を示します。
HTML
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を回り込ませたリスト</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>
<img src="example.jpg" alt="Example Image">
テキストがここに入ります。画像の横にテキストが回り込みます。
</li>
<li>
<img src="example2.jpg" alt="Example Image 2">
別のリストアイテムのテキスト。こちらも画像の横に回り込みます。
</li>
</ul>
</body>
</html>
CSS（styles.css）
css
ul {
list-style-type: none; /* リストのマーカーを非表示にする場合 */
padding: 0;
}
li {
overflow: hidden; /* フロートの影響をクリアするため */
margin-bottom: 20px; /* リストアイテム間のスペースを確保 */
}
li img {
float: left; /* 画像を左側にフロート */
margin-right: 10px; /* 画像とテキスト間のスペース */
max-width: 150px; /* 画像の最大幅を設定 */
}
説明
- HTML部分:
ulタグ内にliタグを使ってリストアイテムを定義します。- 各
liタグ内にimgタグとテキストを配置します。
- CSS部分:
ulタグに対してlist-style-type: none;を設定し、リストマーカーを非表示にします（必要に応じて）。liタグに対してoverflow: hidden;を設定し、フロートの影響をクリアします。liタグに対してmargin-bottom: 20px;を設定し、リストアイテム間にスペースを作ります。li imgに対してfloat: left;を設定し、画像を左側にフロートさせます。margin-right: 10px;を設定し、画像とテキストの間にスペースを作ります。max-width: 150px;を設定し、画像の最大幅を制限します。
この設定により、リストアイテム内の画像が左側にフロートし、テキストがその周りに回り込むようになります。