どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとは アコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
日本語にも対応、行送りや一時停止、タイプスピードの緩急も調整できる、テキストを一文字ずつタイプライターのようにアニメーションで表示するjQueryのプラグインを紹介します。 行送りしてるとこ Typistの使い方 実装は3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 ※スタイルシートは特に必要ありません、デザインはオプションで設定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.typist.js"></script> Step 2: HTML テキストを表示するターミナルを配置します、p, div要素などで。 <p id="terminal">
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。 ezColumns デモ [ad#ad-2] ezColumnsの実装例 HTML p要素で実装したパラグラフをdiv要素で内包します。 <div id="groups"> <p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p> <p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
Twitterでつぶやいたツイートをあなたのブログやサイトに簡単に設置できるjQueryのプラグインを紹介します。 jTweetsAnywhere デモページ [ad#ad-2] jTweetsAnywhereの設置は簡単で、数行のスクリプトで自分のブログやサイトにツイートを設置することができます。 jTweetsAnywhereの主な特長 指定したユーザー（複数可）のツイートを表示。 ユーザーのリストからツイートを表示。 Twitterの検索の結果を表示（パラメータは全対応）。 @Anywhereに対応。 エンドレススクロールを使ったページングをサポート。 自動更新でリアルタイムにツイートを表示。 ツイートボックスのカスタマイズが可能。 Follow me ボタンの設置が可能。 ネイティブのリツイートをサポート。 ユーザーのプロフィールを表示。 ツイート内のリンクを検出し、自動でリンク化
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
便利そうだったのでメモ。GoogleMap をはじめ、様々な地図サービスのような ドラッグで移動したり、拡大縮小な地図 コンテンツを実装するJavaScriptライブラリ Polymapsのご紹介。地図には画像を使 い、マス目上に置いていくみたいです。 これは結構需要あるんじゃないでしょうか。地図系のJSライブラリです。既存サービスを使いたくない方はご検討になってみてはいかがでしょうか。 GoogleMapなどのようにドラッグで移動したり、縮小、拡大が可能です。地図はSVGデータをタイル状に置いて実装している感じ。オリジナリティある地図コンテンツも手軽に実装できそうですね。 地図は普通に画像が使用されています。フルスクリーンにすることも。 文字の中（といっても画像ですが）にMapを入れることも出来るみたいです。 デモも沢山用意されているのでぜひ触ってみてください。 なかなか便利そうですね。
MapBox | creating custom maps in the cloud GoogleMap風でクールな地図UIが作れるライブラリ「MapBox」が公開されています。 施設の案内や、ゲームの攻略サイトなんかでマップとかに適用すると便利に使えるかもしれません。 サイト上にはライブラリを使って実装されたサンプルがいくつか確認できますが、移動、拡大/縮小ボタンのUIがいい感じにデザインされてます。 複雑な処理もライブラリで楽に実現できちゃいますね。 関連エントリ GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 「Google Static Maps API」を使い携帯でGoogleマップを表示 Google Map APIでルート表示のjavascriptコード例
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
