sketchでwebコーディングしてみる

8108 ワード
HTML5 SublimeText3 emmet sketch HTML5 テキストリンク

Sketch(デザインツール)でwebコーディングに挑戦

はじめに

今回の対象者(webコーディング)は、emmetを想定したhtmlコーディングとなります。
sketchのプラグインを作る訳ではなく、既に作られたプラグインを利用してのコーディングとなります。
プラグイン開発には、ある程度のjsなどの知識が必要となりますが、
今回、必要な知識としては、基本的なHTMLのマークアップのみとなります。
emmetは、今回のsketch操作で覚えて貰えれば幸いです。
また、環境設定は使用するエディターに依存していますので、こちらをご参照ください。
→英語ムリ〜って方専用

実際の操作している動画です。(YOUTUBEに飛びます)

Emmetでsketchしてみる

まずは、デザイン的な話は忘れて、emmetとhtmlのコーディングをおさらいしてみます。

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

</body>
</html>

HTML5は上記のようになりますが、emmetの場合は、!だけですみます。
次にもう少し先に進みます。

index.html
    <div class="div_class">
        <ul id="id_name">
            <li class="class_name_1">li_1 in</li>
            <li class="class_name_2">li_2 in</li>
            <li class="class_name_3">li_3 in</li>
        </ul>
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <div id="div_id">
        <h1>Title</h1>
        <div class="txt">
            <p class="p_tag">Text<span class="span_tag">span in.</span></p>
        </div>
    </div>

上のようなコーディングがしたい...と想定します。
なお今回は、空タグとかあるけど、今回はコーディングルールが目的ではなく、最小コードで多くを学ぶチュートリアルと思ってください。
では、emmetにした場合、どういう風なコーディングになるのかと言うと以下のようになります。
少し複雑ですが、大まかな記述方法を習得できるかと思います。
{~}この中括弧内は、基本的に全てがテキストとなります。

index.html
.div_class>ul#id_name>(li.class_name_${li_$ in})*3^+dl+^#div_id>h1{Title}+.txt>p.p_tag{Text}>.span_tag{span in.}

少し雑な感じはありますが、砕いてみていきます。
まずhtmlで多用するdivタグですが、こちらは基本的には記述する必要はありません。
じゃー、どうやって記述するのでしょう。

index.html
.div_class
<div class="div_class"></div>

#div_id
<div id="div_id"></div>

と言うように、class名、もしくはid名を指定してあげて記述します。
なので、間際らしく長ったらしくならずに済みます。
もちろん、divとしても機能します。

続いて、入れ子の場合は、ブロック要素に依存し、
予約タイプとそうでないタイプで記述が変わります。
予約タイプは、ulやol、dlなどで、そうでないタイプの場合は、
divやh、pなどのブロック要素タイプとなり、以下のように記述します。

index.html

.div_class>ul#id_name>(li.class_name_${li_$ in})*3

<div class="div_class">
    <ul id="id_name">
        <li class="class_name_1">li_1 in</li>
        <li class="class_name_2">li_2 in</li>
        <li class="class_name_3">li_3 in</li>
    </ul>
</div>

dl+

<dl>
    <dt></dt>
    <dd></dd>
</dl>

自分の場合、通常コーディングでは、
前者の方が多いかもしれません。
ですが、簡易なスタイル作成やデモ時などでは、後者の方のように、
クラスやidなどを考慮しせずに、タグだけってこともあるので、パッと出すために+での記述をすることもあります。

おまけとしては、spanなどの特殊なインライン要素はpタグ内であれば、
自動で出力可能なため、divタグのようにclassやidだけでの記述も可能です。
用途に合わせて、記述しましょう。

さらに、>や^、+を指定することで、
入れ子(>)、入れ子要素からの脱出(^)や隣同士(+)なども指定することが可能です。
あとは、以下のように($~)*nとする事で、
　ナンバリングや同様な複数のタグを一気に作ることも可能です。
ちなみに、()*nカッコ内の要素がn個複製されます。

index.html

#div_id>h1>.div_tag{Title}^.txt>p.p_tag{Text}>.span_tag{span in.}

<div id="div_id">
    <h1>
        <div class="div_tag">Title</div>
    </h1>
    <div class="txt">
        <p class="p_tag">Text<span class="span_tag">span in.</span></p>
    </div>
</div>

ul>(li.class_name_${li_$ in})*3

<ul>
<li class="class_name_1">li_1 in</li>
<li class="class_name_2">li_2 in</li>
<li class="class_name_3">li_3 in</li>
</ul>

その他の特殊な記述として、imgタグやaタグ、inputタグなどの場合は、classやid以外にも指定要素があるため、[~]を利用して、下記のようにして記述します。

~.html

a[href=#num1]{link}
<a href="#num1">link</a>

img[src=img/img.jpg alt=image_alt]+input[type=text value=text]+input#checkbox-id[type=checkbox]+label[for=checkbox-id]{checkbox label}

<img src="img/img.jpg" alt="image_alt">
<input type="text" value="text">
<input type="checkbox" id="checkbox-id">
<label for="checkbox-id">checkbox label</label>

このように[~]に各種属性に対応した内容を指定することで実現できます。
勿論、data-setなども同時に生成することも可能です。

それでは、次回は、もっと踏み込んだemmetに触れていきたいと思います。

次へ続く...

Link's
Sketch
Sketch Emmet
Sketch Plugin
動画

phpユーザーがブラウザを閉じるかどうかを検出
JavaScript(7)-数値に関する質問