Atomでhtmlとcssのコメント記号を簡単に入力するメニュー[コメントの切替]とショートカットキー

Pocket

Atomテキストエディタでhtmlやcssのコーディングをしていて < > ! – や / * などのコメント記号入力がとっても大変、、、簡単な方法はないの……と思いませんか?実はAtomには、htmlとcssのコメント記号を簡単に入力することができる[コメントの切替]とショートカットキーがあります。さらに「文字が入力してある場合は、前後にコメント記号を付加・削除してくれる」という便利な機能付きです……ということで今日はその方法をお伝えしますね。

そういえば以前ご紹介した「Atomテキストエディタでhtmlファイルのコメント記号<!–>を超簡単に入力する方法」よりも、今日ご紹介する方法のほうが便利です。すみません。

というわけで、はじめますね。まずはメニューコマンドの[コメントの切替]から。

メニューコマンドの[コメントの切替]

まずはメニューバーから選択することができる[コメントの切替]でコメント記号を入力する方法からはじめますね。htmlファイルかcssファイル内で、コメント記号を入力する行にカーソルを置いて、メニューバーの[編集]→[コメントの切替]を選択してください。

簡単にコメント記号が入力できましたね。

コメント記号を削除したい場合も当然ありますよね。その場合も同じように、コメント記号を削除する行にカーソルを置いて、メニューバーの[編集]→[コメントの切替]を選択してください。

コメント記号の削除も簡単ですね。

cssファイルでも操作は同じです。今度は同じことをショートカットキーでやってみましょう。

ショートカットキー

コメント記号を「入力」または「削除」するショートカットキーを覚えられるようであれば、ぜひ覚えてください。圧倒的にhtmlやcssをコーディングするスピードがアップします。

Windowsのショートカットキーは、Ctrl + / になります。

入力・削除とも同じショートカットキーです。キーを押すごとに「入力」←→「削除」を繰り返します。それではhtmlファイルにコメント記号をショートカットキーで「入力」および「削除」する場合を見ましょう。

コメント記号の入力

あっという間にコメント記号が入力できました。続けて削除します。

あっという間にコメント記号の「入力」と「削除」ができます。もちろんcssファイルも同じようにショートカットキーで可能です。楽々ですね。

そうそう、ショートカットキーは便利なのですが、自然と打てるようになるまでにちょっと時間がかかりませんか? 最初のうちは『あれーっ、なんだったけっ?』なんてことがあるかもしれません。そんな時には前述のメニューコマンドの[コメントの切替]で説明したように[コメントの切替]をマウスで選択してみてください。ショートカットキーが記載されています。

文字が入力してある場合は、前後にコメント記号を付加・削除してくれる

メニューコマンドの[コメントの切替]やショートカットキーで、htmlやcssのコメント記号入力が楽になったかと思います。ここでさらに知っておくと便利なことをお伝えしますね。それは「文字が入力してある場合は、前後にコメント記号を付加・前後のコメントを削除してくれる」ことです。ちょっと例を見てみましょう。まずはコメント記号を付加する例から

htmlの場合
cssの場合

次はコメント記号を削除する例です。

htmlの場合
cssの場合

一時的にコメントアウトしたい時など、すっごく便利だと思いませんか?

まとめ

今日はAtomテキストエディタでhtmlとcssのコメント記号を簡単に入力できるメニュー[コメントの切替]とショートカットキーの説明をしました。さらにこの方法は「文字が入力してある場合は、前後にコメント記号を付加・削除してくれる」という便利な機能付きです。ぜひ覚えて効率的にホームページを作成してくださいネ。

Pocket