質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • HTML

    8645questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3871questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vim

    502questions

    VimとはUnix / Linux 系のOSに標準搭載されているターミナル上で動くテキストエディタです。

vimでhtmlのliタグを記載する際

解決済

回答 7

投稿

  • 評価
  • クリップ 0
  • VIEW 288

kk123

score 106

 聞きたいこと

vimでHTMLのliタグを書く時に、下のようなことになることがよくあるのでvimmerの方に効率的な変更方法をお聞きしたいです。

 自分が陥る現象

  • グローバルナビゲーションを書きたいが、めんどいので「ホーム」の1行を書いたら「yy + p」でコピペ
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
  • あとは1行1行書き換えるが、次の行の「ホーム」にジャンプする方法として下の方法を実施
    *「/ホーム」で検索、「c + e」で「ホーム」を削除し、値を入力。その後コマンドモードに戻り「n」で再度「ホーム」を検索…
<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li> ← ホームをお知らせに変更(以下のホームも粛々と上記手順で変更)
<li><a href="#">ホーム</a></li> 
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>
<li><a href="#">ホーム</a></li>


この変更方法しか自分だと思いつかず、とても効率が悪そうなので、vimmerの方にアドバイスいただきたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 7

+5

項目が決まっているなら先にこんな風に先に項目だけ作っておく作戦が使えますよ

ホーム
お知らせ
ランキング
その他
設定

ホームの箇所でI<li><a href="#">と入力!、j.でバババッと他の行も同じものを適用。

<li><a href="#">ホーム
<li><a href="#">お知らせ
<li><a href="#">ランキング
<li><a href="#">その他
<li><a href="#">設定

次にA、残りの</a></li>を入力して同じくj.で繰り返せば実現出来ます。


リンク先も決まっているのであれば
レコーディング機能を使ってみてはどうでしょうか?

こんな風にcsv風に作っておいて…

home,ホーム
news,お知らせ
ranking,ランキング
infomation,その他
settings,設定

qaaキーに向かってレコーディング開始。
Iで行頭に<li><a href="#
f,でカンマにカーソルを飛ばす
sでカンマを削除しつつ">
Aで行末に</a></li>
j^でカーソルを次の行頭に移動しておく
qでレコーディング終了

後は4@aで4回再生して終了。


おまけ: テンプレートエンジンの紹介

長い事メンテするならHTMLの静的ジェネレータ言語を使った方が良いでしょうね。
こういうやつです。

ほぼEmmetの世界観で全て記入していけるので作業効率が段違いに良くなります。

コマンドラインツール一撃で生のHTMLを生成してくれますし、
他のツールとの組み合わせでファイル保存と同時に勝手にHTMLが生成され直すWatchみたいな機能が実現出来たりします。
何度も修正が求められるようであればこういったツールを併用したほうが良いですね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 17:48

    回答ありがとうございます!
    「j.」が個人的に好きです!あとvimにレコーディング機能があったのを初めて知りました…ありがとうございます!

    HTML静的ジェネレーターも使用してみたいと思います!

    キャンセル

+3

私のやり方です。初めに、下記のようなテキストファイルを作っておき(借用すみません)、

ホーム
お知らせ
ランキング
その他
設定


vimで
:%s/^/<li><a href="#">/
:%s:$:</a></li>:
を実行していました。

結果は以下のようになります。

<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">ランキング</a></li>
<li><a href="#">その他</a></li>
<li><a href="#">設定</a></li>


このファイルを別なファイルに挿入するには、挿入されるファイルをvimで開き、挿入される場所にカーソルを持っていき
:r ファイル名
で挿入できます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+2

私は

ホーム
お知らせ
ランキング
その他
設定


を矩形コピーして

<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>


に矩形ペーストしますね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 17:39

    回答ありがとうございます!
    確かに一度変更対象を書き出しておいて、後からコピペはいいですね…!大変参考になりました!

    キャンセル

+2

<li><a href="#">ホーム</a></li>

を書いたら yy+ 5 +p
:2 で2行目に飛んで
:s/ホーム/お知らせ/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/19 17:12 編集

    回答ありがとうございます!
    2行目の「ホーム」を「お知らせ」に変更した後、3行目の「ホーム」を「会社概要」、4行目を…
    といった風に2行目以降も変更したい場合は、再度「:s/ホーム/置換文字/」を実施するしかないのでしょうか…?

    キャンセル

  • 2018/04/19 17:37 編集

    コマンドは「|」でつないで書けます
    :2 | :s/ホーム/お知らせ/ |:3 | :s/ホーム/会社概要/ |:4 | :s/ホーム/なんか/

    キャンセル

  • 2018/04/20 17:48

    なるほど!
    |で繋げれば一回で置換できそうですね!

    キャンセル

+2

  • gn を使う方法 (:help gn)
  1. コピペ
  2. /ホーム と検索
  3. cgn で編集
  4. 手順3を繰り返す

GIF1


  • 矩形選択を使う方法 (:help v_b_I:help v_b_A)
  1. 先に項目のリストを作る
  2. CTRL + v で矩形選択モードへ、項目の先頭を選択
  3. SHIFT + i でインサートモードへ、開始タグ <li><a href="#"> を入力
  4. CTRL + v で矩形選択モードへ、各行を選択して $
  5. SHIFT + a でインサートモードへ、終了タグ </a></li> を入力

GIF2

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 17:38

    回答ありがとうございます!GIFまでつけていただいてイメージがとても湧きました!
    個人的にGIF2の方が好きです!

    キャンセル

+1

なにげない一言が
emacserを
きずつけた

miyabi-sunさん方式で、あらかじめリスト作るスタートとします。

ホーム
お知らせ
ランキング
その他
設定
  1. <li><a href="#">とタイプ
  2. C-@ C-a C-w
    ここまでで、1. でタイプしたものをキルリングへキル
  3. C-x ( C-y C-a C-n C-x )
    ペーストし、次の行へ進む、とマクロ登録
  4. C-x e e e e
    マクロを実行し、各行にタグをペースト
  5. C-5 C-p で五行前に戻る
  6. </a></li>とタイプ
  7. C-@ C-a C-wでキル
  8. C-x ( C-e C-y C-n C-x )
    貼り付けて移動、をマクロ登録
  9. C-x e e e e
    マクロを実行し、各行に閉じタグをペースト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/20 17:59

    回答ありがとうございます!
    私はインサートモードで<C-@> <C-a>といったコマンドを使用できることや、マクロを初めて知りました…!

    キャンセル

  • 2018/04/20 20:01

    いやこれemacsでvimじゃないので、インサートモードとか無いですよ?念のため。

    キャンセル

0

先に項目を入力して、一括置換する方法です。

  • スラがあるので、@マークを記号にしています。
  • 検索文字は、&で代入できるます。

今回の場合では、使いずらいですが参考までに。

コマンド

:%s@.*@<li><a href="#">&</a></li>

サンプル

あ
い
う
え
お
↓
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8645questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3871questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vim

    502questions

    VimとはUnix / Linux 系のOSに標準搭載されているターミナル上で動くテキストエディタです。