でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2014.05.22 [木]

主に使うEmmet短縮記述構文

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

主に使うEmmet短縮記述構文

　※私が個人的に主に使う、という意味です。

table	table>(tr>td3)10	td×数、(tr>td)×数、算数ですね。テーブル作成時に活躍します。コピペで作るよりずっと簡単で早いです。楽です。
list	ul>li3>ol5	リスト作成時もテーブルと同様、やはり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月22日(木) | カテゴリ：Emmet | Comment : 0

2014.05.21 [水]

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

Tab	：	Emmet記述の展開
Ctrl+Shift+A	：	選択範囲をタグで囲む
Ctrl+\	：	コメント化
~~Ctrl+Shift+L~~	：	~~一行選択~~
Ctrl+Shift+T	：	タグのペアを確認

Ctrl+Shift+K	：	タグの削除（前後共）
Ctrl+Shift+M	：	改行とタブを消去して、一行化する
Ctrl+Alt+←or→	：	次の（前の）入力箇所へ移動

※追記：2018.01.08　残念なことに、このショートカットはいつの間にかなくなってしまっていたことに最近気付いた。

　一行選択にはBracketsのCtrl+Lというショートカットもある。
　が、これは「その行の最初から次の行の頭までを選択」してしまう。
　正直使いにくい。
　Emmetのショートカットなら「その行のテキストのみを選択」してくれるので使いやすい。
　ほんのちょっとの違いのように思えてこれが重要だったりする。
　そもそも手間を極力減らして入力速度を上げるというのがショートカットを使う理由だというのに、マウスに持ち替えて、とか、別のキー入力で移動や修整が必要なショートカットでは全くもって意味が無い。

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

Bracketsの環境設定

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

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

記事作成日：2014年05月21日(水) | カテゴリ：Emmet | Comment : 0

2014.05.17 [土]

Emmetいいねー

Emmet便利すぎるでしょ！

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

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

	Emmet
	Tools for web-developers

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

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