エディタ（TeraPad）でHTMLファイルを編集する
last update: 20231219
■「TeraPad」というソフト
「TeraPadはシンプルなSDIタイプのテキストエディタです。」
フリーソフトです。
◆ソフトのホームページ
https://tera-net.com/library/tpad.html
から、最新ヴァージョンをダウンロードします。
その他のおすすめエディタ
◆EmEditor
https://jp.emeditor.com/#download
◆初心者でも使いやすいオススメのテキストエディタ19選(2017/01/13)
https://ferret-plus.com/810
◆Macで使えるフリーのテキストエディタ15選【2019年版】(2019/02/05)
https://blog.codecamp.jp/mactext-editor-15
■HTMLファイルの編集方法
サンプルファイルを保存する
サンプルページから、目的に該当したファイルをダウンロードします。
[htm版]
- サンプルページの［htm版］をクリックして開く
- ［htm版］（開いたページ）のソースを表示する （Ctrl＋U）
- ファイル →「上書き保存」を選択 （Ctrl＋S）
- 半角英数字のファイル名に変更し、拡張子「.htm」を「ファイル名」の後に記す （例：1607oh.htm）
- ファイルの種類が「HTMLファイル」であることを確認し、「保存」する
[txt版]
- サンプルページの［txt版］をクリックして開く
- 点線（↓−−−−−−−−−−−−−−−−−−−−−−−↓）より下の部分をすべてコピーする
- テキストエディタを開いてコピーを張り付ける
- ファイル →「名前を付けて保存」を選択
- 半角英数字のファイル名をつけ、拡張子「.htm」を「ファイル名」の後に記す （例：1607oh.htm）
- ファイルの種類を「HTMLファイル」に変更する
- 文字コードがファイルに記載されている文字コードと同じであることを確認する
- 「保存」する
保存したファイルを編集する
- 保存したファイルをテキストエディタ（「TeraPad」など）で開く
- 各サンプルページに記されている「解説／ルール」をよく読み、記載すべき情報を書き加える
- 各サンプルページに記されている「解説／ルール」の（点線で区切られた）箇所は削除する
- 書き換えたファイルを「上書き保存」する （Ctrl＋S）
- 保存したファイルをダブルクリックで開き、きちんと更新されていることを確認する
ファイルの文字コードを確認する
ファイルに記載された文字コードと同じ文字コードで保存してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title> TeraPadを使ってHTMLファイルを編集する</title>
- 赤色で示したShift_JISがファイルのヘッダ情報に記載されている文字コードです。
- arsvi.comでは「Shift_JIS」と「UTF-8」の二つの文字コードのうちどちらかを使用しています。
- 「Shift_JIS」は日本語のファイルに、「UTF-8」は多言語対応で外国語のファイルに使用しています。
名前を付けて保存する
文字コードを間違えていた場合は、文字コードを一致させるために「名前を付けて保存」を選択します。
- ファイル →「名前を付けて保存」を選択
- 「文字コード」を、ファイルに記載されている文字コードと同じ文字コードに変更する。
- 「保存」する
※注
- 保存したファイルはそのまま開いただけではきちんと表示されません。「css」フォルダを作成し、その中に「default.css」をダウンロードする必要があります。
参照→「外部CSSファイル作成の注意点」（別頁）
- 保存の際に文字コードの選択を間違えるとファイルがきちんと表示されません。
上掲→「保存の際には必ず文字コードを確認する」
■エディタの便利な機能
改行の<br>タグを一括置換でつける
目次や長い文章を入力すると、必然的に改行が多くなります。
改行のタグは<br>というタグなのですが（もちろん本当は半角です。しかし半角で書くとタグとして扱われてしまうので、ここでは便宜的に全角で書いています）、これをひとつひとつ手打ちで（もしくはコピペで）入力していては、たいへんな労力と時間のロスになります。
そこで、TeraPadの機能を使って一括置換でこのタグをつけます。
◆方法
編集するファイル（すでにいろいろタグが入っている）とは別に新しいファイルを開いて、そこに改行タグをつけたい文書を打ち込み／コピペします。
↓
上のメニューの［検索］から［置換］を選択する、もしくは［Ctrl+R］を押します。
↓
［置換］のウィンドウが開きます。
↓
「オプション」の3番目の「\n＝改行……」という項目にチェックをいれます。
↓
「検索する文字列」に \n と入れます。
↓
「置換後の文字列」に <br>\n と入れます。★<br>
は半角で！
↓
「すべて置換」をクリックします。
↓
「置き換えますか？」と確認されるので、「すべて」をクリックします。
↓
改行箇所すべてに<br>
タグがつきます。
↓
全体をコピーして、編集するファイルの該当箇所にペーストします。
↓
保存します。できました。
「マクロ」機能でタグを自動作成する
頻度の高い編集作業として、
http://www.arsvi.com/z/t01.htm
というようなURLに、
<a href=""></a>
というリンクのタグ（これも本当は半角）をつけて、
<a href="http://www.arsvi.com/z/t01.htm">http://www.arsvi.com/z/t01.htm</a>
としてリンク指定をする（すると実際の表示は http://www.arsvi.com/z/t01.htm となる）という作業があります。
★注意：ここでは例としてこのURLを挙げていますが、実際にwww.arsvi.com内のページにリンクする場合は
相対パスにしてください。
相対パスでは、arsvi.com のトップページのアドレス「http://www.arsvi.com」を削除して、
「..」（半角ドット２つ）に置き換えます。
<a href="
http://www.arsvi.com/z/t01.htm">
↓
<a href="
../z/t01.htm">
「マクロ」機能を使うと、これが一瞬でできます。
要は、選択したURLにタグをつける過程を記録しておいて、［Ctrl+＊］という操作だけでそれを再現するように設定するのです。
マクロの使い方は以下のブログ記事を参照してください。わからなかったら近くのPDやRAに質問してください。
◆Tera Padにマクロを使え！（いきなりホームページ／2010年06月15日）
http://edeito.seesaa.net/article/153325076.html
■「CotEditor」というソフト
「CotEditorはシンプルなテキストエディタです。」
App Storeからアプリをダウンロードできます。
■MacBookでのHTMLファイルの編集方法
サンプルファイルを保存する
[txt版]
- サンプルページの［txt版］をクリックして開く
- 点線（↓−−−−−−−−−−−−−−−−−−−−−−−↓）より下の部分をすべてコピーする
- テキストエディタを開いてコピーを張り付ける
- ファイル →「名前を付けて保存」を選択
- 半角英数字のファイル名をつけ、拡張子「.htm」を「ファイル名」の後に記す （例：1607oh.htm）
- ファイルの種類を「HTMLファイル」に変更する
- 文字コードがファイルに記載されている文字コードと同じであることを確認する
- 「保存」する
保存したファイルを編集する
- 保存したファイルをテキストエディタ（「CotEditor」）で開く
- 各サンプルページに記されている「解説／ルール」をよく読み、記載すべき情報を書き加える
- 各サンプルページに記されている「解説／ルール」の（点線で区切られた）箇所は削除する
- 書き換えたファイルを「上書き保存」する。
- 保存したファイルを開き、きちんと更新されていることを確認する
＊作成：村上 潔 更新：小川 浩史