EmacsによるWebページ編集

補完入力

要素の新規入力

HTMLやCSSを手書きで作成する場合はテキストエディタを利用することになる。 多くのテキストエディタにはHTML入力に必要なタグを簡単に挿入する機能がある。

情報教室のEmacsでは、ファイル名が .html で終わるものを 編集するときには以下の拡張機能が使えるように設定してある。

• C-c b

  要素名を補完入力で読み込み

  <hoge>
  </hoge>
  

  を挿入する。主にブロックレベル要素を入力するときに使う。

• C-c l (える)

  要素名を補完入力で読み込み

  <hoge></hoge>
  

  を挿入する。主にインライン要素を入力するときに使う。 ブロックレベル要素をソースの1行内で入力したいときにも使う。

• C-c s

  要素名を補完入力で読み込み

  <hoge>
  

  を挿入する。img, link など、閉じタグのない要素の 入力時に使う。

• C-c p

  <p></p>

  を自動挿入する。

• M-Return (ESC Return)

  繰り返し入力を自動的に挿入する。

  • 箇条書きの <li></li> を次の行に自動挿入
  • table の tr と td 並びを次の行に自動挿入

クラス名補完

上記のキーコマンドを用いて補完入力すれば、その要素に対して適用可能な CSS クラスも同時に補完入力できる。補完候補となるクラス名は、 文書内のスタイルシート読み込みタグ(link, style)を、編集開始時に調べて集められたものである。あとから CSS クラスを追加した場合は

• M-x yahtml-mode [Return]

とタイプすれば、クラスを読み直し、補完候補が更新される。

既入力部分の変更

既に入力してあるタグやクラス名を別のものに変更するには、 変更したい単語の上にカーソルを合わせ C-c c をタイプする。

• C-c c

  既入力の要素名やクラス名を変更する。閉じタグを持つ要素の場合は 開始タグ/閉じタグの両方とも変更する。