マークアップの作业効率をあげよう！
Download as pptx, pdf1 like1,440 views
2015年8月27日 第12回HTML5ビギナーズ登壇資料 マークアップの作业効率をあげよう！ 登壇者 河島美津雄
マークアップの作业効率をあげよう！
- 5. マークアップ速度を上げる
- 8. DEMO
- 10. 展開について エディタ、IDEによって展開方法が違う。 「tab」とか「com(Ctrl)+E」 先ほどのデモは「tab」で展開していて、 たった3タイピング(shift + 1 + tab)で htmlのベースを記述することが出来ます。
- 12. 速いですよね
- 13. そう、书くだけは…ね…
- 15. DEMO
- 17. ∩ ＾ω＾） カタカタ /_?つ /￣￣￣/＿＿ ＼/＿＿＿/
- 18. ( ?д?) ページ数多くてヨクワカラン… / ヾ ＿_L| /￣￣￣/＿＿ ＼/＿＿＿/
- 26. 颁厂厂设计を考えよう
- 29. 颁厂厂メタ言语の活用
- 30. いろいろあります Sass, Less, Stylus, TASS, PCSSなど。変数が扱 えたり、ネスト（入れ子）で記述できたりなどさ まざまな便利な機能があります。 今回注目したいのは、ファイルを結合できるとい うこと。 これにより、目的のものが探しやすく、また追加 ?削除しやすい。 ※ディレクトリの構成が明確という前提です。
- 31. DEMO
- 34. ご静聴ありがとうございました
Editor's Notes
- #7: 自動補完の説明をデモでやる <address> 個人的には自動補完が好きではない 入力候補がもっさり出てきたり、出てくるタイミングが自分のコーディングのリズムに会っていない、また選択するというひと手間が発生するから
- #9: ! + tab
- #10: さっきの入力补完とは违うことがわかったと思います。
- #11: ! + tab
- #12: たとえばこのようなページ（あらかじめ完成しているページ）を作りたい。 これをEmmetを使って書いていきましょう。 マークアップするときは、すでにプレーンテキストが完成していることがほとんどだと思うので、その想定でやっていきます。 ラップして展開 shift+command+j nav>ul.navList>li.navList__item.navList__item_$*>a link:css bdt+ lis:n ul, li { margin: 0; padding: 0; } li { list-style: none; } nav { border-top: 1px solid #000; border-bottom: 1px solid #000; } .navList { text-align: center; } .navList a { text-decoration: none; } .navList__item { border-right: 1px solid #000; display: inline-block; width: 200px; } .navList__item:first-child { border-left: 1px solid #000; } main { margin: auto; width: 960px; } .bg1 { background-color: #000000; } .p-lt { background-color: #000000; } .u-white { color: #ffffff; } .u-p10 { padding: 10px; }
- #16: 例えばLTの募集が埋まったので、募集についての記載を消したいとします。 htmlから不要なものを削除する。 それだけでOK? CSSは？ でみてみると.c-p10というクラス名をつけています。 これ、他の箇所でも使っていそうな名前だな…消したらまずそうだな…とりあえず置いとこ これ心当たりある人いません？ 本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。 こうしてCSSファイルはどんどん大きくなっていきます。
- #20: これ心当たりある人いません？ 本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。
- #21: これ心当たりある人いません？ 本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。
- #23: ! + tab
- #24: ! + tab
- #26: デスクトップファーストの時代は終わりました。 モバイルファーストです。 フロント側で出来ることありますよね？
- #29: 颁厂厂设计をこれから本格的に取り组む人は、最初はちょっととっつきにくさを感じるかもしれません… https://github.com/hiloki/flocss
- #32: ! + tab
- #33: ! + tab
- #34: ! + tab
- #35: 颁厂厂设计をこれから本格的に取り组む人は、最初はちょっととっつきにくさを感じるかもしれません…