第2回 アコーディオンメニューのアニメーション | gihyo.jp
今回のお題はサンプル1のアコーディオンメニューだ。マウスポインタをメニュー項目に重ねると、サブメニューが広がる。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトする。「アコーディオンメニュー」をネットで検索すると、jQueryを使った作例が多くリストされるだろう。だが、JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれる。 サンプル1 CSS3：Accordion menu by rollover メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。アコーディオンメニューは、つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素として、サブメニューはその中にさらに<ul>要素を入れ子にした。サブメニュー項目も<li>要素で、メニ
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
The evolution of the web
The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible.� Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today's web is
Internet Explorer 10 PP2のCSS3機能
Internet Explorer 10 PP2のCSS3機能：特集：IE10（プレビュー版）概説（後編）（1/3 ページ） Web制作者が知るべきIE10 PP2の新機能とは？ CSS3、ECMAScript 5、Webパフォーマンスの新機能を解説。IE9以前との互換性も。 連載目次 前回に引き続き、Internet Explorer 10（以下、IE10）プラットフォーム・プレビュー版の解説を行う。 ■7. CSS3 IE10 Platform Preview 2（以下、PP2）では、IE9で追加されたCSS3の機能に加えて、いくつかの機能が追加されている。IE9で追加されたCSS3の機能は、「特集：Web制作者＆開発者のためのIE9概説（後編）」やIE9開発者ガイドを参照してほしい。 CSS3もHTML5と同じく、仕様がすべて確定していない状況である。W3CのサイトでCSS3の仕様検
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
