タグ: <span>html</span>

Emmetの「html lang=”en”」を「html lang=”ja”」にsnippets.jsonで変更

Emmetでhtmlなどを便利にコーディングできるが、デフォルトのhtmlの設定は英語です。テキストエディターはNotepad++Emmetプラグインで利用をしています。

Notepad++

!

と入力をして、「CTR+E」で展開すると

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>

となります。

そこで、Zen-Codingのように設定を変更をすることにしました。でも、ファイルはどれだ?

Notepad++Emmetをプラグインでの設定ファイルは「emmet」フォルダーの「snippets.json」に、「html lang=”en”」などの項目があります。まずは、この「snippets.json」ファイルをバックアップをします。

{
"variables": {
"lang": "en",
"locale": "en-US",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},

「snippets.json」のファイルの先頭に項目があります。

{
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
 

「”lang”: “en”,」「”lang”: “ja”,」「”locale”: “en-US”,」「”locale”: “ja-JP”,」に保存をします。

Emmetを起動し直して、展開をしてみると、

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
 

となります。


「zen-coding」によるコーディングの効率化!

Html、CSSをDreamweaverでコードを書かなくても出来るのですが、やはりコードを書くことが必要になります。場合によってはテキストエディターで書くこともありますよね。で、コードを書くのには同じ事や定型文のような事を何度も書いたりと効率的とは言えない時間がかかる作業があります。

そこで、「HTML+CSSコーディングが10倍速くなるZen Coding」という本を見かけました。便利な物だと思い、家で検索してみる事にしました。

いろいろとヒットしました。お!便利そう!とりあえずDreamweaverに入れてと。おおーこれだけで、こんなにコードが出来るとは!?

入力例
html:4t

Zen Coding後
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ja”>
<head>
 <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
 <title></title>
</head>
<body>
 
</body>
</html>

と。

入力例
div#main

Zen Coding後
<div id=”main”></div>

と。ちょっとしたケアレスミスを防ぎ、効率が上がるので、便利です。
テキストエディターでも使えるように、Notepad++にzen-codingを入れても使っています。

オススメのzen-codingの解説は「マークアップ効率化 – zen-codingでコーディングを倍速に」
http://techblog.yahoo.co.jp/cat207/web_1/_zencoding/
です。解説もあり、リンクも充実していて、まずはここから自分の使っているソフトを確認して、勧めるのにはオススメです。

 本家のzen-coding
http://code.google.com/p/zen-coding/
Actions
http://code.google.com/p/zen-coding/wiki/Actions
CheatSheets
http://code.google.com/p/zen-coding/wiki/CheatSheets
Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
です。英語ですが、変換するというイメージでとらえると使えると思います。