Moduleという仕様の解説がメインでしたので,今回はそのAPIを使ったサンプルを見てみましょう。ダイアログの表示ウェブアプリでよく使われるインタフェースとして,ページを覆い被せるように(動的に)コンテンツを表示する方法があります。決まった名前はないようですが,モーダルダイアログ・モードレスダイアログや,オーバーレイなどの名前で呼ばれることが多いようです。モーダルとモードレスの違いは,前面に出てきたコンテンツの後ろにある元のコンテンツを操作可能か否かという点で分けられるようです。操作できない場合はモーダル,操作できる場合はモードレスです。このモーダルダイアログは画面中央に配置するのが一般的です。この画面中央という配置が意外に簡単ではないことは多くの方がご存知のことと思います。CSSだけで処理するアプローチを見ていきましょう。6非対応という条件ならば,CSSだけで実現可能です。background:#ccc;}入れ子になった要素を用意して,外側を画面中心に置き,内側を自分自身のサイズの半分だけ左上に戻してあげれば,その要素は画面中央に配置されます。6はposition:fixedに対応していないため,JavaScriptでサポートする必要があります。簡単な方法としてscroll時に位置を調整する方法を実装してみましょう。6向けにXMLHttpRequestを実装していた場合,この判定に失敗するので注意が必要です⁠)⁠。6のときはpositionをabsoluteにして,スクロール量に画面のサイズの半分を足すことで,fixedのtop:50%相当の位置に合わせています。本来なら横スクロールバーも想定するべきですが,今回は省略しています。6でもposition:fixed相当が実現できました。実際にスクロールしてみると,スクロールに対して要素の位置がずれることに気がつくと思います。6だから仕方がないといえばそれまでですが,折角なのでこの問題の解決策を紹介します。いくつかのテクニックを使用します。expressionを定義するCSSです。);}behavior:expressionの中はJavaScriptとして解釈されてCSSの描画に合わせて実行されます。描画のたびにJavaScriptが実行されるので,負荷が高い点に注意が必要です。6だけに適用されるように,JavaScriptでclass名を操作します。fixedでなくとも動作はしますが,ちらつきは残ってしまいます。6でもスムーズなposition:fixedが実現できました。重くなる上に,html要素,body要素にbackgroundAttachmentがfixedでない背景画像を設置することができなくなってしまうなどの問題があるので,この方法を使用するかどうかはそういった問題を含めて判断する必要があります。CSSOM著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。