コロッケさんのショウを見に行ってきました☆
Web作成に関係ない話ですが・・・
昨日、（モノマネの）コロッケさんのショウを見に行ってきました～
コロッケさんの顔芸、すごかったです
トークも面白くて終始笑いっぱなしでした
昨日はお客さんの年齢層が高めということで、かなり古い曲が
多かったのですが、アラサーの私でもすごく楽しめました
名古屋の中日劇場で1月いっぱいまで公演されているそうなので、
お近くの方はチェックしてみて下さいね～
Aptana Studio 2.0 新規ファイル作成時のフォーマットを変更する方法
Aptana Studio 2.0 で、ファイルを新規作成した時に自動挿入されるコードを
変更する方法を綴らせていただきたいと思います。
1. Aptana Studioを起動する。
2. メニューの[ウィンドウ]→[設定]をクリックする。
3. 設定ダイアログの[Aptana]の左の三角をクリックする。
4. [エディター]の左の三角をクリックする。
5. [CSS]をクリックする。
6. [初期 CSS ファイル・コンテンツ]のテキストエリア内に、新規ファイル作成時に
記述しておきたいコードを記述する。
7. [適用]ボタンをクリックする。
8. [OK]ボタンをクリックする。
[5]の手順で、[html]や[JavaScript]などを選択すると、これらのファイルのフォーマットも
変更できますよ～
ちなみ私の場合、cssのフォーマットには下記を設定していま～す。
----------------------------
@charset "utf-8";
body{
margin: 0;
padding: 0;
}
h1 {
}
h2 {
}
a {
}
img {
border:0;
}
----------------------------
（忘れっぽいので･･･
）
zen-coding にチャレンジ！
↓うちのネコです。（名前：チビ（でも巨大））
最近この倉庫がネコに大人気で、日替わりで色んなネコが昼寝しています
今日はうちのチビが昼寝していました。
さてさて、Webに関するお話を少し･･･
先日、 Apnata Studio 2.0 にzen-codingを導入してみました。
（zen-codingというのは、ｈｔｍｌの入力支援をしてくれるhtmlエディタ用のプラグインで、
簡易コードを入力してショートカットキーを押下すると、html に自動展開してくれるという
便利ツールです。）
プラグインのダウンロード：zen-codingのダウンロード
設定方法：Aptana StudioへのZen-Codingの導入
簡易コードやショートカットキーを覚えるのがメンドくさ･･･大変そうなので、
導入をためらっていたのですが、最近、phpやjavascriptのコーディングが多くなってきて、
htmlのコーディングをもっと効率よくやりたいな～と思ったので導入してみました。
使ってみた感想は･･･
意外と使いやすい
気になっていた簡易コードでのコーディングも思ったほど難しくなく、割と直感的に
入力できる感じです。
そして、簡易コードが html に変換される様にはとても爽快感があります
例えば･･･
下記の簡易コードを↓入力し･･･
div#box$$*3>ul.list>li.line*5
実行キー（デフォルトでは[Ctrl+E]キー）を押下すると･･･
<div id="box01">
<ul class="list">
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
</ul>
</div>
<div id="box02">
<ul class="list">
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
</ul>
</div>
<div id="box03">
<ul class="list">
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
<li class="line"></li>
</ul>
</div>
こんな感じでhtmlに自動展開してくれま～す
まだ簡単なコードしか使えないので、これくらいしかご紹介できなくて
申し訳ないのですが･･･
ぜひぜひご教示下さいませ）
ちなみに、私の場合はAptana Studioでzen-codingを使っていますが、
Dreamweaver（CS4のみ？）など、他のhtmlエディタ用のプラグインもあるようですよ～
htmlのコーディングがメンドくさ･･･大変だなと思ってらっしゃる方、
1度試されてみてはいかがでしょう
ご参考までに･･･
上記の簡易コード「div#box$$*3>ul.list>li.line*5」の仕組みは
↓こんな感じになっていま～す。（上手く説明できませんが･･･）
[div#box$$*3]の部分：<div id="boxXX">（XXは01から始まる連番）というhtmlタグを
3個生成する。
[>ul.list]の部分：<div id="boxXX">の配下に<ul class="list">というhtmlタグを
1個生成する。
[>li.line*5]の部分：<div id="boxXX"><ul class="list">の配下に<li class="line">という
htmlタグを5個生成する。
1. コードの先頭に生成したいhtmlタグの種類（div、ul、li、tableなどなど）を記述。
（ピンクの部分）
2. （任意）
「1」で記述したhtmlタグに対してidやclassを付与する場合には、「1」に続けて
以下のコードを追記。（水色の部分）
・idを付与する場合：#（id名）
・classを付与する場合：.（ドット）（クラス名）
idやclass名に連番を付加したい場合は、「$」を追記。（赤色の部分）
（$ 1個が1桁。連番の数値が$の個数を上回った場合にはそのままの要素数が振られる。
（例えば$が1個で要素数が11個の場合、id名 or class名には「11」が付与される。））
3. （任意）
「1、2」で記述したタグ要素の配下に子タグ要素を配置する場合には、
「1、2」に続けて「>」と追記。（紫の部分）
※「2」がない場合は「1」に続けて記述します。
4. （任意）
「1」で記述したhtmlタグを複数生成したい場合には、「1、2、3」に続けて
「*（生成したい個数）」と追記。
※「2、3」がない場合は「1」に続けて記述します。
※長くなってすみません。間違いなどがありましたらご指摘下さいね
これ以外にももっといろいろな使い方がありますので、追々覚えていきたいと
思います