webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

jQuery

スクロール関連のプラグイン

Animate On Scroll Library michalsnik.github.ioスクロールすると、コンテンツが色々なエフェクトで表示される。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Animate On Scroll Library プラグイン</title> <style> html,body { margin:0; padding:0; } body { background:url(img/main.jpg) no-repeat center ce</meta></head></html>…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

jQueryを記述する上で気をつけるポイント

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…

jqueryでのresize設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

ページネーション の導入

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com BootStrap CDN v…

フィルタリング機能とモーダルウィンドウを使ったギャラリー

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com <html lang="ja"> <head> <meta charset="utf-8"> <title>mix it up</title></meta></head></html>…

jqueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

jQueryでのcookieの指定

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

YouTube動画を背景に埋め込むプラグイン「YouTube Video Website Background」

今回はYoutubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。 YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのア…

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>

ページ内リンクへのスムーススクロール

通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。 #がついている全てにスムーススクロールさせる場合 $(function(){ // #で始まるアンカーをクリックした場合…

jQuery演習問題

【問01】 「変更」ボタンを押したら、p要素のテキストが変更するよう記述しなさい。【変更前】初めまして 【変更後】よろしくお願いします【問02】 「変更」ボタンを押すたびに、p要素のテキストが繰り返して変更するよう記述しなさい。【変更前】初めまして…

アコーディオンパネルの作成

今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、 「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。 $('ul').not($(this).next('ul')) という記述で、複数あるulの中で、「クリックされたthisのnextのul…

jQueryを使ったajax

Ajaxとは「Asynchronous(エイシンクロナス) JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを…

スクロールしたら、ナビゲーションを固定する

スクロールイベント 今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スクロールイベント」をやってみま…

スムーススクロール

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…

jQueryでクリックする度にテキストを切り替える

<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでのテキスト変更</title> <style> html,body { margin:0; padding:0; } img { vertical-align:bottom; } .txt { width:200px; height:50px; border:1px solid #444; border-radius:6px; text-align:center; line-height:50px; margin:50px auto 20px…</meta></head></html>

クリックする度にdivごと表示を切り替える

今回の会社概要は日本語と英語を併記。スマホでは横並びでは見辛く、かといって縦に並べると冗長化してしまうので、適した見せ方を考えましょう。 <div class="info"> <h2>会社概要</h2> <dl> <dt>会社名</dt><dd>株式会社フェリカ企画</dd> <dt>所在地</dt><dd>東京都豊島区南池袋2-12-9 KKビル4F</dd> <dt>設立日</dt><dd>2000年1月1日</dd> <dt>代</dt></dl></div>…

BracketsでjQueryを書くと出るエラーの対処法

Bracketsの環境設定ファイル(brackets.json)を開き以下の文章を一番下に追加します。 "language":{ "javascript":{ "linting.prefer": ["JSHint"], "linting.usePreferredOnly":true } bsj-k.com

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

クリックイベントの際にa要素の動きに制限を掛ける

a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。 まずはa要素が本来持っている動作を再確認しましょう。 HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、</a>…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…