モーダルウィンドウの実装、モーダルウィンドウとは
#事務所 #サイト に #モーダルウィンドウ をつくろうと画策中 #CSS だけでつくれるらしい。 CSSだけ(+ #html )で殆どのことができるようになっていますね。
— 齋藤理央 (@b_saitorio) 2017年12月28日
事務所サイトにモーダルウィンドウを実装したいと思っていました。
ここでいうモーダルウィンドウとは、ウェブサイトの子要素として開くウィンドウの事です。つまり、親要素のある個所をクリック、あるいはタップすると派生するウィンドウで、子要素であるモーダルウィンドウ表示中は、親要素であるウェブページを暗く表示するなどしてスポットライト的にコンテンツに注意喚起することなども出来ます。
そうすると、要素の注釈のポップアップや、キャラクターの会話要素などに利用することも出来ます。
CSSのみによるモーダルウィンドウの実装
ということで、 #モーダルウィンドウ 実装しました。 #オーバーレイ (モーダルウィンドウ外をクリックするとクローズする仕組み) を含めて 簡単でした。 #CSS のみで作成しています。 #TARGET 属性は知らなかったけど、めちゃくちゃ使い勝手がよさそうです。
— 齋藤理央 (@b_saitorio) 2017年12月28日
:target は #属性 じゃなくて、 #疑似クラス ですね。 失礼しました。
— 齋藤理央 (@b_saitorio) 2017年12月28日
本当に、想定より簡単でした。CSSでできることは今後もどんどん増えていくでしょうし、そうなっていくとよりウェブサイト表現の幅も広がっていくものと考えられます。
スマートフォンとの互換(モバイルユーザビリティ)
#アイフォン でも #モーダルウィンドウ #動作確認 できました。 縦方向がちょっとバランス悪いですが、今後の課題ですね。 #ツイッター のモーダルウィンドウも似た原理なんでしょうが、流石。 複雑・ハイテクな感じでちょっとプロでないと作成は難しそうな印象です。
— 齋藤理央 (@b_saitorio) 2017年12月28日
アイフォンやアイパッドと、デスクトップ、さらにブラウザ間の規格の違いで動作に差が出るのは、現状CSSをメインにスライドショーやモーダルウィンドウを作成する一番のデメリットと考えられます。
https://t.co/6nqhCzvuOQ#事務所 #ウェブサイト の #モーダルウィンドウ 第2弾 あくまで #テスト段階 ですが 作ってみました。 #CSS と #HTML だけで作成しています。 #デスクトップ と #アイフォン #アイパッド で #文字 がまったく逆の挙動をするという謎の現象。。
#アイフォン #アイパッド の #文字 の挙動の方がかっこいいですが、 #Microsoft #Edge では明らかに #動作不良 。。 #ベンダープレフィックス を書かなかったからだろうか。。
文字も、CSSのanimationと@keyframes で、かなり色々おもしろい動きやスタイリッシュな挙動をさせることができそうです。ただ、ここでもアイフォンやアイパッドと、デスクトップのブラウザの挙動の違いに悩まされており、現在、解決していません。
#ベンダープレフィックス もういらないものとまだ書かないといけないものがやはりあるのか。。。
ベンダープレフィックスはもう、殆ど不要との情報もあるので、ベンダープレフィックスの問題なのかも、現状では不明です。
昨日の #モーダルウィンドウ 少し いじりました。 かえって悪くなった感じもしますが、 より #改良 していくつもりです。
さらに、モーダルウィンドウを利用してスライドショーをつくりました。この趣旨は、将来的にモーダルウィンドウを実装して、事務所サイトに動画的なコミニュケーションを導入したいという点にあります。単純な動画も盛り込みたいと思いますが、それよりも、動画的なウェブサイトを志向する側面が今のところ強いです。
#モーダルウィンドウ を利用して #スライドショー をつくりました 。 #html と #css だけで 、 もっとも簡易につくれる スライドショー のひとつではないかと自負しています。 。 。 が 。 。 。 今のところ #iOS や #ms の #ブラウザ では正常に作動せず原因を調査中です。
仕組みは簡単です。 #html に記載した #div 要素に #css の #keyframes で #background – #image として 召喚する #画像ファイル を 設定した #キーフレーム 毎に切り換えています。
https://t.co/6nqhCzvuOQ
#html では #div + #id を設定すれば良いだけですし、 #css サイドでは div 要素に keyframe アニメを 紐付け、 後は keyframe アニメに複数の背景用の呼び出し画像を 設定すれば良いだけなので、 知る限り一番簡易な手順で実現するスライドショーのひとつかと思います。
CSSでできることが増えているので、JAVASCRIPTや、JQueryを使わなくても、簡単なスライドショーは本当に簡易な記述でつくれるようになりました。
ただ、 #ベンダープレフィックス をきちんとつけないと、#ios #マイクロソフト の #ブラウザ で正常に作動せず、ベンダープレフィックスをつけても作動しないおそれがありますので、このあたりの原因がわからないと現状では採用できないでしょう。
ただ、最初の方から悩まされているのが、ブラウザ間の挙動の齟齬です。ベンダープレフィックスの問題とも言い切れない側面があり、そもそもの規格の違いから避けがたい挙動という印象も持っています。
#モーダルウィンドウ と 絡めて作成しているので、少し #CSS の記述が複雑になっており、その影響かもしれません。 #モーダルウィンドウ を絡めなければ、 本当に簡易な記述で #スライドショー が実現しますし、 #ブラウザ 間の 規格の違いによる不具合も出ないかより小さいもしれません。
ただ、後付けで色々とぐちゃぐちゃと付け足しているので、この辺りが動作不良の原因の可能性が高いです。きちんと計画的に作成されたサイトであれば、ここで指摘している動作齟齬は生じない可能性も高いと思います。この点は、今後調査改善していきたいと考えています。
#CSS で出来ることは本当に拡がっていますが、 ブラウザ間の規格の違いなど、まだ調整が必要な部分も残っており、より十全な状況になるまでもう少し時間が必要ということかと思います。
ただ、理想はやはり、少々複雑なCSSの記述であっても、ブラウザ間、デバイス間で整合性のとれた挙動が理想的であることは間違いありません。この辺りは、今後改善されていくでしょうし、そうであると期待したいと思います。