Emmetを使ってちょこっとだけHTML・CSSを書くならクラウドエディター「jsdo.it」が便利

僕は、HTMLやCSSを書くとき、コードを長々と打ち込むのが面倒くさいので、Emmetを利用しないとあまり書く気がしません。

Emmetとは、短いコードを書いて展開することで効率よく編集できるツールなんですが、これで1度楽を覚えると、もう前には戻れません。

ですので、僕はHTML・CSSを編集するときは、Emmetが利用できる以下のテキストエディターを利用しています。

ただ、これらのエディターは、ガッツリ書く時は便利なんですが、数行程度のCSSのカスタマイズコードだけ書きたいときなどは、「新規ファイルを作成→一覧から書式をCSSに選択」という作業をする必要があるので、ちょびっとだけ面倒です。

そんな、「ちょっと面倒だな」と日々思っていた時に、jsdo.itというサービスを知り、使ってみたら、これがとても良かったので紹介です。

スポンサーリンク
レクタングル(大)広告

jsdo.itとは

jsdo.it Share JavaScript, HTML5 and CSS

jsdo.it は、ブラウザ上でJavaScript、 HTML5、 CSSを書き、共有するサービスです

サイトのトップにはこうあります。

jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。
書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。

基本的には、コードを書いて作品として公開するコードコミュニティーです。

けれど、ちょっとしたJavaScript, HTML5, CSSを書いて動作テストする環境としても優秀です。

jsdo.itに無料登録して、コーディング画面に行くと以下のような作りになっています。

jsdo.itのエディター画面

主に画面は、コードなどを書く「エディター部分」とテスト動作を確認する「動作確認部分」にわかれています。

この、「エディター部分」の「HTML」と「CSS」ではデフォルトの状態でEmmetが利用できます。

これが、ちょっとしたHTMLやCSSを書きたいときに重宝します。

Emmetを利用してみる

jsdo.itで試しにEmmetを利用してみます。

HTMLで利用

例えば、10個の順序なしリストを作るとします。

そのときは、エディターのHTMLタグを選択して、エディターに以下のように入力してタブキーをします。

ul>li*10

Emmetで短縮入力

タブキーを押すと、以下のように展開されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

EmmetでHTMLの展開

このように、少ないコードでHTMLを書くことができます。

CSSでの利用

CSSで、あるクラスにボーダーを設定するとします。

CSSを書くときは、CSSタブを選択し、以下のように入力し、タブキーを押します。

.hoge{
    bd+
}

EmmetでCSSの短縮入力

タブキーを押すと以下のように展開されます。

.hoge{
    border: 1px solid #000;
}

EmmetでCSSの展開

Emmetは、このように短縮コードを打ち込んで、タブキーを押して展開させることで、少ないコードでより効率よくコードを書くことができます。

今回紹介したものは、極々一部のものでEmmetでは、ほぼ全てのHTML要素とCSSプロパティで短縮コードが使えます。

詳しくは、以下のチートシート(コード表)に全て書いてあります。慣れないうちは、これを見ながら打っているうちに利用頻度が多いものは、自然と覚えます。

Cheat Sheet

Emmet Cheat Sheet

その他にも、JavaScriptをJSX、CofeeScript、TypeScriptで書いたり、CSSをSCSS、LESSで書いて動作確認することもできるのでコードを手軽に書く仕組みがそろっています。

jsdo.itのおすすめな設定

jsdo.itの設定でいくつか便利だったものを紹介します。

コードを非公開にする

jsdo.itは、基本コード共有サイトなので書いたコードはパブリックになりますが、コードを公開しないプライベートモードにも設定できます。無料の国産サービスで、コードの非公開が設定できるのはここくらいではないかと思います。

プライベートモードにするには、「Properties」ボタンを押します。

プロパティの設定

あとは設定画面の一番下の方にある「Visibility」の「Private」にチェックを入れるだけです。

コードを非公開に設定する

エディターのテーマを変更

あと、通常は以下のように白地に黒色で表示されるエディターのカラーテーマも「▲」ボタンから変更できます。

エディターのテーマを変更

「▲」ボタンを押すと、以下のように3つの中からテーマが選択できるので、好きなものを選択します。

  • Default
  • Ambiance
  • Blackboard

エディターテーマの選択

以下のように目に優しいテーマに変更することもできます。

エディターテーマを変更

jsdo.itへの登録方法

jsdo.itは、会員制なので無料登録しないと利用できません。

登録制なので、いろいろと面倒くさい個人情報とかを記入しなければいけないのかと思ったら、SNSアカウントを持っていれば、一切キーボードを打つことなく登録することができます。

登録の一連の作業を紹介しておきます。

jsdo.itトップに移動したら、まずは赤色の「Start Coding」ボタンを押します。

「Start Coding」ボタンを押す

あとは好きなサービスの認証からログインすればOKです。

jsdo.it - Share JavaScript, HTML5 and CSS

僕は、Twitterのアカウントでログインしました。

ログイン後は、ユーザー名登録画面が表示されますが、僕はTwitter IDをそのままユーザー名にしたのでテキスト入力をする必要は一切ありませんでした。

まとめ

jsdo.itは、こんな感じで手軽に始めることができます。

僕は使ってみて、以下のような時に便利でした。

  • WordPressのちょっとしたCSSカスタマイズコードを書いて管理画面から適用するとき
  • 掲示板やフォーラムなどにHTML・CSSの使い捨てコードを書き込むとき
  • 使い慣れたエディターがない環境でコードを書くとき

もちろん、いつも使い慣れているエディターとまではいきませんが、Windowsのメモ帳などに書くよりは、かなり手軽にコードを書くことができます。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク