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

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

jQuery

bxslider.jsを使用したサムネイル・スライドギャラリー

HTMLソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>bxslider.jsを使用したサムネイル・スライドギャラリーの作例</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></meta></head></html>

jQueryでのtouchイベント

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

jQueryでリサイズ時に処理するイベント

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲーションボタンはもちろん表…

jQuery演習問題

【問01】 「変更」ボタンを押したら、既存のp要素内の先頭にテキストが挿入されるよう記述しなさい。変更前 よろしくお願いします。 変更後 はじめまして、よろしくお願いします。問02】 変更」ボタンを押したら、h1要素の後にp要素が挿入されるよう記述しな…

MixItUp v2.1.11のデータ

HTML <body> <div class="controls"> <label>カテゴリー:</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".category-1">赤いもの</button> <button class="filter" data-filter=".category-2">緑のもの</button> <button class="filter" data-filter=".category-3">黄色のもの</button> …</div></body>

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

ページローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

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

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

jQueryとは

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