SSSSLIDE

このページは http://www.slideshare.net/sada_h/emmet-with-sublime-text2 の内容を掲載しています。

掲載を希望されないスライド著者の方は、削除申請よりご連絡下さい。

埋込み型プレイヤーを使用せず、常に元のサイトでご覧になりたい方は、自動遷移設定をご利用下さい。

Sadaaki HIRAI さんの他のスライド

もっと見る»

関連するスライド

このスライドの内容

  1. はじめてのEmmet
    with Sublime Text2
    2012/11/07
    第0回 Sublime Text2 勉強会 @C.A.Mobile
    ひらい さだあき
    12年11月10日土曜日
  2. Profile
    •ひらい さだあき ( @sada_h / techlog )
    •エンジニア
    •Ruby / JavaScript / HTML5 / Java などなど
    •HTML5とか勉強会 Staff
    •Eclipse => Vim => Sublime Text2
  3. Do you know
    Zen Coding ?
  4. http://code.google.com/p/zen-coding/
  5. http://www.atmarkit.co.jp/fwcr/design/tool/zencoding01/01.html
  6. https://chrome.google.com/webstore/detail/zen-coding-textarea-exten/iodhcpffklplnfaihoolhfbejbinhcgn
  7. Do you know
    Emmet ?
  8. What is Emmet ?
    • Zen Codingの進化版
    • New features of Emmet (compared with old Zen Coding)
    • Dynamic CSS abbreviations, automatic vendor prefixes and
    gradient generator.
    • “Lorem Ipsum” generator
    • Implicit tag names
    • New Yandex’s BEM filter
    • Extensions support
    • New ^ operator
    • Various fixes and improvements
    https://github.com/sergeche/emmet-sublime
  9. Emmet for Sublime Text 2 plugin
    •Sublime Text2 で、Emmet 使えます。
    •使ってみます。
  10. How to install ?
    • Use Package Control
    • Add Repository https://github.com/sergeche/emmet-
    sublime
    ctrl + shift + p => Package Control: Add Repository
    • Package Control: Install Package emmet-sublime
    • Restart ST2 editor (if required)New features of Emmet
    (compared with old Zen Coding)
    • だめなら手動でインストール。
    git clone https://github.com/sergeche/emmet-sublime.git
    https://github.com/sergeche/emmet-sublime
  11. html:5 [ctrl+e]
    HTMLの雛形
    を作る
    <!doctype html>
    <html lang="en">
    html:5と入力後、
    <head>
    ctrl+eで展開
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    </body>
    </html>
  12. .box>lorem [ctrl+e]
    <div class="box">
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Nisi
    dolor quos accusantium minus totam
    excepturi aliquam voluptas impedit
    odit praesentium nobis at optio sed
    magnam quia iste expedita ipsam
    itaque.
    </div>
  13. style [ctrl+e]
    <style></style>
  14. -bdrs10-10-10-10 [ctrl+e]
    CSSはstyleタグの中かCSS
    ファイルで展開する
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    ベンダープリフィクスは必要に応じて付与さ
    れるみたい。例えば-oとか-msとか。
  15. -box-shadow10-10-10-#aaa [ctrl+e]
    -webkit-box-shadow: 10px 10px 10px #aaa;
    -moz-box-shadow: 10px 10px 10px #aaa;
    box-shadow: 10px 10px 10px #aaa;
    色(#000)が、いまいちうまく展開されません。
    #aaaはいいけど、#000はうまくいかない。
    今後に期待…。
  16. -text-shadow5-5-5-#aaa [ctrl+e]
    -webkit-text-shadow: 5px 5px 5px #aaa;
    -moz-text-shadow: 5px 5px 5px #aaa;
    -ms-text-shadow: 5px 5px 5px #aaa;
    -o-text-shadow: 5px 5px 5px #aaa;
    text-shadow: 5px 5px 5px #aaa;
  17. m10+p10+bd+ [ctrl+e]
    margin: 10px;
    padding: 10px;
    border: 1px solid #000;
  18. <!doctype html>
    <html lang="en">
    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .box{


    -webkit-border-radius: 10px 10px 10px 10px;


    -moz-border-radius: 10px 10px 10px 10px;


    border-radius: 10px 10px 10px 10px;


    -webkit-box-shadow: 10px 10px 10px #aaa;


    -moz-box-shadow: 10px 10px 10px #aaa;


    box-shadow: 10px 10px 10px #aaa;


    -webkit-text-shadow: 5px 5px 5px #aaa;


    -moz-text-shadow: 5px 5px 5px #aaa;


    -ms-text-shadow: 5px 5px 5px #aaa;


    -o-text-shadow: 5px 5px 5px #aaa;


    text-shadow: 5px 5px 5px #aaa;


    border: 1px solid #000;


    margin: 10px;


    padding: 10px;

    }

    </style>
    </head>
    <body>

    <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolor quos
    accusantium minus totam excepturi aliquam voluptas impedit odit
    praesentium nobis at optio sed magnam quia iste expedita ipsam itaque.

    </div>
    </body>
    </html>
  20. config
    •tabでの展開は外したほうがいいかも。
    他の動作を上書きしてしまうので。
    "disable_tab_abbreviations": true
    •日本語の変換を確定すると入力文字が
    消える。
    "disable_formatted_linebreak": true
  21. Preferences => Settings - User
    {
    // tabでの展開の上書きしない for Emmet
    "disable_tab_abbreviations": true,
    // 改行でのフォーマットをしない
    // (日本語の確定のため) for Emmet
    "disable_formatted_linebreak": true
    }
  22. etc.
    •Zen Codingのプラグインはアンインストー
    ルか無効化しましょう。
    •プラグインじゃないけどvintage有効にして
    ます。Vimっぽいことできます。command
    modeとinsert modeとか。
    "vintage_ctrl_keys": true
    "vintage_start_in_command_mode": true
  23. Using Plugins
    •Emmet
    •https://github.com/sergeche/emmet-
    sublime
    •SublimeServer
    •https://github.com/learning/SublimeServer
    •HTTPサーバが上がる。
    Ajaxの確認などに便利。
  24. Enjoy Sublime Text2!
    Enjoy Emmet!

関連するタグ

SSSSLIDE

© 2012-2018 milk1000cc

スライドの著作権は、各スライド作成者に所属します。