webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。

webサイトではECサイトやギャラリーページなど画像を多数使用しているページなどでよく使用されています。

online.actus-interior.com


商品画像などは画像のサイズが大きいほどユーザーに伝わる情報量も多くなるので、なるべく大きい画像を用意したい。
また商品画像の枚数が多いほどユーザーに伝わる情報量も多くなるので、なるべく多くの画像の用意したい。
この2つをそのままサイトに反映させてしまうと、webサイトが大きい画像だらけになり、レイアウトも制限され結果として見辛いサイトになってしまいます。

なので、モーダルウィンドウを使用し、サムネイル(小さいサイズの画像)を一覧で見せて、大きい画像を見たい場合はサムネイルをクリックし、大きい画像を別ウィンドウで表示させる必要があります。

http://yachin29.com/blog/ModalWindowEffects/



GUI

Graphical User Interfaceの略
グラフィカルで アイコンやメニューボタンなどが用意されていて、どのように操作すればよいのか分かりやすくなっている、インターフェース。

CUI

Character User Interfaceの略
windowsコマンドプロンプトmacのターミナル文字だけでやり取りするインターフェース。全てのプログラムをコマンド画面から操作する事が可能です。


主なモーダルウィンドウ系のjQueryプラグイン

モーダルウィンドウといえば代表的な「Lightbox
lokeshdhakar.com


Lightbox」より高機能な分、作りも少し複雑です(ライセンスに注意)
http://fancyapps.com/fancybox/3/


こちらも多機能でカスタマイズが色々と出来るjQueryプラグイン「colorbox」
Colorbox - a jQuery lightbox


軽量でスマホ対応もバッチリな「remodal」
vodkabears.github.io


スマホ対応
brutaldesign.github.io