- Posted by MorphineG
- 2010-06-30
- HTML/CSS(ウェブ言語)
Tagged with Javascript JQuery CSS
はろにちわん。久しぶりのポストです。
トレーディング禁止命令がまだ解除されてないので今日はちょっとしたWEBネタ。Kellyはというと、今更ながらCSS3とJQueryの魅力に取り憑かれてます。ハマりだすと止らない。最初のきっかけって、みんな同じと思うけど、例えば尖ったボックスじゃなくてまるっこい方がかわいいなーとか、暑苦しいボールドの文字にグラデーションあったらオッサレじゃない?でもどうやるんだ~?みたいなことから始まるわけ。CSSで思い出したけどさ、最近いろんなテクニックサイトで話題になっていたZEN Cording、Kellyも入れてみた。そしたら、わお~すげー。ツイッターのつぶやきより短いコード入力でWeb1ページのファンデーションが出来上がりっと!2年まえのわたしなら何がすごいんだよ?くらいに意味不明だったと思われるけど、これの良さが分ってきたってことは進化した証拠だおー。
今このブログで使っているvicuna CMSの開発者もブログで絶賛してた。プロにはたまらないツールが誕生したわけですね。
ただしこれを効率よく使う前提は、基本のエレメンツをDeployできるスキルが必要。スタイリングがすでに先走っていて脳内HTMLが出来上がっている人にとってはサイコーだな。ボクちゃんも頑張るぞっと。
説明するよりムービーみた方が早いお。
USTでZEN cordingしちゃったコモリさんのライブもステキ♫
<div#coding>h1#textmate-with-zen+p.tagline
を入力して「Cmd+E(Coda版とDWのMXP版はCtrl+,)」で展開すると下記のコードがどーんと入ります。
<div id="coding"> <h1 id="textmate-with-zen"></h1> <p class="tagline"></p> </div>
記事内にちょくペーストしたら勝手に生成されてた。 そらそーだ。 あははっ
ul#nav>li*3>a と 書いて展開してすると、
一瞬でこれ。
<ul id="nav"> <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a>
</li>
</ul>
で、これを書いていて一瞬呪いにハマった。この< > は今度どうやって表示させるんだっけ? アふぉ~ そのままかけばいいんじゃん。って思ったけど、カンタンにはいかないのが特殊文字のやっかいなところ。くぅめんどくさい
→ < > これを記事内に表示させる方法を説明しようとすると更にイラっとくるわけです。
<の頭に&と書く。
こんな感じでコードが 展開されます。TABキー(Shift+TAB)で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー 楽勝です(笑)
トレーディング禁止命令がまだ解除されてないので今日はちょっとしたWEBネタ。Kellyはというと、今更ながらCSS3とJQueryの魅力に取り憑かれてます。ハマりだすと止らない。最初のきっかけって、みんな同じと思うけど、例えば尖ったボックスじゃなくてまるっこい方がかわいいなーとか、暑苦しいボールドの文字にグラデーションあったらオッサレじゃない?でもどうやるんだ~?みたいなことから始まるわけ。CSSで思い出したけどさ、最近いろんなテクニックサイトで話題になっていたZEN Cording、Kellyも入れてみた。そしたら、わお~すげー。ツイッターのつぶやきより短いコード入力でWeb1ページのファンデーションが出来上がりっと!2年まえのわたしなら何がすごいんだよ?くらいに意味不明だったと思われるけど、これの良さが分ってきたってことは進化した証拠だおー。
今このブログで使っているvicuna CMSの開発者もブログで絶賛してた。プロにはたまらないツールが誕生したわけですね。
ただしこれを効率よく使う前提は、基本のエレメンツをDeployできるスキルが必要。スタイリングがすでに先走っていて脳内HTMLが出来上がっている人にとってはサイコーだな。ボクちゃんも頑張るぞっと。
説明するよりムービーみた方が早いお。
USTでZEN cordingしちゃったコモリさんのライブもステキ♫
<div#coding>h1#textmate-with-zen+p.tagline
を入力して「Cmd+E(Coda版とDWのMXP版はCtrl+,)」で展開すると下記のコードがどーんと入ります。
<div id="coding"> <h1 id="textmate-with-zen"></h1> <p class="tagline"></p> </div>
記事内にちょくペーストしたら勝手に生成されてた。 そらそーだ。 あははっ
この書式を見てすぐ気付く方もいると思いますが、まるでCSSのセレクタを書くかのように「#」でid属性、「.」でclass属性、「>」で階層、「+」で隣接している 要素を繋げられます。つまり、HTMLの文書構造が明確で頭の中で書くことが決まっている場合は、1行で書いて展開した方が圧倒的に速いってわけです。
※idは「Cmd+3」、classは「Cmd+2」のショートカットもある。
同じ事の繰り返しは「*」、数字を付けるなら「$」構造がわかっていればこのように簡単に展開できますが、HTML文書というのは同じ要素の繰り返しというのも結構な確率で登場します。たとえば、ナビゲー ションのli要素だったり定型のdivとhとpの繰り返しだったり。そんな時は「*繰り返す回数」を付け加えればOK。ul#nav>li*3>a と 書いて展開してすると、
一瞬でこれ。
<ul id="nav"> <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a>
</li>
</ul>
で、これを書いていて一瞬呪いにハマった。この< > は今度どうやって表示させるんだっけ? アふぉ~ そのままかけばいいんじゃん。って思ったけど、カンタンにはいかないのが特殊文字のやっかいなところ。くぅめんどくさい

→ < > これを記事内に表示させる方法を説明しようとすると更にイラっとくるわけです。
<の頭に&と書く。
こんな感じでコードが 展開されます。TABキー(Shift+TAB)で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー 楽勝です(笑)
Zen-Coding Ext. from komori, masaaki on Vimeo.
- 関連記事
-
- ランダム画像 (2009/07/07)
- ユーロドルで負けました!(CSS3おっぱいアニメ含) (2010/09/23)
- IE ブラウザでのJavascript エラーについてのお詫び (2010/03/18)
- もろ和風なついったーバッジ イケてるぅっ (2010/06/25)
- Mediabox の実装(今ほしいものBest 3 含) (2009/10/07)
- つぶやく時間でweb1ページが出来上がるZEN Cordingがステキっ (2010/06/30)
- TB 復活しました (2010/01/29)
- JQuery's Attraction (2009/07/27)
- インパクトのあるプラグインを実装 (2009/08/01)
- おサルでもできるPure CSS トリック自分用まとめ (2010/07/12)
- Newer: 雇用統計まとめ(ドルインデックスサポートわれ
- Older: もろ和風なついったーバッジ イケてるぅっ
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://denzy523.blog40.fc2.com/tb.php/406-2d9b418e
- Listed below are links to weblogs that reference
- つぶやく時間でweb1ページが出来上がるZEN Cordingがステキっ from Happy Life of Things