読者です 読者をやめる 読者になる 読者になる

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

おすすめエディタ!Sublime Text使い倒し:HTML/CSS編

プログラミング プログラミング-ツール Sublime Text

sponsor

Sublime textをHTML/CSSの最高の相棒にするためにやるべきことをまとめていきます。

とにかくパッケージを入れていきましょう。

f:id:hiroyoshi-deki:20151215213200j:plain

HTML系パッケージ

HTML5

html5用のオートコンプリート辞書です。html5と打ち込んでtab押すと一気にドカンと出てきてくれます。他にもhtml5から登場したheader要素などにも対応しています。

Emmet

htmlを一瞬でコーディング出来るようになります。

コマンド一覧はこちらをどうぞ!

Cheat Sheet

ex.) div#container>(header>(h1+ul#g_nav>li*5))+div#main>(div#left>section#article*4)+(div#right>(section#side_obj>(p+ul>li*3))*5)

以上のコードを打ち込んでtabを押すと

<div id="container">
  <header>
    <h1></h1>
    <ul id="g_nav">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </header>
  <div id="main">
    <div id="left">
      <section id="article"></section>
      <section id="article"></section>
      <section id="article"></section>
      <section id="article"></section>
    </div>
    <div id="right">
      <section id="side_obj">
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section id="side_obj">
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section id="side_obj">
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section id="side_obj">
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section id="side_obj">
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </div>
  </div>
</div>

こうなります。

覚えるべきは

  • > 続くタグの階層を下げる
  • ^ 続くタグの階層を上げる
  • + 同じ階層につなげる
  • # id
  • . class
  • () ひとまとめにする
  • *数字 数字の個数つなげる

階層をあげれば

ex.2) div#container>header>h1+ul#g_nav>li*5^^div#main>div#left>section#article*4^div#right>(section#side_obj>p+ul>li*3)*5

こんな感じにも書けます。ぼくは読みやすさで言えばカッコ、書きやすさで言えば階層上げタグですね。カッコはキーボードの左右キー押したくなるので、ちょっとストレス。

でEmmetはcssにも対応しています。

  • db -> display: block;
  • b1-s-#333 -> bottom: 1px solid  #333;
  • bb1 -> border-bottom: 1px;
  • h50% -> height: 50%;
  • m20-10-5-0 -> margin: 20px 10px 5px 0;

のような感じですね。思いついたことをとりあえず試してみると機能する素晴らしい完成度です。

HTML Snippets

github.com

こちらに、コマンド一覧があります。HTMLのsnippetsです。emmetよりもニッチに痒いところに手が届く感じ。どちらも入れるといいと思います。

HTMLbeautify

書き終えたHTMLに[ ⌘ + opt + shift + f ]をえいやっとやると、HTMLが綺麗になります。とても便利ですが、空のタグとかあると、うまくいかないこともあるようです。

HTML Boilerplate

再利用性の高いテンプレboilerplateを呼び出せます。実態はただのスニペットです。便利だし、とりあえず、使いましょう。html5 tabよりもこっちの方がいいですね。

CSS系パッケージ

hayaku

Emmetよりもcssの入力が短くなります。

使い方はほとんど変わらないので、とりあえずでいいので入れておきましょう。

css3

css3のオートコンプリートに対応します。

Goto-Css-Declaration

Macなら[ ⌘ + → ]、Windowsなら[ ctrl + alt + . ]でcssの相当行へ飛んでくれます。そのクラスの記述があるcssも同時に開いていれば機能します。行探しなど無駄に時間使うとコーディング速度が気づかないうちに落ちているので使った方がいいと思います。

Compass,Sass,SCSS,SASS Build,SASS Snippets, SassBeautify

利用するにはruby gemのcompassをインストールしてください。その上で、これらをインストールしてプロジェクトを整えれば[ ⌘ + b ]でビルドできます。

Color Highlighter

cssの#333などに色がついてそれがどんな色かリアルタイムにわかるようになります。

f:id:hiroyoshi-deki:20151215205833p:plain

こんな感じ。

CSS Format

コーディングがある程度進んだときにポンてやると、次にみたときに気持ちいい。あとは、完成後に圧縮するとか使い道はいろいろある。

© 2015 かんがえちゅう!