jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
nurse-colors.jp - このウェブサイトは販売用です！ - nurse colors リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応
株式会社オンズ 開発ブログ 【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you'll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布され
スマホのドロワーメニューに使える【Slidebars】使い方 | Glow-Factory
今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。
レスポンシブに対応した水平スライドアウトメニューの実装方法 | Glow-Factory
今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した
[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法
プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。 少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。 ヒントになったのは少し前に話題になったこちらの記事「これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」 サンプルデモ だいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました
![[jQuery] レスポンシブ対応でないギャラリーを jQuery を使って簡単にレスポンシブ対応にする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/1bc31d5328616d15d300228a5bd78f6f80142471/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2015%2F05%2FResponsive.jpg)
WordPress記事の一覧を出力する簡単なAPIを作成してみる | アド企画 制作部
Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/1/ukgadokikaku/web/adokikaku.com/dev.adokikaku.com/wp-includes/formatting.php on line 4382 Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/1/ukgadokikaku/web/adokikaku.com/dev.adokikaku.com/wp-includes/formatting.php on line 4382 Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users
[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="jquery.pwstabs-1.2.0.js"></script> </head> Step 2: HTML 各コンテンツをdiv要素で配置し、ラッパーで内包します。 タブはスクリプトで実装されるので、必要ありません。 <div
![[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64a904158ec2baa31b10249a1ba5d80abb96b8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012601.png)
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグイン
jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグインを公開します。 １．機能 ページのスクロールで右下に「戻る」を示すアイコンを表示します。 また、フッター部分が出現するとアイコンはフッターに固定されてスクロールします。 下記にサンプルを用意しました。 サンプル サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.pagetTop.js」にリネームしてください。 jquery.pageTop_0.0.1.js 以下、設定方法です。 ３．HTML body開始タグ直後に下記のdiv要素を追加します。 <div id="relative"> また、トップに戻るためのリンクをbody終了タグ直前に次のよう
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
軽快で美しいページ遷移を追加するjquery.smoothState.js - Webクリエイターズニュース
後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、WordPressの勉強会を主催したり、Webやデザイン系のセミナーで登壇しています。すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子（あんこ）好き。 よつばデザイン よつば手帖（ブログ） CO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://demo.smarttutorials.net/google-address-autocomplete-api/
Loading...
WordPressのサイト上で簡単に並び替え＆絞り込みする方法 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
星5つ！ 評価を表示・入力できるスター表示プラグインRateIt
http://www.hp-stylelink.com/news/2015/01/20150123.php
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
WordPress推しブログ - ねたわん
