HTMLを編集するなら、WYSIWYGとコードエディタのどっち
HTML を編集するのに、WYSIWYG もコードエディタも一方的な勝者ではありません——仕事しだいです。変更の種類ごとの使い分けと、両方を同期させておく道具の話。
← 記事一覧
「editor」の記事
Claudeで作ったサイトを編集する方法
「Claudeで作ったサイト」は三つの別ものを指します——チャットで開き直せる artifact、ダウンロードした一つの .html ファイル、あるいは Claude Code のプロジェクト。どれを持っているかで、直し方が決まります。
HTMLファイルをアップロードせずにオンラインで編集する
はい、HTMLファイルはアップロードせずにオンラインで編集できます——クライアント側のエディタがどうやってファイルをブラウザの中に留めるのか、そして何かを預ける前に、どんなツールでもNetworkタブで自分で確かめる方法を。
オフラインでHTMLを編集する方法
接続なしでHTMLファイルを編集する方法——本当に使えるオフラインの二つの選択肢と、ダウンロードして持っておくエディタファイルが「最初の一度だけ」ネットを要る、という但し書き。
HTMLの変更がブラウザに反映されないとき
HTMLはちゃんと保存したのに、ページの見た目が変わらない？よくある原因は、ブラウザのキャッシュ、別のファイル、.html.txt という拡張子、DevTools の中だけの編集、上書きされた CSS——それぞれに、手早い直し方があります。
HTMLの変更をリアルタイムでプレビューする方法
保存-切り替え-更新のループから抜け出しましょう。ライブプレビューが、打つそばから HTML の変更をどう見せるか、プレビューをクリックして対応するコードをどう見つけさせるか、そしてページをスマホの幅でどう確かめさせてくれるか。
ブラウザでHTMLファイルを開いて編集する方法
.html ファイルをダブルクリックしても、Chrome はただ表示するだけ。DevTools でいじった変更は、リロードすると消えてしまいます。ローカルのHTMLファイルをブラウザで本当に編集して、その変更をディスクに保存し直す方法の話です。
ChatGPTが生成したHTMLを編集する方法
ChatGPTがHTMLページを丸ごと書いてくれて、ひとつだけ小さなところがおかしい。ページ全体を頼み直さずに、保存したファイルの中で——テキストもコードも——直す方法です。
AIが生成したHTMLを編集する方法
誤字をひとつ直したくてAIに頼み直したら、ページの半分が書き変わっていた。ファイルを開いて、テキストもリンクも色も画像も直接いじる——作るのはAI、最後の仕上げはビジュアルエディタ、という話です。
コードを書かずにHTMLをビジュアルで編集する方法
ビジュアル(WYSIWYG)HTMLエディタなら、すでにあるページを開いて、テキストやリンク、画像をクリックして変えられます——読むべきタグはなく、下のコードはそのまま保たれます。
無料のHTMLエディタ、正直に比較してみた
無料のHTMLエディタを公平に比べてみました。W3Schools、PlayCode、HTML-Online、CoffeeCup、Pinegrow、HTML Tweak、それぞれが本当に強い場面はどこか。
HTMLファイルの編集方法 — 実際にある選択肢
HTMLファイルを編集する4つの方法 — コードを直接いじる、デスクトップソフトを使う、オンラインエディタを使う、シンプルなビジュアルツールを使う。それぞれのトレードオフと、コードを書かない人にとって一番ラクな選び方を紹介します。