なんか面白いのでつくってみたよ。

こちら

参考

http://blog.alice-books.com/tmp/zero.html

http://fichtre.net/yop.html（ちょいエロ注意）

ジェネレータあったら良いのに。

流行に乗ってみたよ！→Demo
無駄に背景2つ使ってみたりしてます＾＾
ゆくゆくはスターターキットにしたいと思ってるので細かいpaddingなどは指定していません。

（4/22）
FlashDevelop3.1.0_RTMが出たと教えてもらったので、EmEditorからそっちに移行。
しかしCSSのZenCodingには対応していなかったorz
色設定とかフォントとか環境を見やすいように適当にいじった後、コーディング開始。
パンくず・pagetopを追加。
リンク内容によってリンクアイコンが変更するようにCSSを記述。
a[href$='.pdf']{
padding:2px 18px 1px 0;
background:url(../img/pdf.png) no-repeat center right;
}
a[href^="mailto:"]{
padding:1px 18px 1px 0;
background:url(../img/email.png) no-repeat center right;
}

続きを読む »

どうも久々登場なpearmasterです

今日は11月11日、ワン×4ってことで犬の日です（本当？）
それに因んで（かどうかは不明）、サイトでドックを再現してみました

↓これ
http://yogaframe.com/pearmaster/dock-menu/dock.html

制御は至極カンタン、
ヘッダ部分に記述してあるJavaScriptのうち、
maxWidth: 50,　←このへん
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 40,　←このへん
proximity: 80,　←このへん
halign : ‘center’

なんかをいじればよい感じです
どういじるとどう変わるのかは、実際に試して下さいー

まーこれをどこに使うかって言われると言葉につまるんですが。。。
http://www.dcity-ehime.com/
このサイトには使われているので、使用用途がまったく無い訳ではなさそうです

選択肢の一つにﾄﾞｿﾞｰ

またまたまたまたtsutomukunでございます。
今回もよろしくお願いいたします。

前回に引き続き今回もhtmlネタなのですが、display:inline-blockというものを
探っていきたいと思います。
コーディングしているときに、よくdisplay：blocckを使うことがあると思いますが、
それはinline要素をblock要素にするもので、今回のdisplay:inline-blockも同じ感じで
inline要素やblock要素をinline-block要素にするというものです。
それでは、inline-block要素とはなんぞやという話になりますが、
「inline要素でもあり、block要素でもある」ということなのです。
はい。意味分かりませんよね・・・

ということでサンプルを作ってみました。
（先に言っておきますが、このdisplay:inline-blockはIEでは対応しておりません。
ですのでIEで見られている方はFirefoxでご覧いただけたらと思います。）

さてさて、サンプルをご覧いただけたらお分かりの通り、なんかfloatがかかったような
レイアウトになっていますよね。でも、よく見てください。floatがかかったように見えていますが、
中央寄せになっていますよね。文字サイズを大きくしていってもらえれば、
段落ちして分かりやすいと思います。
この世にfloat：centerなるものがあれば可能ですが、現時点では無理ですものね。

ソースを見てもらえれば分かると思いますが、もちろんfloatを使っておりません。
これがinline-block要素なのです。
「inline要素のように間割り込みが効くblock要素」というわけです。
中央寄せに回り込ませれることができるのでIEが対応してくれたら
何か面白そうなことができないかなーと思いました。