モーダルウィンドウの実装とスライドショー

モーダルウィンドウの実装、モーダルウィンドウとは

事務所サイトにモーダルウィンドウを実装したいと思っていました。

ここでいうモーダルウィンドウとは、ウェブサイトの子要素として開くウィンドウの事です。つまり、親要素のある個所をクリック、あるいはタップすると派生するウィンドウで、子要素であるモーダルウィンドウ表示中は、親要素であるウェブページを暗く表示するなどしてスポットライト的にコンテンツに注意喚起することなども出来ます。

そうすると、要素の注釈のポップアップや、キャラクターの会話要素などに利用することも出来ます。

CSSのみによるモーダルウィンドウの実装

本当に、想定より簡単でした。CSSでできることは今後もどんどん増えていくでしょうし、そうなっていくとよりウェブサイト表現の幅も広がっていくものと考えられます。

スマートフォンとの互換(モバイルユーザビリティ)

アイフォンやアイパッドと、デスクトップ、さらにブラウザ間の規格の違いで動作に差が出るのは、現状CSSをメインにスライドショーやモーダルウィンドウを作成する一番のデメリットと考えられます。

文字も、CSSのanimationと@keyframes で、かなり色々おもしろい動きやスタイリッシュな挙動をさせることができそうです。ただ、ここでもアイフォンやアイパッドと、デスクトップのブラウザの挙動の違いに悩まされており、現在、解決していません。

ベンダープレフィックスはもう、殆ど不要との情報もあるので、ベンダープレフィックスの問題なのかも、現状では不明です。

さらに、モーダルウィンドウを利用してスライドショーをつくりました。この趣旨は、将来的にモーダルウィンドウを実装して、事務所サイトに動画的なコミニュケーションを導入したいという点にあります。単純な動画も盛り込みたいと思いますが、それよりも、動画的なウェブサイトを志向する側面が今のところ強いです。

CSSでできることが増えているので、JAVASCRIPTや、JQueryを使わなくても、簡単なスライドショーは本当に簡易な記述でつくれるようになりました。

ただ、最初の方から悩まされているのが、ブラウザ間の挙動の齟齬です。ベンダープレフィックスの問題とも言い切れない側面があり、そもそもの規格の違いから避けがたい挙動という印象も持っています。

ただ、後付けで色々とぐちゃぐちゃと付け足しているので、この辺りが動作不良の原因の可能性が高いです。きちんと計画的に作成されたサイトであれば、ここで指摘している動作齟齬は生じない可能性も高いと思います。この点は、今後調査改善していきたいと考えています。

ただ、理想はやはり、少々複雑なCSSの記述であっても、ブラウザ間、デバイス間で整合性のとれた挙動が理想的であることは間違いありません。この辺りは、今後改善されていくでしょうし、そうであると期待したいと思います。