リストと画像のテスト
直貼り
1. 直貼り
styleでサイズ指定可、指定なしの場合は原寸
複数並べると縦に並ぶ
・・・｜・・・
貼っただけだと原寸表示
の中に貼っただけだと原寸表示
横並び（margin: 0.35em 0.5em 0.35em 0）
上下と右に余白を設定しているので、中心が少しずれた印象になる？
styleでサイズを指定可能
・・・｜・・・
3. 直貼り横並び
![]()
・・・
・・・｜・・・
・・・｜・・・
4. img-inline：gap一時変更
・・・
・・・｜・・・
・・・｜・・・
5. photo：単体写真 s
・・・｜・・・
6. photo：単体写真 m
・・・｜・・・
7. photo：単体写真 l
・・・｜・・・
8. photo-grid：xs 4枚想定
・・・｜・・・
9. photo-grid：s 3枚想定
・・・｜・・・
10. photo-grid：m 2枚想定
・・・｜・・・
11. photo-grid：l 2枚想定
・・・｜・・・
12. photo-grid：特殊サイズ一時指定
・・・｜・・・
13. photo-row：高さ揃え xs
・・・｜・・・
13. photo-row：高さ揃え s
・・・｜・・・
14. photo-row：高さ揃え m
・・・｜・・・
15. photo-row：高さ揃え l
15. photo-row：高さ揃え xl
・・・｜・・・
特殊：1枚ずつサイズ指定
元画像サイズまたはstyleでサイズ指定、中央配置、キャプション中央、複数枚も可
・・・｜・・・
16. visual：地図・スライド m
・・・｜・・・
17. visual：地図・スライド l
・・・｜・・・
18. leaflet：単ページ
・・・｜・・・
19. leaflet：見開き
・・・｜・・・
22. 左回り込み S（要clear:both）
左回り込みSのサンプルです。本文が画像の右側に回り込みます。ある程度の文章量があると確認しやすくなります。スマホでは回り込みを解除する想定です。
23. 右回り込み S
右回り込みSのサンプルです。本文が画像の左側に回り込みます。ある程度の文章量があると確認しやすくなります。スマホでは回り込みを解除する想定です。
24. 左回り込み M
左回り込みMのサンプルです。少し大きめの画像を本文横に配置します。画像と本文の間隔、スマホ時の表示を確認してください。
25. 右回り込み M
右回り込みMのサンプルです。少し大きめの画像を本文横に配置します。画像と本文の間隔、スマホ時の表示を確認してください。
