一人ひとりに、
AI に作ってもらった HTML のスライドで、「料金」のページを「導入の流れ」の前に持ってきたい。コードを開いて、それらしい部分を切り取って貼り付けたら、ページの途中でレイアウトが崩れた。どこからどこまでが1枚のスライドなのか、コードを見ても分かりにくい。順番を入れ替えるだけの作業が、崩れの直しに変わってしまいます。
この記事では、HTML のスライドやカードの順番を、崩さずに入れ替える方法を説明します。
コードで入れ替える方法
HTML では、1枚のスライドや1つのカードは、section や div などのタグで囲まれた「まとまり」になっています。
- 入れ替えたいスライドの始まりのタグ(例: section)と、それに対応する終わりのタグ(/section)を探します。
- 始まりから終わりまでを、まとめて切り取ります。
- 移したい場所の、別のまとまりの終わりのタグのすぐ後ろに貼り付けます。
- 保存して、ブラウザで開き直して確かめます。
崩れる、よくある原因
- 終わりのタグを1つ取り残して、まとまりが途中で切れた。
- まとまりの中に、さらにまとまりが入っていて、対応する終わりのタグを間違えた。
- 番号や「次へ」のボタンなど、順番に関わる仕組みがプログラムで動いていた。
タグの対応を目で追うのは、慣れていても間違えやすい作業です。
UTNOA HTMLエディタなら、まとまりごと選んで入れ替える
UTNOA HTMLエディタは、AI が作った HTML の資料を、コードを知らなくても画面の上で直して保存できる無料のツールです。段落やカード、セクションを、まとまりごと操作できます。
- 入れ替えたいスライドやカードの中を、クリックして選びます。
- 選ぶ範囲が小さいときは、「外側を選ぶ」で、段落からカード、セクションへと広げます。
- 右のパネルで、上へ・下への入れ替え、複製、削除を選びます。
- 保存します。
- まとまりの始まりと終わりを、ツールが正しく扱うので、タグの取り残しが起きません。
- 操作は最大100回まで元に戻せます。
- 開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。
できないこと
自由な位置へのドラッグでの配置はできません。また、スライドの番号や「次へ」のボタンがプログラムで動いている資料では、入れ替えたあとに番号の表示がずれることがあります。保存したら、最初から最後まで一度めくって確かめてください。
元に戻す使い方は、HTML を直していて崩れたとき、元に戻す方法で説明しています。