簡単な例

プロンプト

HTMLの見出しとpタグのサンプルを2行で教えて

AIの回答

<h1>見出しのテキスト</h1>
<p>段落のテキスト</p>

プロンプト

HTMLの見出しとpタグのサンプルを2行で教えて

AIの回答

HTML

<div class="image-container">
	<div class="image-item">
		<img src="image1.jpg" alt="画像1の説明">
	</div>
	<div class="image-item">
		<img src="image2.jpg" alt="画像2の説明">
	</div>
	<div class="image-item">
		<img src="image3.jpg" alt="画像3の説明">
	</div>
</div>

CSS

/* --------------------
	コンテナの設定 (横並びを実現する部分)
-------------------- */
.image-container {
	display: flex; /* ★これだけで子要素が横並びになる */
	gap: 20px; /* 子要素間の隙間を設定 */
	width: 80%; /* コンテナ全体の幅 */
	max-width: 1000px; /* 最大幅 */
	margin: 50px auto; /* ページの中央に配置し、上下に余白を設ける */
	padding: 0 20px;
}

/* --------------------
	アイテムごとの設定
-------------------- */
.image-item {
	/* flex-grow: 1; flex-basis: 0; は、子要素の幅を均等にするための設定 */
	flex: 1 0 0%; 
	/* flex: 1; の簡易表記でも多くの場合は大丈夫です */
}

/* --------------------
	画像そのものの設定
-------------------- */
.image-item img {
	width: 100%; /* 親要素(image-item)の幅いっぱいに広げる */
	height: auto; /* 縦横比を維持 */
	display: block; /* 画像の下にできるわずかな隙間を消す */
	object-fit: cover; /* 画像のサイズが合わない場合でも、トリミングしてボックスを埋める */
	aspect-ratio: 16 / 9; /* 画像の縦横比を16:9に固定（お好みで変更してください） */
}

/* --------------------
	レスポンシブ対応 (画面幅が狭い場合)
-------------------- */
@media (max-width: 768px) {
	.image-container {
		flex-direction: column; /* ★画面幅が768px以下になったら縦並びにする */
		gap: 30px; /* 縦並びになった時の要素間の隙間 */
		width: 90%;
	}
}

既存のデータをリストタグに変換

エクセルやスプレッドシートなどの表計算ソフトを使ってデータを入力。その後に、HTMLに変換して更新を行うと行ったときに、検索置換でも良いのですが、AIにHTML化してもらうことも可能。