アニメーションで変化するタブ切り替え
はじめに Webデザインで頻繁に使われる「タブ切り替え」のインターフェイス。レイヤ状態にすることで、コンパクトなエリアに多くのコンテンツを表示でき、大変便利ですね。今回はこの切り替えのタブにアニメーションを付けてみたいと思います。 まずは、サンプルをご覧ください。 サンプル タブをクリックする度、ちょうど「水位」が上がったり下がったりしているように見えます。なので、「水」を使った施設、例えば水族館やプール、さらにショットバーなどの飲食業など、さまざまな業種に使えますね。 まず、HTMLと、タブの切り替え動作のためのJavaScriptをそれぞれ用意します。今回、CSS3でのアニメーションの解説が趣旨のため、JavaScriptはjQueryで手短かに設定します。
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そんなパーセントで指定されたピクセルでの正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニックを紹介します。 デモページ：幅780pxで表示 HTML HTMLはシンプルで、中央に配置するdiv要素だけです。 <body> <div>Percentage sized and still centered.</div> </body> CSS ぱっと思いつく方法としてはパーセントをネガティブマージンで使えばいいのでは、となるところですが、ネガティブマージンを使用すると左右の中央はできますが、天地の中央がうまくいきません。 ここではネガティブマージンではなく、
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
CSS 2.1仕様が「勧告」ステージに
ウェブの世界はほぼCSS 3へと移行しつつあるが、World Wide Web Consortium（W3C）は米国時間6月7日、CSS 2.1をウェブフォーマットの標準とすると宣言した。 W3Cによると、CSS 2.1は「勧告」ステージに達したのだという。W3Cでインタラクション分野のリーダーを務めるPhilippe Le Hegaret氏が、Twitterにてこのマイルストーンを発表した。 ブラウザメーカーは、常に遅れ気味のMicrosoftでさえすでにCSS 3に目を向けている。CSS 3は、ページ遷移時のトランジション効果を利用したり、角が丸いボックスを表示したり、Adobeの提案に従えば雑誌のようなレイアウトをすることも可能となる。 それでも、CSS 2.1は標準として完成させておくべきものだ。こうした技術は寿命も数十年と長くなる可能性があり、その間非常に幅広いユーザーや組織がウ
アドビ、新ウェブ標準「CSS Regions」を提案--雑誌風レイアウトのウェブページを可能に
Adobe Systemsは米国時間3月8日、雑誌のようなレイアウトのウェブページをより簡単に作成できるという新しい標準「CSS Regions」（PDF）をWorld Wide Web Consortium（W3C）に提案した。Adobeはこの技術を、シリコンバレーで開催のCSS Working Groupのミーティングでも説明している。 雑誌風のレイアウトはAdobeの「InDesign」ソフトウェアの中心的な部分だ。各種ウェブ標準の機能が改善されれば、AdobeはInDesignユーザーに対し、ウェブ向けのデザインを作成する機能を容易に提供できるようになる。 Adobeがその方向に進んでいることを示すものがいくつかある。同社は今週、「Flash」コンテンツをCSS、JavaScript、HTMLを用いたウェブコンテンツに変換するツール「Wallaby」を発表している。また、先週リリー
【ハウツー】JavaScriptいらず、CSS3で作るシンプル&クールな多段メニュー (1) CSS3 Dropdown Menuとは | エンタープライズ | マイコミジャーナル
JavaScriptを使わず、CSS3で作るクールな多段メニュー WebDesignerWallにおいてCSS3を利用した、MacOSのような多段メニュー(Mac-like multi-level dropdown menu)を作成する方法が公開された(マイコミジャーナルのニュース記事 - CSS3で綺麗なドロップダウンメニューを作る方法)。CSS3の新機能であるborder-radiusやbox-shadow, text-shadowを活用し、JavaScriptを使わずにクールな多段メニューを実現している。 CSS3 Dropdown Menu - CSS Codeより引用 CSS3 Dropdown MenuはFirefoxとSafari、そしてChromeで完璧にレンダリングされる。Internet Explorer 7以降のようなCSS3に対応していないWebブラウザでも動作する
ユーザに美しい驚きを与える404 Page Not Found | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Kevin Yank氏がWhat Makes a Good 404 Page? - SitePointにおいて、404 page not foundのページの例としてhttp://idzr.org/404を紹介している。http://idzr.org/404は現在策定が進められているCSS 3D Transforms Module Level 3の機能を使って背後に文字のアニメーションを表示するというもの。Webkitで実装されているためSafariやChromeで閲覧できるほか、iPhoneのSafariからも動作を確認できる。 Safari 4 on Mac OS Xでの閲覧例 Chrome on Windows XPでの閲覧例 iPhone
HTML5/CSS3入門、Opera大学巡業プレゼン資料 | エンタープライズ | マイコミジャーナル
Opera’s newest Web browser introduces a new technology platform, Opera Unite, allowing you to stream music or share files, photos and more, right from the browser. Opera Softwareはブラウザ開発のみならず教育や啓蒙活動にも取り組んでいる。教育担当になった人材は世界中の大学を回って講演を実施する「Opera: University tours」という取り組みに従事する。Webに関する講演を実施することが多いようだ。これまで日本や、欧州、米国をはじめ東欧、南アフリカ、中国、ロシアなどさまざまな国で講演を実施している。 同社のChris Mills氏がOpera's Developer Relations Team - U
使っていないCSSを見つけ出す方法 | エンタープライズ | マイコミジャーナル
Windows Internet Explorer 8 オンザフライでCSSを調整してブラウザの表示に反映させるツールはいくつもある。WebデザイナやWebデベロッパにとって、WebサイトやWebページを制作する段階において欠かせないツールといえる。主要ブラウザにはそれぞれデバッグツールが付属しているか、付属していなくてもFirebugのように実質的にデファクトになっているツールが提供されおり、そうしたツールを使うことが多い。 このようにCSSをチューニングするためのツールは数多く提供されているが、逆にCSSで使われていないセレクタを特定して削除するといった機能を提供するものは少ない。IEBlog : CSS Crunch: new IE Extension for developersにおいてSelectors API Level 1で規程されているdocument.querySelec
マークアップ・エンジニアたちのTips
「マークアップ・エンジニア」という言葉は，HTMLから来ています。HTMLの正式名称は「HyperText Markup Language」です。ここで，HTMLの「M」にあたる言葉が「Markup（マークアップ）」ですね。「Markup（マークアップ）」とは，そのままでは単なる文字列であるテキストに対して，HTMLタグを付与していくことで文章（文書）の構造を明示する作業を指します。 Webサイトが大規模になりつつある現在，マークアップ・エンジニアの業務は，HTMLを書くだけに留まりません。ビジュアル・デザイン制作作業以降（または同時）に，Webサイトのユーザー・インタフェースの実装や，または付随するツール群の使いこなしにも精通している必要があります。この連載では，すでにマークアップ・エンジニアとして働いている人やこれからマークアップ・エンジニアを目指す人に向けて，私たちが業務を通じて得た
CSS事始め、やっていいコト&だめなコト | エンタープライズ | マイコミジャーナル
TORRANCE WEB DESIGN - Website Design Service in South Bay Torrance, California - Portfolio & Blog of Soh TanakaSoh Tanaka Soh Tanaka氏が自身のブログにおいて次の2つの記事を公開している。CSSの勉強をはじめている友人におこなったアドバイスをまとめた内容になっている。 CSS Beginner Advice -CSS Beginners Do's and Dont's CSS Beginners Do’s and Dont’s Part 2 紹介されている内容は次のとおり。 複数のブラウザでのレンダリングチェックは頻繁に実施する。結局、クロスブラウザレンダリングに失敗するケースは、書き上げるまでチェックをおこなっていない。また、問題が解決するまでは次のステップに
XSL-FO／CSSスタイルシートにより、XMLとHTMLをサーバー上で高速にPDFに変換！ - Antenna House Formatter
『Antenna House Formatter』は世界中のお客様にご利用いただきながら 24年目を迎える自動組版ソフトです。XSL Formatting Objects（XSL-FO）の組版及び XML/HTML と CSS からの組版に対応し、大容量・多言語データを高品質に組版します。また、独自開発した PDF出力エンジンで、アクセシブルなタグ付きPDF や印刷用の PDF/X、長期保存用の PDF/A などさまざまな PDF形式の出力が可能です。 Antenna House Formatter とは 『Formatter』は、XML 文書を組版するための仕様として W3C で勧告された、Extensible Stylesheet Language (XSL) Version 1.1 および、HTML にレイアウトスタイルを定義することで一般的に知られている CSS の、ふたつのスタイ
CSSハックしてはいけない5つの理由 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebページやWebアプリケーション開発の終盤に入ってから、特定のブラウザでレンダリングに問題があることが発見されるというのはままある状況だ。すぐに問題を解決することを目指してクイックハックやConditional-CSSの適用などを実施することもある。この方法は短期的に見れば効果があるが、長期的に見ると逆により多くの問題をもたらすため使わない方がいいという紹介がSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsで紹介されている。紹介されている理由は次のとおり。 CSS妥当性検出が不可能 - クイックハックではブラウザの既知のバグを使っていたりベンダ固有のプロパテ
IE8のCSS3およびベンダ拡張は"-ms-"に変更、Webデザイナは注意必要 | エンタープライズ | マイコミジャーナル
Internet Explorer 8 Microsoftの次期メジャーブラウザとして登場することになるIE8では、標準規約への準拠作業が着々と進められている。特にCSS 2.1のテストスィートを寄贈するなど、CSS 2.1準拠の取り組みには余念がない。今回さらに同社のCSS 2.1への取り組みを強調する変更がIEBlogにおいてMicrosoft CSS Vendor Extensionsのタイトルのもと発表された。これによってIE7やIE8向けに作成したCSSに変更の必要性が生まれるためWebデザイナは同発表に注意しておきたい。 ブラウザでは標準規約として規程されたCSSプロパティ、標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在標準化が進められているCSSプロパティ、ブラウザベンダが用意した独自拡張プロパティなどがある。こうしたプロパティのうちブラウザベンダ
テーブルを魅せる10のCSS | エンタープライズ | マイコミジャーナル
table要素はWebページにとってなくてはならないものだ。しかしデザインや設定が難しい要素でもある。テーブルを簡潔に記述しつつCSSで優れたデザインを提供したいところだが、Webブラウザ間の差異もありなかなか希望通りの設定ができない。そこでR.Christie氏がSmashing Magazineにおいて公開しているTop 10 CSS Table Designsに注目したい。XHTML 1.0に準拠したテーブルを順次CSSを使ってカスタマイズしていくというもので、見やすい上に説明も簡潔でわかりやすい。WebデザイナやWebデベロッパは一度チェックしておきたいドキュメントだ。コンテンツは次の10の内容で構成されている。 Horizontal Minimalist Vertical Minimalist Box Horizontal Zebra Vertical Zebra Style O
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 | クリエイティブ | マイコミジャーナル
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
