CSSだけで可能!スマホに設置できるモーダルウィンドウTweetPocketコンテンツを浮かび上がるようにポップアップ表示させるモーダルウィンドウ。お知らせ等の他に、楽天ならクーポン等を設置して告知する事ができます。今回はこのモーダルウィンドウをCSSだけで設置する方法(JavaScriptなし)をご解説していきます。目次モーダルウィンドウとはモーダルウィンドウの設置方法まとめモーダルウィンドウとはモーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことである。モーダルウィンドウが表示されると、その中で指定された操作を完了するかキャンセルするかして、そのウィンドウを閉じない限り、親ウィンドウ側に対する操作ができないようになる。このため、モーダルウィンドウはユーザーに特定の操作をさせたり、確認を促したりといった目的で用いられることが多い。モーダルウィンドウのうち、Windowsなどおけるダイアログボックスがモーダルウィンドウになっているものを、特に「モーダルダイアログ」と呼ぶ。最近では、Webユーザインターフェースにおいてモーダルウィンドウを実現する例も多数登場している。「LightBox」や「ThickBox」のように、JavaScriptのライブラリとして公開されている場合も多い。ようは任意のコンテンツを、必ず目に留めさせる事ができます。ユーザーによってはウザいと感じる人もいるかもしれませんが、クーポン等ユーザーメリットのある情報ならユーザーにとってもマイナスではないと思いますし、店舗側も告知する事ができますし、使い方によっては双方にメリットがあると言えます。モーダルウィンドウの設置方法ではモーダルウィンドウの設置方法を解説していきます。モーダルウィンドウは特に画面サイズが限られているスマホで効果を発揮しやすいと思いますので、今回はスマホでの設置方法を解説します。CSS読み込みまずはCSSを読み込ませて下さい。下記コピペでOKです。href="http://www.rakuten.ne.jp/gold/ショップID/任意のファイル場所.css">HTMLつづいて、HTMLです。こちらも表示させたいページに記載します。="">「urlを入力」の箇所に飛ばしたいページのリンク、「画像urlを入力」の箇所に作成した任意の画像URLをそれぞれ記載します。CSS最期にCSSの記述です。none;}※表示イメージ上記のように、クーポン画像を設置して告知してみました。画像をクリックするとクーポンが獲得できる仕様です。まとめいかがでしたでしょうか?スマホページは画面サイズがPCより遥かに小さいため、バナー類やクーポンの告知場所に困っている方にはうってつけの方法かと思います。CSSも自分なりに微調整して、店舗にあう表示方法を模索してみて下さい。最期までお付き合いいただき、ありがとうございました。・そもそもECの経験がなかったりで、難しい部分もあるでしょう。当社はそんなネット通販のお悩みを「トータルでまるっと解決」します!楽天代行でもAmazon代行でも全部丸投げしてください。あれもこれも全部やります!まずは下記フォームからお気軽にご相談ください。裏ワザSNSでもご購読できます。デザイン歴約10年を経て、ディレクション業務にも携わることとなりました。記事は主に楽天市場の施策諸々について書いております。EC戦国時代の中、私も日々勉強し試行錯誤しながら新しい取り組みを模索中です。拙い文章ではありますが、少しでもお役に立てる記事になれば幸いです。