VSCodeで使えるHTML・CSSショートカット集
katayamawp
Visual Studio Code（VSCode）は、HTML・CSS開発において効率的に作業するための多くのショートカットを提供しています。この記事では、開発速度を劇的に向上させる主要なショートカットを紹介します。
本記事の目次
HTMLのショートカット（Emmet）
VSCodeはEmmetを標準搭載しており、少ない入力で多くのHTMLコードを生成できます。
1. 基本的なHTML構造
「!」と入力してTabキーを押すと、HTML5の基本構造が自動生成されます。
! [Tab]
結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 要素の作成
要素名を入力してTabキーを押すと、対応するタグが作成されます。
div [Tab]
結果：
<div></div>
3. IDとクラスの追加
「#」でID、「.」でクラスを指定できます。
div#container.wrapper [Tab]
結果：
<div id="container" class="wrapper"></div>
4. 入れ子構造
「>」を使って子要素を作成できます。
ul>li*3 [Tab]
結果：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
5. 兄弟要素
「+」を使って兄弟要素を作成できます。
header+main+footer [Tab]
結果：
<header></header> <main></main> <footer></footer>
6. グループ化
「()」を使って要素をグループ化できます。
div>(header>nav>ul>li*3)+main+footer [Tab]
結果：
<div>
<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</div>
7. テキスト内容の追加
「{}」を使ってテキスト内容を追加できます。
p{これはサンプルテキストです。} [Tab]
結果：
<p>これはサンプルテキストです。</p>
8. 連番の作成
「$」を使って連番を作成できます。
ul>li.item$*5{アイテム$} [Tab]
結果：
<ul>
<li class="item1">アイテム1</li>
<li class="item2">アイテム2</li>
<li class="item3">アイテム3</li>
<li class="item4">アイテム4</li>
<li class="item5">アイテム5</li>
</ul>
CSSのショートカット（Emmet）
EmmetはCSSでも使用でき、プロパティを素早く入力できます。
1. プロパティの略語
プロパティの略語を入力してTabキーを押すと、完全なプロパティが展開されます。
m [Tab] → margin: p [Tab] → padding: w [Tab] → width: h [Tab] → height: bg [Tab] → background: c [Tab] → color: fz [Tab] → font-size: d [Tab] → display: pos [Tab] → position: fl [Tab] → float: z [Tab] → z-index: o [Tab] → opacity: bd [Tab] → border:
2. 値を含むプロパティ
値を含むプロパティの略語を入力できます。
m10 [Tab] → margin: 10px; p20 [Tab] → padding: 20px; w100p [Tab] → width: 100%; h50vh [Tab] → height: 50vh; c#f [Tab] → color: #fff; fz16 [Tab] → font-size: 16px; df [Tab] → display: flex; dg [Tab] → display: grid; poa [Tab] → position: absolute; por [Tab] → position: relative;
3. 複数の値
「-」を使って複数の値を指定できます。
m10-20 [Tab] → margin: 10px 20px; p10-20-30 [Tab] → padding: 10px 20px 30px; m10-auto [Tab] → margin: 10px auto;
4. 単位の指定
数値の後に単位の略語を付けることができます。
w100p [Tab] → width: 100%; m10r [Tab] → margin: 10rem; p2e [Tab] → padding: 2em; lh1.5 [Tab] → line-height: 1.5;
5. Flexboxのショートカット
Flexboxに関連するプロパティのショートカットです。
df [Tab] → display: flex; dif [Tab] → display: inline-flex; fxd [Tab] → flex-direction: fxdr [Tab] → flex-direction: row; fxdc [Tab] → flex-direction: column; jc [Tab] → justify-content: jcc [Tab] → justify-content: center; jcs [Tab] → justify-content: flex-start; jce [Tab] → justify-content: flex-end; jcsb [Tab] → justify-content: space-between; jcsa [Tab] → justify-content: space-around; jcse [Tab] → justify-content: space-evenly; ai [Tab] → align-items: aic [Tab] → align-items: center; ais [Tab] → align-items: flex-start; aie [Tab] → align-items: flex-end; aist [Tab] → align-items: stretch; ac [Tab] → align-content: acc [Tab] → align-content: center; acs [Tab] → align-content: flex-start; ace [Tab] → align-content: flex-end; acsa [Tab] → align-content: space-around; acsb [Tab] → align-content: space-between; as [Tab] → align-self: fw [Tab] → flex-wrap: fww [Tab] → flex-wrap: wrap; fwnw [Tab] → flex-wrap: nowrap; fg [Tab] → flex-grow: fs [Tab] → flex-shrink: fb [Tab] → flex-basis:
6. Gridのショートカット
CSS Gridに関連するプロパティのショートカットです。
dg [Tab] → display: grid; dig [Tab] → display: inline-grid; gtc [Tab] → grid-template-columns: gtc1fr [Tab] → grid-template-columns: 1fr; gtc1-1 [Tab] → grid-template-columns: 1fr 1fr; gtc1-2 [Tab] → grid-template-columns: 1fr 2fr; gtr [Tab] → grid-template-rows: gtr100 [Tab] → grid-template-rows: 100px; gtr1-2 [Tab] → grid-template-rows: 1fr 2fr; gta [Tab] → grid-template-areas: ga [Tab] → grid-area: gc [Tab] → grid-column: gcstart [Tab] → grid-column-start: gcend [Tab] → grid-column-end: gr [Tab] → grid-row: grstart [Tab] → grid-row-start: grend [Tab] → grid-row-end; gg [Tab] → grid-gap:
7. テキスト関連のショートカット
テキストスタイリングに関するプロパティです。
ta [Tab] → text-align: tac [Tab] → text-align: center; taj [Tab] → text-align: justify; tar [Tab] → text-align: right; tal [Tab] → text-align: left; td [Tab] → text-decoration: tdn [Tab] → text-decoration: none; tdu [Tab] → text-decoration: underline; tdl [Tab] → text-decoration: line-through; tt [Tab] → text-transform: ttu [Tab] → text-transform: uppercase; ttl [Tab] → text-transform: lowercase; ttc [Tab] → text-transform: capitalize; fw [Tab] → font-weight: fwb [Tab] → font-weight: bold; fwn [Tab] → font-weight: normal; fs [Tab] → font-style: fsi [Tab] → font-style: italic; fsn [Tab] → font-style: normal;
8. 背景とボーダーのショートカット
背景とボーダーのスタイリングに便利なショートカットです。
bg [Tab] → background: bgc [Tab] → background-color: bgc#f [Tab] → background-color: #fff; bgi [Tab] → background-image: bgp [Tab] → background-position: bgr [Tab] → background-repeat: bgs [Tab] → background-size: bd [Tab] → border: bd1-s-#f [Tab] → border: 1px solid #fff; bdrs [Tab] → border-radius: bdrs5 [Tab] → border-radius: 5px; box [Tab] → box-shadow:
VSCodeのキーボードショートカット
HTML・CSS編集に役立つVSCode固有のキーボードショートカットです。
基本操作
- Ctrl+Space：コード補完を表示
- Ctrl+/：選択行をコメントアウト/コメント解除
- Alt+Shift+F：コードのフォーマット
- Ctrl+F：検索
- Ctrl+H：置換
- Ctrl+D：同じ単語を次々と選択
- Alt+↑/↓：行を上下に移動
- Ctrl+L：現在の行を選択
HTMLタグ操作
- Ctrl+Shift+]：対応するHTMLタグにジャンプ
- Ctrl+K Ctrl+T：HTMLタグの名前を変更（両方のタグが自動的に更新）
- Ctrl+Shift+V：マークダウンプレビュー表示（HTMLプレビューに役立つ）
選択と編集
- Shift+Alt+→：選択範囲を拡大
- Shift+Alt+←：選択範囲を縮小
- Ctrl+Shift+L：選択したすべての出現箇所を一度に編集
- Alt+クリック：複数カーソルを配置
実践的なHTMLとCSSのショートカット例
実際の開発で便利な組み合わせのショートカットを紹介します。
レスポンシブなグリッドレイアウト
.container>(.item*3>h3{見出し$}+p{これはアイテム$の説明文です。}) [Tab]
結果：
<div class="container">
<div class="item">
<h3>見出し1</h3>
<p>これはアイテム1の説明文です。</p>
</div>
<div class="item">
<h3>見出し2</h3>
<p>これはアイテム2の説明文です。</p>
</div>
<div class="item">
<h3>見出し3</h3>
<p>これはアイテム3の説明文です。</p>
</div>
</div>
ナビゲーションメニュー
nav>ul.menu>li.menu-item*5>a[href="#"]{メニュー$} [Tab]
結果：
<nav>
<ul class="menu">
<li class="menu-item"><a href="#">メニュー1</a></li>
<li class="menu-item"><a href="#">メニュー2</a></li>
<li class="menu-item"><a href="#">メニュー3</a></li>
<li class="menu-item"><a href="#">メニュー4</a></li>
<li class="menu-item"><a href="#">メニュー5</a></li>
</ul>
</nav>
フォーム要素
form>fieldset>legend{お問い合わせフォーム}+(div.form-group>label{お名前}+input:text[name=name])+(div.form-group>label{メールアドレス}+input:email[name=email])+(div.form-group>label{メッセージ}+textarea[name=message])+(div.form-group>button:submit{送信}) [Tab]
結果：
<form>
<fieldset>
<legend>お問い合わせフォーム</legend>
<div class="form-group">
<label>お名前</label>
<input type="text" name="name">
</div>
<div class="form-group">
<label>メールアドレス</label>
<input type="email" name="email">
</div>
<div class="form-group">
<label>メッセージ</label>
<textarea name="message"></textarea>
</div>
<div class="form-group">
<button type="submit">送信</button>
</div>
</fieldset>
</form>
メディアクエリのショートカット
レスポンシブデザインに必要なメディアクエリのショートカットです。
@m [Tab] → @media screen and {}
@mw320 [Tab] → @media (min-width: 320px) {}
@mxw1200 [Tab] → @media (max-width: 1200px) {}
@print [Tab] → @media print {}
@dpi [Tab] → @media (min-resolution: ) {}
Flexboxレイアウトのショートカット
Flexboxレイアウトの一般的なパターンを素早く作成できます。
/* 中央揃えのFlexboxコンテナ */
.center {
df [Tab]
jcc [Tab]
aic [Tab]
}
/* 結果 */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 横並びのナビゲーション */
.nav {
df [Tab]
jcsb [Tab]
aic [Tab]
}
/* 結果 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
よく使われるCSSパターン
頻繁に使用されるCSSパターンのショートカットです。
/* センタリングパターン */
.center {
pos [Tab]
t50p [Tab]
l50p [Tab]
trf [Tab]
trft-50p-50p [Tab]
}
/* 結果 */
.center {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ボックスシャドウ */
.card {
bdrs5 [Tab]
p20 [Tab]
m10 [Tab]
box3-5-10-rgba000.1 [Tab]
}
/* 結果 */
.card {
border-radius: 5px;
padding: 20px;
margin: 10px;
box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
}
メディアテンプレート
画像やビデオ要素のテンプレートを素早く作成できます。
/* レスポンシブ画像 */
figure.responsive>img[src="image.jpg" alt="説明"]+figcaption{キャプション} [Tab]
結果：
<figure class="responsive">
<img src="image.jpg" alt="説明">
<figcaption>キャプション</figcaption>
</figure>
HTMLの高度なショートカット
より複雑なHTML構造や特殊な要素のためのショートカットを紹介します。
1. 属性付きの要素
角括弧「[]」を使って要素に属性を追加できます。
a[href="https://example.com" target="_blank" rel="noopener" title="サンプルリンク"] [Tab]
結果：
<a href="https://example.com" target="_blank" rel="noopener" title="サンプルリンク"></a>
2. フォーム要素の種類
コロン「:」を使ってフォーム要素のタイプを指定できます。
input:email [Tab] → <input type="email"> input:password [Tab] → <input type="password"> input:datetime [Tab] → <input type="datetime-local"> input:color [Tab] → <input type="color"> input:range [Tab] → <input type="range"> input:file [Tab] → <input type="file"> input:number [Tab] → <input type="number"> input:search [Tab] → <input type="search"> input:url [Tab] → <input type="url"> input:date [Tab] → <input type="date"> input:time [Tab] → <input type="time"> input:checkbox [Tab] → <input type="checkbox"> input:radio [Tab] → <input type="radio"> input:submit:value [Tab] → <input type="submit" value="">
3. メタタグとSEO
メタタグを素早く作成するショートカットです。
meta:desc [Tab] → <meta name="description" content=""> meta:keywords [Tab] → <meta name="keywords" content=""> meta:author [Tab] → <meta name="author" content=""> meta:viewport [Tab] → <meta name="viewport" content="width=device-width, initial-scale=1.0"> link:favicon [Tab] → <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> link:css [Tab] → <link rel="stylesheet" href="style.css"> link:print [Tab] → <link rel="stylesheet" href="print.css" media="print"> link:rss [Tab] → <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> script:src [Tab] → <script src=""></script>
4. データリスト要素
入力候補を提供するdatalist要素を素早く作成できます。
input:text[list=options]+datalist#options>option[value]*3 [Tab]
結果：
<input type="text" list="options">
<datalist id="options">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</datalist>
5. テーブル構造
複雑なテーブル構造を素早く作成できます。
table>thead>tr>th*3^^tbody>tr*3>td*3 [Tab]
結果：
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
6. 詳細・要約要素
アコーディオン用のdetails/summary要素を作成できます。
details>summary{クリックして詳細を表示}+p{ここに詳細な内容を記述します。} [Tab]
結果：
<details>
<summary>クリックして詳細を表示</summary>
<p>ここに詳細な内容を記述します。</p>
</details>
7. 図形とキャンバス
SVGやCanvas要素を素早く作成できます。
svg[width=200 height=200]>circle[cx=100 cy=100 r=50 fill="#ff0000"] [Tab]
結果：
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="#ff0000"></circle>
</svg>
canvas#myCanvas[width=300 height=200] [Tab]
結果：
<canvas id="myCanvas" width="300" height="200"></canvas>
VSCodeの拡張機能
HTML・CSS開発の生産性をさらに向上させる拡張機能を紹介します。
おすすめの拡張機能
- Auto Rename Tag：開始タグの名前を変更すると、対応する終了タグも自動的に変更されます。
- CSS Peek：HTMLファイルからCSSの定義にジャンプできます。
- HTML CSS Support：HTMLファイルでCSSクラスの補完を提供します。
- IntelliSense for CSS class names：プロジェクト内のCSSクラス名の補完を提供します。
- Live Server：ファイルを保存すると自動的にブラウザをリロードします。
- HTML to CSS autocompletion：HTMLのクラスやIDからCSSセレクタを自動生成します。
まとめ
VSCodeでHTMLとCSSを効率的に記述するためのショートカットを紹介しました。Emmetを活用することで、コーディングの速度が大幅に向上します。特に、Flexbox・Gridなどのモダンレイアウト技術に関するショートカットを覚えておくと、開発効率が格段に上がります。
また、VSCode固有のキーボードショートカットや拡張機能を組み合わせることで、さらに効率的な開発が可能になります。カスタムスニペットを作成して、プロジェクト固有のコードテンプレートを準備しておくのもおすすめです。
これらのショートカットを日常的に使うことで、コーディング時間を短縮し、より創造的な作業に時間を割くことができるでしょう。まずは、よく使うショートカットから少しずつ覚えていき、徐々に自分のワークフローに組み込んでいくのが効果的です。