一人ひとりに、
AI に作ってもらった HTML の資料を、ブラウザで開いて「名前を付けて保存」した。保存したファイルを開き直すと、色が消えて、文字だけが並んでいる。あるいは、Word に貼り付けて直してから HTML で保存し直したら、レイアウトがまったく変わってしまった。見た目がきれいだった資料ほど、保存し直すときに崩れやすくなります。
この記事では、AI が作った HTML を保存し直すときに崩れる原因と、元の形のまま保存する方法を説明します。
崩れる、よくある原因
見た目を別のファイルや外部から読み込んでいる
資料の見た目(CSS)や画像が、別のファイルや、インターネット上の場所から読み込まれていることがあります。HTML のファイルだけを別の場所に移すと、それらが読み込めずに崩れます。
プログラムで中身を作っている
AI が作った資料の中には、開いたときにプログラム(JavaScript)が動いて、グラフや表を作るものがあります。ブラウザの「保存」で、プログラムが作ったあとの状態を保存すると、二重に作られたり、動かなくなったりすることがあります。
別のソフトを通している
Word や Google ドキュメントに貼り付けて直してから HTML で保存すると、元の見た目のルールは引き継がれません。
崩さずに保存するためにできること
- 資料が1つのファイルで完結しているかを確かめます。画像や CSS が別のファイルなら、フォルダごと扱います。
- 保存し直すときは、プログラムが動いたあとの状態ではなく、元のファイルの構造を保つ方法を選びます。
- 保存したら、別の場所にコピーして開き、同じ見た目になるかを確かめます。
UTNOA HTMLエディタなら、元の資料の形のまま保存する
UTNOA HTMLエディタは、AI が作った HTML の資料を、コードを知らなくても画面の上で直して保存できる無料のツールです。保存するときは、元の資料の構造を保ちます。
- タイトル、スタイル、スクリプト、リンク先など、元の資料の構造を保って保存します。
- 標準は「別名で保存」です。対応するブラウザでは、元のファイルへの上書きもできます。
- 開いた資料が元と違って見えるときは、その理由(別のファイルの画像を使っている、外部のプログラムで見た目を作っている、など)を画面の上部で案内します。Web 版では、資料のフォルダを選ぶと、別のファイルの画像や CSS も表示できます。Chrome 拡張版では、Chrome で開いている資料のまま直せます。
- 開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。
知っておきたいこと
保存したファイルは、元とまったく同じ文字の並びにはなりません。引用符や空白の一部は、ブラウザの標準の形に置き換わります。見た目や動きには影響しない違いです。また、React などのプログラムで作られた画面を、元のプログラムに戻すことはできません。
直していて崩れたときの戻し方は、HTML を直していて崩れたとき、元に戻す方法で説明しています。