AI で作った資料の手直し

# HTML のスライドやカードの順番を、崩さずに入れ替える方法
執筆：UTNOA ｜ 情報確認日：2026-10-11

AI が作った HTML のスライドの順番を入れ替えたいだけなのに、レイアウトが崩れる。コードでまとまりを入れ替える方法と、画面でまとまりごと選んで複製・削除・上下の入れ替えをする方法を説明します。

HTML のスライドやカードの順番を、崩さずに入れ替える方法この記事の内容[コードで入れ替える方法](#section-1)

[崩れる、よくある原因](#section-2)

[UTNOA HTMLエディタなら、まとまりごと選んで入れ替える](#section-3)

[できないこと](#section-4)

AI に作ってもらった HTML のスライドで、「料金」のページを「導入の流れ」の前に持ってきたい。コードを開いて、それらしい部分を切り取って貼り付けたら、ページの途中でレイアウトが崩れた。どこからどこまでが1枚のスライドなのか、コードを見ても分かりにくい。順番を入れ替えるだけの作業が、崩れの直しに変わってしまいます。

この記事では、HTML のスライドやカードの順番を、崩さずに入れ替える方法を説明します。

## コードで入れ替える方法
HTML では、1枚のスライドや1つのカードは、section や div などのタグで囲まれた「まとまり」になっています。

入れ替えたいスライドの始まりのタグ(例: section)と、それに対応する終わりのタグ(/section)を探します。

始まりから終わりまでを、まとめて切り取ります。

移したい場所の、別のまとまりの終わりのタグのすぐ後ろに貼り付けます。

保存して、ブラウザで開き直して確かめます。

## 崩れる、よくある原因
終わりのタグを1つ取り残して、まとまりが途中で切れた。

まとまりの中に、さらにまとまりが入っていて、対応する終わりのタグを間違えた。

番号や「次へ」のボタンなど、順番に関わる仕組みがプログラムで動いていた。

タグの対応を目で追うのは、慣れていても間違えやすい作業です。

## UTNOA HTMLエディタなら、まとまりごと選んで入れ替える
UTNOA HTMLエディタは、AI が作った HTML の資料を、コードを知らなくても画面の上で直して保存できる無料のツールです。段落やカード、セクションを、まとまりごと操作できます。

カードをまとまりごと選び、複製・削除・上下の入れ替えができるカードをまとまりごと選び、複製・削除・上下の入れ替えができるまとまりの操作: 複製・削除・上下の入れ替え、外側を選ぶまとまりの操作: 複製・削除・上下の入れ替え、外側を選ぶ入れ替えたいスライドやカードの中を、クリックして選びます。

選ぶ範囲が小さいときは、「外側を選ぶ」で、段落からカード、セクションへと広げます。

右のパネルで、上へ・下への入れ替え、複製、削除を選びます。

保存します。

まとまりの始まりと終わりを、ツールが正しく扱うので、タグの取り残しが起きません。

操作は最大100回まで元に戻せます。

開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。

## できないこと
自由な位置へのドラッグでの配置はできません。また、スライドの番号や「次へ」のボタンがプログラムで動いている資料では、入れ替えたあとに番号の表示がずれることがあります。保存したら、最初から最後まで一度めくって確かめてください。

元に戻す使い方は、[HTML を直していて崩れたとき、元に戻す方法](/column/html-edit-undo/)で説明しています。

## AIが作った資料を、頼み直さずに直す。
UTNOA HTMLエディタは、AIが作ったHTMLの資料を、画面の上で選んで直して保存できる無料のツールです。開いたファイルは、どこにも送りません。

[HTMLエディタのページを見る](/html-editor/?src=column)[ほかのツールを見る](/tools/?src=column)作った理由は、[HTMLエディタを作りました](/column/html-editor-story/)に書いています。