Atomテキストエディタでhtmlのaタグを超簡単に入力する方法

htmlファイルを作成していて、<a>タグを入力する時もっと簡単にできないの……と思いませんか? <a>タグは、htmlを記述すると必ず記述するタグですからサクサクと簡単に入力したいですよね。Atomテキストエディタであれば実は<a>タグを超簡単に入力できます。ということで今日はその入力方法をご紹介しますね。

まずは準備として、Atomでこれから編集するファイルの種類をhtmlにします。これをしないと簡単に入力する方法ができないので必ずしてくださいネ。方法がわからない人はこちらをどうぞ→htmlやcssなどファイルの種類を選択

それでははじめますね。

まず a という文字だけ入力してください。タグのはじまりである < の入力はしないで、a という文字だけですよ。

するとプルダウンが表示されて、入力候補が表示されていますよね。

このなかから、「a   Anchor」を選んで、確定してください。おそらく入力候補の一番上に表示されているはずです。

ちなみに入力候補を選び、確定する方法には
・マウスのクリックで候補を選び、確定
・上下の矢印キーで候補を選び、Enterキーで選択確定
・上下の矢印キーで候補を選び、Tabキーで選択確定
と3つの方法があります。あなたのやりやすい方法でやってくださいネ。

話はもどって……えっと<a href=”#”></a>が入力されていますね。

しかもファイルのパスを入力する場所にカーソルが移動していますので、あとはそこにファイルのパス名を入力するだけです。

すごく簡単に<a>タグが入力できましたね。

えっ、target属性はどうするの? と思ったあなた、するどいですね。まずはカーソルを<a>タグの>の前へ移動させてください。

その位置でキーボードの「Spaceキー」を押してください。

そうすると入力候補が表示されますね。

そこから「target」を選択すると

「target=""」の文字が入力され、さらに入力候補まで表示されています。

ここで「_blank」を選択してみましょう。

これで<a>タグの入力できましたね。すごく簡単ですね。

まとめ

今日はAtomテキストエディタでhtmlファイルに<a>タグを簡単に入力する方法をご紹介しました。この方法であれば、<a>タグのhref属性やtarget属性、そらにそれらの属性値(=ファイルのパス・_targetなど)も簡単に入力できるので、ホームページを効率的に楽しく作成することができると思います。ぜひ活用してくださいネ。ちなみに今日ご紹介した入力方法は専門用語でコード補完(スニペット と オートコンプリート)といいます。これらの専門用語をおぼえる必要はありませんが、機会があればその仕組みもご紹介しますね。それでは。

コメント

  1. 秋元 より:

    aと入力すると
    候補一覧にariaとたくさん出てしまいます。
    管理人さんはオレンジ色ですが
    私が記入しているものはaがピンク色です。
    accesskeyが一番上でした。他はaria-~色々です。
    他の解説なども見ましたがこのように表示されるますとしか
    解説されてないので、今回同じようになるように解説お願い致します。

    • 管理人 より:

      秋本さま

      返事がおそくなり、大変申し訳ありません。

      > aと入力すると
      > 候補一覧にariaとたくさん出てしまいます。

      htmlタグの属性入力部分(つまり< と > の中)で、入力すると「属性の候補値」が表示されます。なので、aと入力すると、属性accesskeyが一番上に、表示され、他の属性aria-~色々も表示されます。

      htmlタグの開始タグと終了タグの間(つまり< と > の外)で、入力すると「要素の候補値」が表示されます。なので、aと入力すると、a(要素)タグが表示されます。

      > 管理人さんはオレンジ色ですが
      > 私が記入しているものはaがピンク色です。

      これは、おそらくテーマによる違いではないでしょうか?

      テーマを変更すると、エディタの背景色を変更することができます。それにともなって文字色も変更になっているのかもしれません→Atomテキストエディタの画面の色はテーマから変更できます

タイトルとURLをコピーしました