MacのAtomで主にHTML、CSSをコーディングするときのショートカットの自分用メモ
開発環境
Mac: macOS Sierra バージョン10.12.6
Atom: バージョン1.40.0
カーソル移動
このショートカット知るまで矢印(→、↑、↓、←)でカーソル移動してたのでめっちゃ不便だった。。。
| ショートカット | 説明 |
|---|---|
| control + F | カーソルを１文字右に移動 |
| control + B | カーソルを１文字左に移動 |
| control + P | カーソルを１文字上に移動 |
| control + N | カーソルを１文字下に移動 |
| control + A | カーソルを文の先頭/文頭に移動 |
| control + E | カーソルを文の末尾/文末に移動 |
| control + M | 開始タグと閉じタグ間を移動 |
削除
| ショートカット | 説明 |
|---|---|
| control + D | カーソルの右の１文字を削除 |
| control + H | カーソルの左の１文字を削除 |
| control + K | カーソルの右から文末まで削除 |
一行削除したい場合は、control + A、control + Kがおすすめ
貼り付け
| ショートカット | 説明 |
|---|---|
| control + Y | control + Kで削除した文字を貼り付け |
選択
| ショートカット | 説明 |
|---|---|
| Shift + control + E | カーソルの右から文末まで選択 |
| Shift + control + A | カーソルの左から文頭まで選択 |
control + Aで文頭までカーソルを移動させ、Shift + control + Eでその1行全てを選択
Emmet
Atomに追加できる拡張機能
HTML&CSSのコーディングが爆速に
導入方法
Preferencesからinstallを選択し、Emmetを検索してインストールするだけ
HTML
コマンドを入力し、Tabを打ち込むだけでタグを生成できる
以下に一例を示す
<!--（コマンド) div -->
<div></div>
<!--(コマンド) ul>li -->
<ul>
<li></li>
</ul>
<!--(コマンド) h1+p -->
<h1></h1>
<p></p>
<!--(コマンド) ul>(li>a)*3 -->
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<!--(コマンド) div.className -->
<div class="className"></div>
<!--(コマンド) div#idName -->
<div id="idName"></div>
<!--(コマンド) ! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
CSS
HTMLと同様にプロパティの頭文字を打ってTabでコードを生成できる
以下に一例を示す
/*(コマンド) bz:b*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*(コマンド) w:100*/
width: 100px;
/*(コマンド) bgc*/
background-color: #fff;
/*(コマンド) ta:c*/
text-align: center;
/*(コマンド) d:f*/
display: -webkit-flex;
display: -ms-flex;
display: flex;
ベンダープレフィックスも自動的に書いてくれるから非常に便利で書き漏らしが減る
基本的にプロパティの頭文字だが、ものすごい量のコマンドがあるのでひとつずつ覚えていくしかない
↓コマンド一覧
https://docs.emmet.io/cheat-sheet/
参考資料
テキスト入力が死ぬほどはかどるMacショートカットキー15個
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集