でんきかいでんのブログ

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。こだわり系テンキーレス有線キーボードの使用感レビューなど。

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2014.05.22 [木]

主に使うEmmet短縮記述構文

EmmetAdorableLadyFont003.png

※ゴーレムを滅するのにEmeth(真理)の頭文字のEを消してmeth(死)にする、という話を思い出してしまう。
emet,emeth,emes.


主に使うEmmet短縮記述構文

 ※私が個人的に主に使う、という意味です。
table table>(tr>td*3)*10  td×数、(tr>td)×数、算数ですね。テーブル作成時に活躍します。コピペで作るよりずっと簡単で早いです。楽です。
list ul>li*3>ol*5  リスト作成時もテーブルと同様、やはりEmmet記法を使った方が楽です。特に入れ子状態になったようなリストだと楽さが違いますね。
class p.minititle
.wakudash
span.haikeiao
 . だけだと自動的にdivになります。それ以外を使いたい時は手入力。
. の後ろがクラス名になります。
html !  ページを作る時の大枠の構造ですね。これはHTML5ですが、これ以外にも各種あります。

※単語の日本語訳は自分独自解釈ですので、特にこれといった決まった日本語定型句があるわけではないので、自分で勝手にわかりやすい感じの日本語にしているので、間違っている言葉もあると思います。


             /)
           ///) こまけぇこたぁいいんだよ!!
          /,.=゙''"/
   /     i f ,.r='"-‐'つ____
  /      /   _,.-‐'~/⌒  ⌒\
    /   ,i   ,二ニ⊃( ●). (●)\
   /    ノ    il゙フ::::::⌒(__人__)⌒::::: \
      ,イ「ト、  ,!,!|     |r┬-|     |
     / iトヾヽ_/ィ"\      `ー'´     /


Bracketsはこれが出来ないのが不便

 ここまでBracketsでEmmetを使ってきて思ったことを書いておく。
 けどこれはUpdateされて解消される可能性大。
 (2014年5月22日現在)


●改行を含む文字列の検索と置換が出来ない。

 ・SublimeTextでは普通に出来てたので、これが出来ないのは不便。



●imgのwidthとheightの自動入力が出来ない。

 ・SublimeTextでは出来た。これはその内Brackets用のEmmetプラグインがアップデートされれば出来るようになるんじゃないかと思われ。



 ▼▼ 続きを読む ▼▼ 

2014.05.21 [水]

よく使うEmmetのショートカット(日本語化一覧)

よく使うEmmetのショートカット(日本語化一覧:Brackets Ver0.39上)

TabEmmet記述の展開
Ctrl+Shift+A選択範囲をタグで囲む
Ctrl+\コメント化
Ctrl+Shift+L一行選択
Ctrl+Shift+Tタグのペアを確認
Ctrl+Shift+Kタグの削除(前後共)
Ctrl+Shift+M改行とタブを消去して、一行化する
Ctrl+Alt+←or→次の(前の)入力箇所へ移動

 一行選択にはBracketsのCtrl+Lというショートカットもある。

 が、これは「その行の最初から次の行の頭までを選択」してしまう。

 正直使いにくい。

 Emmetのショートカットなら「その行のテキストのみを選択」してくれるので使いやすい。

 ほんのちょっとの違いのように思えてこれが重要だったりする。

 そもそも手間を極力減らして入力速度を上げるというのがショートカットを使う理由だというのに、マウスに持ち替えて、とか、別のキー入力で移動や修整が必要なショートカットでは全くもって意味が無い。


 Ctrl+Alt+→これは案外よく使う。画像のAltへ画像名をコピーして持って行く時などは必ず使う。


Bracketsの環境設定

 オートインデントを切りたい。
 だが、実際にBracketsの環境設定でfalseにしても変化無し。
 タブやスペースの幅をゼロにしてみると、オートインデントは変わらず実行するくせに、そのインデントを消去しようとすると逆にインデントが増えるという状態。(2014年5月21日現在)
 バージョンアップで修整されるとは思う。

 結局デフォルト設定に戻して後からまとめて消す方がややこしくなさそうなので、そうすることにした。

2014.05.20 [火]

Bracketsを使ってみることにしたのです

Bracketsを使ってみることにしたのです


 Emmetを使うための代表的なテキストエディタというと、やはりSublimeTextなんですかね?

 他にもEmmetが使えるエディタはいくつかあります。
 Emmet公式サイトに載っていたWindowsで使えて、日本語が使えそうなエディタはだいたい使ってみました。
 その中でもBracketsが自分には使いやすそうなので、しばらくはBracketsを使っていこうかな、と思いました。

 実はここしばらくはSublimeText3を使ってたんですが、あれこれいじらなくても使いやすい道具が好きな自分としては、Bracketsが良さそうな感じなのです。

 しばらく使ってみないともっと深い部分の長所も短所もわからないので、しばらく使ってみることにします。

 ▼▼ 続きを読む ▼▼ 

2014.05.17 [土]

Emmetいいねー

Emmet便利すぎるでしょ!

 以前はZen-Codingという名前だったそうです。
 最新版はEmmetという名前です。

 テキストエディター用の「短縮記述記法プラグイン」という理解でいいのかな?
 Emmetそのものはプラグインなので、Emmetが使えるテキストエディターを選び、さらにそこに自分でインストールしないと使えません。

EmmetLogo Emmet
Tools for web-developers

 Emmetが使えるWindows用エディターには今のところ、SublimeText3、Brackets、Notepad++、Mery、などがあり、StyleNote5でも使えます。
 (StyleNote5だけは最初からインストールされてます。ただし名前がZen-Cordingです。)
 その他にもあります。
 詳細は下記リンク、公式サイトを参照して下さい。



Emmetが使えるエディタ一覧(Emmet公式サイト)


 | HOME | 

TOPへ