動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
横から出てくるドロワーメニューの作り方
横から出てくるドロワーメニューの作り方 Publish Date: 2017.07.27 お知らせ ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら CSSのtransitionとtranslateを組み合わせます。 <button type="button" class="btn_menu"> <!-- ボタンの記述 --> </button> <nav> <!-- ナビの記述 --> </nav> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #fff; } nav.open { transform
jQueryを使った自作スムーススクロールでエラーが出る場合の対処法
公開2016.05.22 更新2017.12.03 仕事・技術 「Uncaught Error: Syntax error, unrecognized expression: a[href^=#]」とエラーが表示されてしまう場合の解決策です。 このエラーは、ページ内のアンカーリンククリック時にスムーズなスクロール移動を実現する以下のようなjQueryを使ったコードを使用している場合などに発生します。 $('a[href^="#"]').click(function() { var speed = 500; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').a
Magnific Popup レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグイン
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
jQuery UIのDatepickerを使ってみる
jQuery UIのDatepickerを使って、カレンダーから日付の入力を試してみます。 サンプルコード 必要なファイルを読み込みます。 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 今回はthemeを「smoothness」にしていますが、違うthemeを使いたい場合はCSSのディレクトリを適宜変更してください。 HTML inputにフォーカスが当たった時に、カレンダーを表示させます。 <input t
jQuery UI Datepicker（カレンダー）指定日の選択を無効
jQuery UI Datepicker で水曜日、日曜日、祝日など指定日をカレンダーで選択できなくする方法をご紹介します。 このサンプルでは、祝日は３日だけですが配列で確保しています。水曜日と日曜日の判定は Date オブジェクトの getDay() で判定します。 jQuery UI Datepicker の beforeShowDay イベントのパラメータとして渡される日付が、 水曜日、日曜日か指定日にあたるか判定して、それぞれのスタイルとともに false をリターンすることで選択を無効にすることができます。 コード $(function() { // 祝日を配列で確保 var holidays = [ '2012-10-08', '2012-11-03', '2012-12-24' ]; $("#datepicker").datepicker({ numberOfMonths:
ENTEREAL
Datepickerで土日や祝日、定休日等に色をつけたり、選択できなくしたりする方法をご紹介します。 Datepickerを使う時は、かなりの頻度で必要になるのではないでしょうか？ 概要 beforeShowDayは、DatePickerが設定されたフィールドが選択され、カレンダーが表示される前にその月の日数回実行されます。 毎回、引数にDate型の日付を引数として受け取りますので、それを使って判定し結果を戻します。 今回の場合、配列に設定した祝日リストと比較し、一致する場合は、祝日と判定しています。 判定結果によって、3つの値を持った配列を結果として戻します。[true/false, '文字列', '文字列']
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
プラグイン不要!! jQueryのみで実装するスムーズなスクロール!!｜By U Zensen.
＊ はじめに!! どうも！ぴーすけと申します！！ 最近のWEBサイトでは当然のように実装されている機能として、スムーズなスクロール機能がありますよね。 このサイトでもページを下の方にスクロールすると画面下に「TOP」ボタンが表示され、そのボタンを押すと画面最上部へスムーズにスクロールされるようになっています。(PCのみ) 実装するには、jQueryのプラグイン「smoothScroll.js」などが有名ですが、今回は余計プラグインなどは使用せずに、jQueryだけで実装する方法をご紹介します!! ＊ なめらかなスクロール!!まず、単純に画面最上部へスクロールするようにするためには、以下のように記述するのが一番簡単な実装方法だと思います。 もちろんプラグインは不要で、jQueryだけ読み込める状態なら動作します。 まずはボタンを用意します。デザインは適宜調整してください。私の場合はfixed
jQuery FadeThis
lightweight jQuery plugin for fade-as-you-scroll features Installation Download the plugin here : https://github.com/lwiesel/jquery-fadethis/archive/master.zip or use the Bower Component available by taping: bower install jquery-fadethis Then, include the script after jQuery. Requires jQuery 1.4+. <script src="jquery.js"></script> <script src="jquery.fadethis.min.js"></script> Basic usage Add this
[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信
Tailwind CSSで任意のメディアクエリを指定する Tailwind CSSでは簡単にメディアクエリの指定が可能です。 2023年11月 2日 00:40 カテゴリー CSS Tailwind CSSでdisabled Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。 2023年10月19日 15:32 カテゴリー CSS Vue.jsでコンポーネントの要素をpropsによって切り替える Vue.jsでボタンコンポーネントなどを作成する場合、ユースケースに応じてHTMLの実体をa要素とbutton要素と切り替えたいケースというのが発生します。 2023年9月15日 11:18 カテゴリー JavaScript Nuxt3でESLintの設定をする 案件でNuxt3のESLint設定をする
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
遅延ロードした画像をGoogleにインデックスさせる方法 - Qiita
遅延ロードは画像SEOに向かない？ 鈴木 謙一さんのブログによると「Lazy Load（遅延ロード）」された画像はGooglebotに認識されない可能性がある、とのこと。 Lazy LoadはSEOに不向き？ Lazy Loadで表示する画像をGooglebotは認識できないことがある | 海外SEO情報ブログ 画像の遅延ロードとは よくある遅延ロードは、透過PNGなどのダミー画像やローディング画像などを画像パスに設定します。そしてユーザーが画像のある位置までスクロールして初めて画像が読み込まれます。jQueryのプラグインなどでも多くの種類がありますが、やっていることは概ね変わりません。 <img src="img/dummy.png" data-original="img/01.png" alt="" width="800" height="100" class="lazy"> <sc
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
tabtab.be
GitHub - ninton/jquery.jpostal.js: 郵便番号から住所入力するjQueryプラグイン
