jQuery APIでWebサイトを演出しよう

リンクエリアを拡大しよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザビリティを考慮して、リンクエリアを拡大するプラグインを実装してみましょう。
講師:
08:48

字幕

このレッスンではjQuery プラグインを使ってリンクのエリアの拡大を学びましょう。それではまずfinal のフォルダーを開いてindex.html をGoogle Chrome で開きます。開いたら少しスクロールをしましょう。こちらの企業情報のブロックにマウスを合わせてみてください。実はこのエリアはこの見出しのみをa タグでリンクに設定してありますがこのボックス全体がクリックできるようになっています。例えばこのテキストの文字情報のところもクリックをすると企業情報へ飛ぶことができます。このスクリプトを使わないと見出しだけにしかリンクの判定がないのでユーザビリティが少し悪いです。なので a タグで全部包んでしまえばいいかというとそれはマークアップの問題になってしまうのでリンクを拡大するのはjQuery プラグインでやりたいと思います。それではフォルダーに切り替えてbegin のフォルダーをSublime Text にドラッグアンドドロップしましょう。そして index.html をダブルクリックで開き右クリックからOpen in Browser でブラウザーで確認をしてみましょう。確認をしてみると、まだこちらにはプラグインによる効果が働いていないので見出しのみがリンクの判定でこういった段落とかこの背景画像のエリアはリンクにはなっていません。 それでは今回使用するプラグインを検索してみましょう。新しいタブを開いてbiggerlink という風に検索窓に入力してみましょう。そうすると1番上にjQuery プラグインのBiggerlink というサイトが検索に上がってくると思います。こちらをクリックしましょう。大抵のプラグインには作者のサイトや GitHub と呼ばれるコードの共有サイトにjQuery プラグインが紹介されています。大抵はこちらからダウンロードができたりまた、使い方のマニュアルなども完備されていることが多いです。このサイトでも使い方やダウンロードの解説があります。大抵が英語ですけれどもよく見ればコードの部分だけを見ていけば基本的にはコピーアンドペーストなどで充分実装可能です。今回は必要なファイルがJavaScript ファイル1つだけなのでまずはダウンロードしてみましょう。1番下までスクロールをするとDownload という項目があります。ここに Uncompressed か Minimised かどちらか選べますという風にありますが基本的にプラグインの中身をいじらないのであればmin つまり小さくなっている圧縮版の方を利用したほうがファイルサイズが軽くて済みます。 ということで Minimised の方をクリックしてみます。それでは Chrome のファイルメニューから「ページを別名で保存」をクリックしてみましょう。クリックすると、クリックするフォルダーを聞かれますがここでも保存する場所をちゃんと決めておきましょう。今回は bigger_begin というフォルダーの中に入ってJavaScript なのでjs フォルダーに保存したいと思います。js フォルダーを開いて、他の JavaScript が見えていると思います。この js フォルダーに保存をしましょう。保存は一瞬で完了するはずです。そうしたら Sublime Text に戻りましょう。プラグインを使用するには1番下のスクリプトのエリアまでスクロールをして、まず外部ファイルとして読み込まないといけません。つまりこの common.js のようにリンクを付けるということですね。なのでこの scriptcommon.js を読み込んでいる行をコピーしてしまいましょう。マウスカーソルをこの行に置いた状態でMac では Command+CWindows では Ctrl+C で行ごとコピーをしてその位置のままでMac では Command+VWindows では Ctrl+V でペーストをすればその行の複製が取れます。 後はこの common の名前を打ち変えるだけですね。jquery.biggerlink.min.js と勿論ファイル名をそのままコピーしてこちらにペーストするのでも構いません。これでプラグインを使う準備が整いましたので後はこのプラグインでリンクエリアを拡大します。拡大の仕方はプラグインを読み込んだだけではだめです。リンクを拡大したい場所を特定しなければならないのでここにセレクターを書きましょう。$(' を打って、今回は id content の中のsection というエリアをbiggerlink にしたいので.biggerlink(); ですこのようにプラグインはそのプラグインの名前をそのままメソッド名として使っている事が大半なのでまず拡大したいエリアを選択してそしてプラグインの名前を付けるというような書式がほとんどです。それでは一度上書き保存をしてChrome に切り替えてbegin のファイルを見ていることを確かめてから更新を押しましょう。そうしたらマウスカーソルがこの写真の状態でもリンクのポインターのカーソルになっていることを確認しましょう。そして企業情報の段落を押したらちゃんと次のページの飛ぶことを確認しました。 ただこのままでは、リンクのエリアが少しわかりづらいです。final のファイルを見るとこのように少し薄くなるようにエフェクトがかかっています。このエフェクトはcss で書けていきます。では Sublime Text を開いてcss フォルダーの中の style.css をダブルクリックで開きます。そしてスクロールをしていってid content の中のbiggerlink というコメントがある所を見つけてそしてそこに追記をして行きましょう。それでは .home #contentそして .bl-hoverそしてスタイルシートの中身はプロパティ、透明度を操るopacity を入れて: 0.8 と80% の不透明度になるようにして上書き保存をしてアプリケーションを Chrome に切り替えて更新を押してみましょう。そうするとマウスカーソルを合わせたエリアがこのように少し半透明になるようになります。ここの要素を検証してみましょう。右クリックからコンテキストメニュー「要素の検証」を選ぶと、このようにデベロッパーツールが開きますが実はマウスカーソルを当てた時にクラス名が変化することを確認してください。 このように bl-hot とbl-hover というクラスが付いていてマウスカーソルを当てるとbl-hover というクラス名が増えます。これが jQuery のbiggerlink が付けてくれているクラス名なのでそちらをスタイルシートで利用したということになっています。このように jQuery とcss の連携も覚えておきましょう。このレッスンでは jQuery によるリンクの拡大を学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。