マークアップの作業効率をあげよう！

第12回 HTML5ビギナーズ
目指せ脱初心者！
現場で使われている実践スキルとは？
ハッシュタグ #html5jbg

html5jスタッフ
html5j ビギナー部部長
河島美津雄

活動理念
日本のWebのベースづくりに貢献する

マークアップの作業効率をあげよう!

マークアップ速度を上げる

Emmet
すでにエディタやIDEに用意されいてそのまま使え
たり、エディタにプラグインとしてインストール
して使える。
※自動補完ではない
省略記法を用いることでタイピングを少なくし、
マークアップを楽に、そして速くすることが
できるツール。

省略記法 → 展開
基本的な使い方

省略記法について
http://docs.emmet.io/cheat-sheet/
チートシートを参考に

展開について
エディタ、IDEによって展開方法が違う。
「tab」とか「com(Ctrl)+E」
先ほどのデモは「tab」で展開していて、
たった3タイピング(shift + 1 + tab)で
htmlのベースを記述することが出来ます。

さっきのはちょっと
唐突だったかもしれないので
もう一度DEMO

そう、書くだけは…ね…

でも、ただ書けば
イイってもんじゃないですよね
いろいろと考えないといけないことが
ありますよね

これ、他の箇所でも使ってそうな名前だな…
ちょっと調べてみようかな

∩ ＾ω＾）カタカタ
/_ﾐつ /￣￣￣/＿＿
＼/＿＿＿/

( ﾟдﾟ) ページ数多くてヨクワカラン…
/ ヾ
＿_L| /￣￣￣/＿＿
＼/＿＿＿/

消したらやばいかもしれないし
とりあえず置いとこ…

逆に、リユースできるスタイルがわからないので
同じスタイルを書いてしまったり…

こうしてCSSファイルは
どんどん大きくなっていきます

このような現象がどのような弊害をもたらすか

このような現象がどのような弊害をもたらすか
・運用コストの増加
・パフォーマンスの低下

メンテナンス性の悪さ → 運用コストの増加

パフォーマンスの悪化 → 1つの機能価値を失っている
※パフォーマンスは機能です！

flocss
FLOCSS（フロックス）は、OOCSSやSMACSS
、BEM、SuitCSSのコンセプトを取り入れた、モ
ジュラーなアプローチのためのCSS構成案です。
MCSSのレイヤー構成にも大きな影響を受けてい
ます。
※https://github.com/hiloki/flocssより 2015/8/27

・どれがリユースできるのか
・スタイルの影響範囲がどこまでか
・どれが捨ててもよいスタイルか
がわかりやすい

いろいろあります
Sass, Less, Stylus, TASS, PCSSなど。変数が扱
えたり、ネスト（入れ子）で記述できたりなどさ
まざまな便利な機能があります。
今回注目したいのは、ファイルを結合できるとい
うこと。
これにより、目的のものが探しやすく、また追加
・削除しやすい。
※ディレクトリの構成が明確という前提です。

あれ？
@importって普通に
CSSで使えんじゃね？

CSSファイルで@importを使うと
パフォーマンスが悪化します。
運用と機能の両面を考えて
マークアップしていきましょう。

ご静聴ありがとうございました

マークアップの作業効率をあげよう！

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie マークアップの作業効率をあげよう！

Ähnlich wie マークアップの作業効率をあげよう！ (20)

マークアップの作業効率をあげよう！

Hinweis der Redaktion