やるでジェーピー » CSS

CSS nite in Osaka Vol.20

warpdesign 相澤 — Thu, 01 Apr 2010 00:30:23 +0000

CSS nite in Osaka Vol.20が申込開始されましたよ。
今度のお題は「HTML5+CSS3」。う〜ん、これは聞きたい。
メンバーの皆さんもよろしければご参加ください！

『CSS nite in Osak』公式サイト
http://osaka.cssnite.jp/

お申し込みはこちら
http://osaka.cssnite.jp/vol20form/

CSS 3D Meninas

warpdesign 相澤 — Wed, 16 Dec 2009 07:14:30 +0000

あちこちのブログで話題になってるので、ご覧になった方も多いと思いますが、HTMLとCSSのみでの3D表現です。FlashやJavaScriptは一切使っていません。こいつは凄い。

CSS 3D Meninas

IE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。

ちなみにmootoolsやjQueryでも同様の表現はできるみたいですね。

ブラウザウィンドウ最下部に常時位置するフッター

warpdesign 相澤 — Mon, 14 Dec 2009 08:25:17 +0000

確か以前に横田さんから質問があったと思うのですが、メモってた「ブラウザウィンドウ最下部に常時位置するフッター」を実現するTIPSの資料が出てきましたので、掲載しておきます。ご参考まで。
（横田さんのご質問記事を探したのですが、わからなかったのでスミナセン。）

【参考URL】sticky-footer

※HTML


CSS Sticky Footer
A CSS sticky footer that just works


Copyright © 2006-2009

※CSS

* { margin: 0; }

html, body { height: 100%; }

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
height: 142px;
/* .push must be the same height as .footer */
}

ちょっと前のメモなので、大体こんな感じ..でお許しを。ご検証してください。

img { vertical-align: bottom; }の功罪

warpdesign 相澤 — Fri, 20 Nov 2009 09:09:01 +0000

既に当たり前のようにCSSでのレイアウトになって久しいのですが、当方のように雑多な仕事ばかりしていると、結構昔のテーブルレイアウトも引き継がないといけない場合があり、何かと不具合に出くわします。
今回もIE6対策であるCSSによるプロパティのリセットで、ちょっとした不具合に出くわしましたので、ご報告しときます。

昔からテキストに画像を回り込ませる手段として、をよく使っていたと思いますが、IE6対策である、

img { vertical-align: bottom; }

を指定していると、そのIE6（IE7も）で回り込みが解除されてしまいました。これって当たり前なのかも知れませんが、私にはよく理解できてません。とってもCSSなあの方や、この方に教えていただきたいです。なぜなんでしょう？

既にてのは、あまり使いませので、のようにfloatを使えば何の問題もありません。一からサイト設計する時にはあまり問題はないのでしょうが、今回の私のようにうっかり昔のページソースを混在させた場合に出てきそうな不具合です。
FireFoxなどのモダンブラウザでは見られない問題がないので、今回はうっかり見逃してしまいました。反省です。

こんな感じです。IEでご覧下さいまし〜。
http://www.warp-design.net/sample0911120/