CSS Archive

第２回コーディングコンテストが開催されるということで、前回の2007年の時は、参加できなかったので、今回は参加！ということで、コーディングしてみた。

『HTML5+CSS3の技術を先取りして実装してみること』というルール…とりあえず、HTML5に新しく追加された要素、用途を変更された要素について色々調べながら、空いてる時間にコーディング。。

まだ、募集期間中なので、公開はできませんがいろいろ大変でした。「これってcss3でいけるんじゃ…」とか。
というか、お題のデザインからcss3でコーディングしろよー的な香りがぷんぷんしてましたから。。

募集期間が終わったら公開するかもです。
締め切りが日本時間の2010年3月22日（月）23:59なので、まだ十分間に合うので、是非参加してみてください。
html5とcss3の勉強をするのにとても良い機会になりましたよ。

Coding Contest #02

親要素の高さを指定して、overflow:autoなどを指定し、子要素にposition:relativeを設定していたとき、ＩＥではスクロールバーが出てもスクロールがされない。
たまにやってしまって、なんでだったかすぐ忘れるのでメモ。。。

親要素にもposition:relative;を！

WEB Designing 6月号の大藤さんの記事でIE6撲滅キャンペーンの記事があった。

そこで紹介されていた、条件分岐を使ってIE6にCSSを読み込ませない方法を早速やってみた。

<!--[if gte IE 7]<!-->
<link rel="stylesheet" type="text/css" href="hoge.css" />
<!--<![endif]-->

のように書くとIEは、IE7以上がhoge.cssを読み、またIE以外のブラウザもhoge.cssを読むらしい。
ポイントは、コメントアウトのタグらしい。

通常の条件分岐コメント例はこちら

ちなみにこのサイトの2009年4月20日から5月20日までの一ヶ月のブラウザの割合は、以下のとおり

IEのうち
IE7･･･56.32%　IE6･･･32.95%　IE8･･･10.73%

まぁこのサイトがWEB制作している人くらいしか来ない内容なんで、IE6がCSS切れてても問題ないだろうけど、
さすがにクライアントのサイトにIE6撲滅キャンペーンを仕込むわけにはいかないですが・・・
IE6のシェアが早く減るのを祈りつつ、IE6を対処するのもまた楽し。今日この頃。

filter: alpha(opacity=35);
-moz-opacity:0.35;
opacity:0.35;

IE向けに
filter:alpha(opacity=透明度);
100・・・100%(不透明) 　0・・・0%(透明)　　35・・・35%

Firefox向けに
-moz-opacity:.透明度;
1・・・100%(不透明)　　0・・・100%(透明)　　0.35・・・35%

safari・opera
opacity:透明度;
1・・・100%(不透明)　　0・・・100%(透明)　　0.35・・・35%

備忘録。。。

safariでだけうまくいかないところがあって取り急ぎハックで・・・

html[xmlns*=""] body:last-child body { color:#***; }

webの人ならご存知、css開発者 Eric Meyer（エリック・メイヤー）／google UX元リーダー Jeffry Veen（ジェフリー・ヴィーン）／Dan Cederholm(ダン・セダーホルム）／Jeremy Keith（ジェレミー・キース）／Andy Budd(アンディ・バド）そしてJohn Allsopp（ジョン・アルソップ）と世界のトップエキスパートのカンファレンスが11月7～9日に東京で開催されます。

[続きはこちら]

スクロールバーってブラウザごとにスタイルが違うんですが、それをCSSとJavascriptで独自のスタイルにするという記事が出てたので紹介します。

[続きを読む]

先日行ってきたセミナー「ＣＳＳ Reloaded」のスライドが公開されていましたので、貼っておきます。
また、John Allsopp,Jeffrey Veen,Jeremy Keith,Dan Cederholm,Eric Meyer,Andy Buddといった世界最高峰のエキスパートたちが日本でカンファレンス・ハンズオン形式のワークショップを開催する「Web Directions East」が11月7,8,9日に開催されるそうです。行きたいなぁ・・・Eric Meyer氏のワークショップ・・・行きたいなぁ・・・カンファレンス・・・http://east08.webdirections.org

CSS Reloadedのスライドを見る

9月７日（日）アップルストア大阪で開催された、「CSS Reloaded」CSS3の実践的な使い方をご紹介！に行ってきました。
6月14日にアップルストア銀座で開催されたJohn Allsopp氏のセミナーを菊池崇氏が日本語版で解説するというもの。
ほぉー！へぇー！と驚きの連続で1時間があっという間。手帳にメモっていたけど、後から読んだらミミズが這ったような字でこれから実験しながら解読します。>_<

[続きを読む]

CSS3の実践的な使い方

日時：9月7日（日）19:00～20:00　
会場：アップルストア大阪:心斎橋
スピーカー：菊池崇
allWebクリエイター塾講師・Actlink：株マークアップエンジニア・マイクロフォーマッツ
Japan代表