HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
[CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル
省スペースにぴったり！ 複数のパネルをマウスホバーで表示を切り替えるニュースボックスを実装するスタイルシートを紹介します。 CSS3 Easy Newsbox [ad#ad-2] 対応ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Operaとのことで、CSS3対応ブラウザでもっとも期待通りに表示されます。 ※当方のIE6では期待通り動作しませんでした。 下記はCSS3対応ブラウザ：Firefox4でのキャプチャです。 角丸、ドロップシャドウ、グラデーションが適用されています。 デモページ：IE7で表示 IE7では、角丸やドロップシャドウやグラデーションは適用されませんが、各パネルの切り替え表示には対応しています。 [ad#ad-2] ニュースボックスの実装 HTML 各パネルはa要素で実装されており、div要素で内包します。 <div id="newsb
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ
現在、Firefox, Safari, Chromeで利用できるCSS3グラデーションの表示サンプルと指定方法のまとめをDynamic Driveから紹介します。 CSS Library:CSS3 Linear Gradients 下記は各ポイントをピックアップしたものです。 CSS3グラデーションの基礎知識 CSS3グラデーションをサポートしているブラウザは現在のところ、下記の三つです。 Firefox 3.6+ Safari 2+ Chrome CSS3グラデーションの対応エレメントは、下記の二つです。 background background-image CSS3グラデーションの指定方法はmoz系（Firefox）とwebkit系（Safari, Chrome）で異なり、下記のようになります。 moz系
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webクリエイターなら押さえておきたい、CSS3を使った次世代表現
CSS3の説明がグラフィカルでわかりやすい『CSS3 Files』 | 100SHIKI
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
IDEA * IDEA