デジハリ佐賀 | 地域密着のWebデザイナースクール

こんにちは！デジタルハリウッドSTUDIO佐賀 スタッフです。

ところで皆さん「JavaScript（ジャバスクリプト）」という言葉、聞いたことありますか？Webデザイナーに興味がある方は、色々と調べていく中で出てきた・見たことのある単語かもしれません。


このJavaScriptとは、主にWebサイトに「動きをつける」ためのプログラミング言語です。動きをつけることで、そのサイトがより魅力的になりますよね！ただページが表示されているだけよりも、スマホの画面をスクロールしたら何かが表示されたり、ちょっとしたアクションがあると、見ていて楽しいサイトになります。


そして何といっても、サイト制作側も色々な表現ができるようになってくると、制作モチベーションアップにもつながります！

Webサイトを閲覧している中で、私たちも何気なくこのJavaScriptで作られた機能を見たり使ったりしています。
画像が横・縦からすーっと流れてきたり、スマホのハンバーガーメニューだったり、画像を押したら拡大してくれたり…などなど。


今回はその一例として、画像を押したら拡大してくれる機能（モーダルウィンドウ）について、実際に見ていきたいと思います！サンプルサイトもご用意しました！







先ほども簡単に説明させていただきましたが、画像を押すと拡大した画像が出てきてくれる機能です。通販サイトなどでよく見かけます。


例えば架空の「パン屋さん」のサイトで、パンのラインナップの紹介ページがあったとします。
「パンの写真が紹介されているけど、もっと大きな画像で細かく見てみたいな…」という時に、出番がくるのがJavaScriptを使った「モーダルウィンドウ」です。








パンの画像が大きく表示されて、より細かにパンを見ることができます！通販サイトなどでも、商品を大きく見れるようにこの機能が使われています。普段よく見かけたり使ったりしていますよね。


画像だけではよく伝わらないので、実際にモーダルウィンドウを使ったパン屋さんのサイトをご用意しました。サイトを訪問していただき、パンのイラストをクリック・タップしてみて、モーダルウィンドウをぜひ実感してみてください！

今回ご紹介したJavaScriptは「Webデザイナー専攻」のカリキュラム内で学習できます。JavaScriptはもちろんjQuery（JavaScriptで書くと時間がかかる作業を簡単にできるもの）も学習できます。




JavaScriptを使って、卒業制作作品やその後の実務で制作するサイトをより魅力的なものに。
もっと詳しく聞きたい方は無料説明会へお越しください！