脱初心者!
コピペに頼らない CSS入門

2017/04/16 サイボウズ 大阪梅田オフィス
第一回「CSS再入門」 | CSS フレンズ

  • シマキョウスケ( @shima_x_o
  • デザイン制作会社勤務
  • HTML と CSS だけを書いて生活しています。

突然ですが CSS のプロパティって
いくつあるか知ってますか?

自分も知らなかったので、
昨日ググりました。

でもはっきりとした数がわかりませんでした。。

心やさしいフレンズが Twitter とかで教えてくれるかな!?

期待しましょう。

ただわかったことはプロパティが
ほんとにたくさんあって、覚えきれる気がしない。

誰かのブログとかからコピペする?

こういうのよくありますね

コピペで使える見だしスタイル

            
              .headline {
                border-left: 5px solid #0b3a7f;
                text-align: left;
                padding-left: 20px;
              }
            
          

誰かのブログとかからコピペする?

今日はやめよう

コピペに頼ってたら、
いつまでたってもプロパティについて覚えれないし
制作スピードがあがりませんね。

でも実際にプロパティをタイピングするのは大変。

間違える可能性もあるし。

そこで今回はプロパティ名の入力を補助し、
タイピング数を減らすことができるツールを紹介します。

Emmet(エメット)

https://emmet.io/

Emmet とは

独自の省略文字で、CSS を書くことが可能になります。

けっこう古くからありますが
ブログの記事とか最近みない気がする。

元々は Zen-Coding という名前でしたが、2012年9月ごろから「Emmet」という名前で開発が進められ、正式リリースされた現在も機能の拡張が行われているツールです。

HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由 | Adobe Creative Station より

「独自の省略文字で入力」とはこんな感じです。

例えばこんな感じ

background は bg と打つだけ

          
            bg
          
        

タブキーもしくは control + e

          
            background: #000;
          
        

例えばこんな感じ

background-color は bgc と打つだけ

          
            bgc
          
        

タブキーもしくは control + e

          
            background-color: #000;
          
        

例えばこんな感じ

ショートハンドも一気にでます

          
            bg+
          
        

タブキーもしくは control + e

          
            background: #fff url() 0 0 no-repeat;
          
        

例えばこんな感じ

margin 上下 10px 左右 20px

          
            m10-20
          
        

タブキーもしくは control + e

          
            margin: 10px 20px;
          
        

その他もろもろ

頭文字 出力されるプロパティ
m margin
p padding
po position
w width
h height

「Emmet CSS チートシート」とかでググるとイイと思います。

プロパティの頭文字を入力したら
大体のプロパティが出力されます。

Emmet を使うには使用されてるエディターに
プラグインなどをいれると使えます。

HTML でも使えるので
ぜひ使ってみてくださいね!

おわり