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

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

jQuery

OSS(オープンソースソフトウェア)とは?

オープンソースソフトウェアとは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称である。 GithubやCodePenのようにソースコードをオープンして共有する、と言う考え方は最近出来た考え方では無くPC…

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

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

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…

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

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

スクロールに合わせて要素にアニメーションをつける「Animate on scroll library」

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。michalsnik.github.io index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装し</title></meta></head></html>…

ページネーション の導入

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

jqueryでのresize設定

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

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

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

$.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>

jQueryでのcookieの指定

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

jQuery演習問題2

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

jQuery演習問題

【問1】 「変更ボタン」をクリックしたら、300pxの正方形の背景色が1秒掛けて青から赤に変更するアニメーションをcssとjqueryの両方を使い作成しなさい。 【問2】 「移動ボタン」をクリックしたら、300pxの正方形の背景色が1秒掛けて右に300px移動しながら正…

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

jQueryでテキストを変更するには「.text()」を使用します。 <script> $(function(){ $('#btn').text('閉じる'); }); </script> </head> <body> <p id="btn">もっと見る</p> </body> flgを使ったスイッチの作成 ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すた…

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

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

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

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

jQueryを使ったajax

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

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

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

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

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

スムーススクロール

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

要素の属性を操作する

属性とは各要素に付属している情報です。 img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。 jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定/取得するする事が出来ます。 img要素のalt属性を…

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは? jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物(margin、color、width、positionなど)に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '…

cssプラグインを使ってハンバーガーメニューを作る

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…

jQueryとは

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