HTML / CSS

liタグを簡単に自動挿入する方法

posted by shimizu on 02.26.2012

メニューやリストをコーディングをする時は、 各項目をリストタグでマークアップしなくてはいけないのですが、 大量のリストにタグ付けするのは手間なので、 エディタのマクロで簡単に自動挿入する方法をご紹介。

エディタをダウンロード

Macのエディタをいくつか試してみましたが、 マクロが使いやすいエディタはjEditでした。 jEdit ダウンロードはこちら

jEditを日本語化

下記URLから日本語UI用のファイルをダウンロード https://github.com/tanakahisateru/jedit_gui-ja/downloads ダウンロードしたファイルを解凍して以下の4つのファイルをjEdit.app/Contents/Resources/Java/propertiesにコピーします。 BufferTabs.properties BufferTabs.props jedit_gui-mac.properties jedit_gui-mac.props jEdit を再起動すれば日本語化完了です。 初期設定はアンチエイリアスなしで見にくいので、 「アンチエイリアス スムーズフォント」 を standard に変更します。

リスト化したい項目を並べる

まずはリスト化したい文字列を並べます。

マクロの記録を実行

「メニュー」>「マクロ」>「マクロの記録」をクリックして、 下記の動作を実行してください。 1. 「メニュー」>「検索」>「検索/置換」を選択して「検索:」に「^.*」を入力。(オプションの正規表現をチェック) 2.「置換:」に「<li>$0</li>」を入力して全て置換。 3.「Ctrl + Home」キー(カーソルを一番先頭に移動)を押して「<ul>」を挿入後、「Enter」。 4.「Ctrl + End」キー(カーソルを一番末尾に移動)を押して「Enter」後、「</ul>」を挿入。 5. 最後に「マクロ」の「記録/停止」を選択。 出来たファイルに「名前を付けて保存」を選択し、 「Add_List_Tag.bsh」と付けて保存。 次回からはクライアントからもらったリスト原稿を 「マクロ」>「Add_List_Tag」を実行して簡単にマークアップができます。 このマクロファイルをダウンロード 解凍後、User/Library/jEdit/macros/にコピーして利用してください。 ゼロからリストを作成するときは、ゼンコードでul,liタグを展開するのが 効率的ですが、既にあるテキストリストのマークアップには役立つのではないでしょうか。

Editor

shimizu
サイバーエージェント広告事業部デザイナー、ディレクターを経て独立。 NINE SENSE Inc. の代表取締役兼クリエイティブディレクター。 趣味は海外ドラマ鑑賞と写真。 好きな食べ物はスープカレー。
Latest Entries
TrackBack URL