coda必須ショートカットメモ

codaでとてもよく使うショートカットをメモします。

■command+/　・・・コメントアウト（文字選択した上で）
■command+[,command+]・・・　複数行の左右インデント（詰め，空き）
■command+{,command+}（要するに、上のショートカットにシフトを加えたもの）・・・　タブの左右（複数ファイル間）移動
■command+1,2,3,4,5・・・sitesやeditやpreviewやcssなどの画面切り替え

■command+fでfind（検索）　そして、command+gで次の検索対象へジャンプ（これ、とても便利）

ショートカットはどんなソフトを使うにしても、必須なものですね。

後は、zen codingのプラグインTEA For Codaを入れて、
F1の多用が吉。
http://learnaboutcss.blogspot.com/2011/02/zen-coding.html

zen coding、最高です。

codaで実体参照に変換。

これまで、タグなどをブログに掲載する際、実体参照に変換するのが面倒でした。

codaには、text->encode entitiesですぐ変換できる機能がありました。
が、日本語もasciiコード（？）に変換されてしまうので、若干コードレベルでは微妙ですが。

zen coding使用開始。これは大変気持ちがいい。

HTMLコードをCSSのセレクタなどを使ってシンプルに書ける
zen codingを使用開始しました。

自分は、Macのcoda上にて。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

（注：音出ます）

でダウンロードはこことか。
http://code.google.com/p/zen-coding/downloads/list


確かに、早いし，気持ちいいですね。
HTMLのコーディングって、単調な繰り返しが多いので、
それをすっきりと最小の情報で書ける、というのは清々しさがあります。

zen coding、HTML+CSSが書けるなら、けっこうすぐ覚えられそうです。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

例）
html:xtと書いて、codaであればF1を押すと、一気にお決まりのdoctype宣言やbody,head等が生成されます。

div#head.entryなら
<div class="entry" id="head">
</div>
が

ul>li.item-$*3>aなら
<ul>
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
</ul>
が一瞬で！
これはありがたくて、びっくりです。。。

気持ちいい。。。。

さらに勉強になったのは，こちら。
http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html


ここに書いてあった方法で、
「みかん
りんご
なし」
のような単語群を、一気にli*>aでli aでラップできるというので、codaでやってみたら、
見事出来ました。

<div>
<li><a href="">なし</a></li>
<li><a href="">みかん</a></li>
<li><a href="">りんご</a></li>
</div>

うーん、いい。
（codaプラグインでのショートカットは「shift+control+a」）

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

また、以下は、zen codingに関するこもりまさあきさんのプレゼン。

Zen-Codingはみんなのもの

View more presentations from gaspanik.

本も出されていますね。
HTML+CSSコーディングが10倍速くなるZen Coding

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

あと、
あまりzen-codingの話題じゃありませんが、
coda版zen-codingプラグインを作っていた方が、espressoに移行しており、coda版は他の人がfolkしているのを知り若干びっくりしました。
http://onecrayon.com/tea/coda/
で、espressoってどうなんだろう？と、体験版を使ってみましたが、
codaとまた違うフィーリングで使える、いいコーディングアプリだな、とふむふむ。

ま、でも、coda使います。せっかく買ったし，気に入ってるし。

属性セレクタ、便利

CMSでページの自動リンク($lt;a>)を生成する際、idを割り当てられず困ることがあった。

ので、「属性セレクタ」を使うことに。

#nav a[href="/link"]{display:block}
といったように、個別のリンクを設定できる。

ありがたい。

え？IE6対応はって？
どうしましょうねえ。。
まあ、IE6は過去の遺物、ということで。。

id名に#をつけておった。。。。。

jQueryでid名にて色々制御しようとしているのに、
まるで反応が無くて悩みました。

色々色々調べていて。。。。

id="#test"
みたいにid名を書いていたことを発見。。。orz

idの名前に#をふっておったよ、わし。

解決して嬉しいやら，情けないやら。

タグの自動除去を正規表現で emeditorにて

emeditorで正規表現をつかい始めた。

素晴らしい解説があったので、とりあえずメモ
http://designblog.ecstudio.jp/tool/emeditor-02.html

正規表現は，本当に使える。
これまで使っていたeditorではperl互換ではなかったので、イマイチ使いにくかった。

emeditorはperl互換なので、ソリッドに使える感じ。

まだ正規表現の初学者だが、これからどんどん使っていきたい。

*****************************

ちなみに今回は、
<span style="font-size: x-small;">いろいろなんだかんだ</span>
といった部分の前後のspanタグを取り払って中身だけ取り出したい、という用途。

<span style="font-size: x-small;">(.+?)</span>
を正規表現で拾って、
$1
で中身だけ取り出せた。

$0かな、と思ったけど、$1らしい。

.+?はgreedyでないマッチングの方法で、前からありがたく使わせてもらっている。
これがないと、<span>の閉じタグがいくつかあれば最後尾の閉じタグにしかマッチしないので。。

正規表現、すばらし。

IE6とz-indexの関係

IE6でz-indexは鬼門であると再認識。

z-indexを指定しても、HTMLの要素の並び順が優先される様子。
ブロック間のz-indexには適用されないとか。。


以下が参考になりました。
http://shirabemono.cocolog-nifty.com/blog/2008/02/iefirefoxzindex_f4bc.html

更に調べると、
position:relative;を指定した複数のブロック間では、
後にrelative指定したブロックの方が上に表示される、ということのようです。

参考になったのは以下。
http://miyazakiweb.seesaa.net/article/117561935.html

そんなわけで、relative指定した二つのブロックにz-indexをそれぞれ設定し、
順番を変更してやったら，無事OKになりました。

よかった！

色々情報を上げて下さった方々に感謝。

text-indent:-9999px;ちょっと怖いな。

とある仕事で作ったページのリンク画像表示にtext-indent:-9999px;の手法を使い、
ふとそのページをiPhoneでブラウズしたら、
背景画像が見えていなかった。
ショック！

googleのCSSスプライトはどうしてるんだっけ？と思ったら、以下のページに詳しくコツが書いてありました。
多謝。

http://otaxa.com/css/text-hiding-without-text-indent-9999px/

対処せねば～

■追記：
CSSスプライトで、画像を使ったhoverに直しましたが、
IIEだけ画像置換してくれません。。。

悩んだから、zoom:1;でOKになるという記述を見て、
やってみたらOKに。。
http://likearpeggio.blog63.fc2.com/blog-entry-223.html

 http://www.ryu-raku.co.jp/blog/archives/989

やっぱIE対策はzoom:1;(hasLayout対策)ですか。。。

z-indexとclassとidの関係

z-indexを高く設定したのに,下に表示さえる、という現象に悩みました。

考えてみたら、classにz-index:1000;
idにz-index:500;
などとしていたのでした。

z-indexより、class,idの優先度（詳細度）の方が優先でしたね。

当たり前か。

まあ、解決して良かったです。

IE6でmin-height

IE6でもmin-heightを再現したいと思って検索していたら方法が書かれていたのでメモです。

height:auto !important;を宣言する、と。
で、height:100px;と、min-heightで宣言した高さを更に宣言するようですね。

.foo {

min-height:100px;

height: auto !important;

height: 100px;

}

大丈夫かな？と思って怖々でしたが、一応100pxを超える場合もOKのようです。

よかった。

以下、参考になったページ。

http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html

floatで左右に振って、スライドバーが出現。

左右にカラムを並べるごく一般的なレイアウトで、以前作ったサイトのページ下部にスライドバーが表示されている事に気がついた。

色々調べて、左右それぞれをfloatで左右に振っているのが良くないと判明。
左はfloatで寄せて、右はmargin-leftで右に寄せていく、という方がベターですね。

floatの多用は気をつけないと、表示崩れを起こしやすい、と改めて認識。

IE6でフォームをfloatしたら、崩れた。。

IE６以外は大丈夫でしたが、
header領域をdivでくくり、その中でformをfloat:rightなどとして右寄せしてみたら、
divのheightを大きく崩して、間延びしたレイアウトになってしまいました。

理由が分からなかったのですが、
formをfloatしても、IE6の場合は括られている領域のheightを押し広げてしまうのが原因と判明。

position:absolute;にして対応して、無事レイアウト崩れが収まりました。

z-indexとpositionの大事な関係。

サイト制作をしていて、headerの背景が、main contents部分の上に重なり、main contentsの文字が欠けてしまって困りました。

z-index関係とは分かりつつ、試行錯誤の末やっと解決したのでメモです。

position:relative;等の指定（static以外のpositionプロパティ）をすると、z-indexは高くなり、指定していない要素の上に重なってしまうということで、
main contents部分のpositionをrelativeにしてもIE6はダメで、結局main contents内にmainとsidebarという領域をfloat等で作っていたので、それらにもposition:relative;を指定してやると無事重なり順を変更できました。

z-indexとpositionはワンセットで指定するものですね。
positionを使って大きめの背景を使い、次の要素をネガティブmarginなどで上にずらしてみたりすると、この問題に遭遇しやすいかもです。

IE6でp要素に幅を指定すると、floatしたimgの横がカラム落ち

IE6でimgをfloatさせてるのにpの横がカラム落ちするからおかしいなあ、と思っていたら、
p要素に幅を指定しているのが原因だった。

IE TESTERで調べていて、pに幅指定をしていたのを思い出し、pに幅指定されていると、floatしてもfloatしたimgのwidth+pのwidthが親要素のwidthより大きいと落ちる様子。

モダンブラウザは大丈夫だから、侮った。

pにwidthなんて指定しちゃいけませんね。やっぱ。

IE6とposition:absoluteと幅高さ指定。

IE6でposition:absolute;を使う場合、
どうもposition:relative;を指定する要素がしっかりwidthやheightが指定されていないと、position指定したとおりになってくれない様子。

モダンブラウザはOKだが、IE6でずれるので、いろいろやってみて縦横を指定したらOKになったので、メモ。

どちらかだけでもいいのかもしれない。要するにhasLayoutというあれが原因かな。。

backgroundの一括指定メモ。

background指定の際、

background-image:url(example.jpg) no-repeat;
ではエラーで、
background:url(example.jpg) no-repeat;
はOK。

なぜなら、background:という指定方法は、「ショートハンド」として複数の属性値を指定可能。

background:url(example.jpg) no-repeat 5px 0;
などとしたら、leftから5px,topは変わらず、となる。
数値指定は、left topの順番。

background,短くて便利。

IE6でh1要素を見えなくしようとして躓いたメモ。

IE6でh1要素を見えなくしようとして、躓いたメモです。

text-indent:-9999px;
を使い、
font-size:0px;height:0px;visibility:hidden;
等も指定したのですが、
他のモダンブラウザは消えてくれても、IE6だけは高さそのままで消えてくれませんでした。
（メインビジュアル上にサイト名も書き込んでいるので、そのような設定を必要としていました。メインビジュアルをh1要素の背景にすれば話は早いのですが、CMS上での特殊な適用で、ちょっと工夫が必要であったので。）

結局、position:absolute;を指定して、他のボックスから切り離して対処しました。

自分の対処が最善か、まだ調査が必要そうです。

隣接セレクタと子セレクタを認識。。

子要素にだけスタイルを適用するには、親要素を正しく設定してやる必要あり。

内のh2要素の後にくるulに左マージンを作ってやろうとしたら、関係ないグローバルナビのulにまでマージンが発生してレイアウト崩れて、少々悩みました。
h2 > ul{    margin-left:50px;
}
みたいに設定したら無理で、
div#main > ul {
    margin-left:50px;
}
はOKでした。

子セレクタへのCSS適用は、ちゃんと親要素を設定してやらないといけませんね。

h2とulは隣同士の関係だったので、「隣接セレクタ」という「+」で設定するようですね。
「子セレクタ」と「隣接セレクタ」を混同していました（爆）

input type='text' とtextareaの違いメモ

input typeでtextにした際は、textboxの長さはsizeで指定。

一方、textareaの場合は、rows,colsで指定。

メモでした。

backgroundの省略形と、CSSでの一枚画像でのロールオーバー

backgroundというプロパティなら、backrgound:url(button.png) no-repeat 0px 0px;
などという風に複数の値を記述可能。

background-imageならイメージのURLだけ。当然ですが。。

それで、CSSのみでロールオーバーさせる場合、
上下にロールオーバー前と後の両方の画像を作って、
a要素をdisplay:blockにし、
backrgound:url(button.png) no-repeat 0px -30px;
みたいに上などに適宜ずらしてやればOK。

参考になったページ：http://www.acky.info/tips/css/00014.html