WebDesigner's Memorandumウェブデザイナーの備忘録

HTMLタグの入力をラクにするスニペット集

2022年5月1日

HTMLタグの入力をラクにするスニペット案をいくつかまとめておきます。

基本的な考え方

基本的にはh1<>のように、タグ名を入力してそのあとに山括弧を入力すると発火するようにします。

タグ名<>

テキストエディタではEmmetを使用する

ちなみに、Visual Studio CodeなどのテキストエディタではEmmetを使用した方が早く入力できます。

効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本

https://webrandum.net/emmet-html

Webサイトのマークアップスピードを上げるためには、そもそも書く文字数を減らすとスピードが上がります。HTMLの場合は下記のような理由から、記述に時間がかかってしまいます開始タグと閉じタグで、要素名を2回入力する必要がある <>を入力する必要があるインデントの入力が面倒今回はそんなHTMLを素早く入力できるEmmetという記法についてまとめます。Emmetとは？Emmet（旧：Zen-Coding）は、独自の省略記法でマークアップスピードを上げるプラグインです。括弧や閉じタグを書かずに記述して最後にtabで展開するので、単純に...

また、Emmetだと一括でHTMLタグの入力ができたり、複数行の原稿に対して1行1行をタグで囲むような便利な機能（Wrap with Abbreviation）が使えます。

Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法

https://webrandum.net/emmet-multiple-tag

効率的にHTMLを入力するために、Emmetは欠かせない機能です。意外と知られていませんが、Emmetでは複数タグを一括展開できます。たとえば下記の1行をざっと書いてtabでEmmet展開をすると...header.header>.header_wrap>.header_left>h1>img^^.header_right>nav>ul.header_nav>li*3>a下記のHTMLが一気にできあがります。<header class="header"> <div class="header_wrap"> <div class="header_left"> <h1><img src="" alt=&quot...

EmmetのWrap with Abbreviationで複数行のマークアップを効率的に行う

https://webrandum.net/emmet-wrap-with-abbreviation

Emmetを使うとコードが爆速で入力できるようになりますが、さらに極めたい人は「Wrap with Abbreviation」機能を使うと、選択したテキストをすばやくHTMLタグで囲えます。Visual Studio Codeでの使用方法Visual Studio Codeで使いたい場合は、まずテキストを選択して、shift + command + Pでコマンドパレットを表示させます。「Wrap with Abbreviation」と入力して、「個々の行でラップ変換（Wrap Indivisual Lines with Abbreviation）」を選択します。すると、入力項目が表示されるので、そこにEmmetの記述をします。今回はリストに...

テキストエディタ以外でスニペットを使用する

WordPressの編集画面など、テキストエディタ以外の場所でHTMLタグを入力するときにはスニペットを使用します。

Emmetが使用できない場所でHTMLタグを入力しないといけないときに非常に役に立ちます。

スニペット一覧

ひと通りよく使うHTMLタグを登録しておきます。
.（ピリオド）をタグと括弧の間に入れるとclass付き、#（ハッシュ）を入れるとid付きになるようにしています。

ちなみに、使うスニペットアプリはDashを想定しています。

スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を...

https://webrandum.net/dash6

スニペットとしてもドキュメント検索としても使えるMacユーザーにオススメのアプリ、「Dash」ですが、過去に記事にしたことがあります。ただ、時間も経ってメジャーアップデートもあったので、今回改めてまとめ直します。スニペットアプリは必須「スニペット（snippet）」は断片という意味があり、何度も再利用して繰り返し使うコードや定型文のことです。スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。スニペット - Wik...

変換前	変換後	内容
h1<>	<h1>@cursor</h1>
h2<>	<h2>@cursor</h2>
h3<>	<h3>@cursor</h3>
h4<>	<h4>@cursor</h4>
h5<>	<h5>@cursor</h5>
h6<>	<h6>@cursor</h6>
img<>	<img src=”@cursor” alt=””>
a<>	<a href=”@cursor”></a>
br<>	<br>
table<>	<table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table>	よく使うテーブルの形式を登録
thead<>	<thead> @cursor </thead>
tbody<>	<tbody> @cursor </tbody>
tr<>	<tr> @cursor </tr>
th<>	<th>@cursor</th>
td<>	<td>@cursor</td>
strong<>	<strong>@cursor</strong>
span<>	<span>@cursor</span>
div<>	<div>@cursor</div>
ul<>	<ul> <li>@cursor</li> </ul>
ol<>	<ol> <li>@cursor</li> </ol>
li<>	<li>@cursor</li>
div.<>	<div class=”@cursor”></div>	`.`を付けたらclass指定
div#<>	<div id=”@cursor”></div>	`#`を付けたらid指定
span.<>	<span class=”@cursor”></span>	`.`を付けたらclass指定
span#<>	<span id=”@cursor”></span>	`#`を付けたらid指定
!!!<>	<!DOCTYPE html>	Emmetと同じ

初期設定

!<>と入力すると、Emmetと同じく基本テンプレートに変換されるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ドキュメント</title>
</head>
<body>
  @cursor
</body>
</html>

著者について

サイトウマサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね