どうも、ジャングルオーシャンのミケです。 今日は横並び要素の高さが揃えられるmatchHeight.jsのご紹介だよ！ なぜ高さを揃えるの？ Webサイトを制作していると、ナビゲーションなどの要素を横に並べて表示したい時があるよね。 ただ、横に並べた時って要素の中身の多さによって要素の高さも変わってくるから見栄えが悪くなっちゃうよね。 こんな感じで。 See the Pen ExjeZWm by mike (@michelangelojo) on CodePen. これを、一番高さがある要素に合わせて、自動で揃えて、見栄えをよくしてくれるのが「matchHeight.js」なんだ！ 簡単に実装できるよ。 それじゃ記述方法をみていこう！ 必要なファイルの用意 ファイルのダウンロード まずはjQueryの設置をするよ！ jQueryの公式サイトからファイルをダウンロードしてね。 jQueryの
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
append ・指定した要素の最後に、引数で指定した内容を追加。 $('#box').append('<div>...</div>'); appendTo ・指定した内容を、引数で指定した要素の最後に追加する。 $('<div>...</div>').appendTo('#box'); prepend ・指定した要素の最初に、引数で指定した内容を追加。 $('#box').prepend('<div>...</div>'); prependTo ・指定した内容を、引数で指定した要素の最初に追加する。 $('<div>...</div>').prependTo('#box'); after ・指定した要素の直後に、引数で指定した内容を追加する。 $('#box').after('<div>...</div>'); insertAfter ・指定した内容を、引数で指定した要素の直後に追加する。
jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 KB そして、Selectorのファイルサイズは、1/4以下！ selector.js 65 KB selector.min.js 17 KB もちろん、jQueryの機能すべてが利用できるのではなく、オブジェクトやセレクタや関数に限られています。 サポートされているjQueryの機能 サポートされているjQueryオブジェクト $ サポートされているjQueryセレクタ add addClass
obj に含まれるテキストノードをすべて取得したいときはこう書く。 obj.find("*").andSelf().contents().not("[nodeType=1]") find("*") で子孫の要素ノードを取得 andSelf() で obj 自体も含める contents() はテキストノードを含むすべての子要素を取得 not("[nodeType=1]") で要素ノードを取り除く
こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav サイトへ 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下になったとき『.slicknav_menu』の要素として複製してくれます。 このおかげで要素は1つなのに『PC表示の時』『スマートフォン表示の時』のそれぞれ見た目に対して、かなり厳密に、自由に設定を行うことができます。（分かり辛くてすみません） ごちゃごちゃと説明してしまいましたが、設定などはいたってシンプル
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
Auto-Hiding Navigation A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when t
はじめに 今回は、Ajax、Deferred機能などを中心に紹介しましょう。 また、先日7月7日に、jQuery 3.1.0がリリースされましたので、そちらの変更点も併せてお伝えします。 対象読者 Webアプリケーション開発に興味があり、jQueryを知っている方 Deferred機能 $.Deferredは、jQuery 1.5から導入された非同期処理のための標準モジュールです。ここでは、少し$.Deferredの基本的なところをおさらいしてから、jQuery 3での変更点を解説することにしましょう。 なお、jQuery 3での$.Deferredでは、破壊的な変更が3つあり、そのうち2つには新機能が含まれています。 $.Deferredとは Deferredとは、英語で、遅延、据え置きされた、などの意味 で、$.Deferredは、Promisesという概念を元に設計されたオブジェクト
jQuery 3.0 is now released! This version has been in the works since October 2014. We set out to create a slimmer, faster version of jQuery (with backwards compatibility in mind). We’ve removed all of the old IE workarounds and taken advantage of some of the more modern web APIs where it made sense. It is a continuation of the 2.x branch, but with a few breaking changes that we felt were long over
#概要 いいなとおもったjsプラグイン。 多くのライブラリはｊQuery, Bootstrapの使用を前提としています。 これからも見つかったら追記する予定。 #基本 ##jQuery 公式 git ##Bootstrap 公式 git #機能 ##jQuery Validation Plugin バリデーションするプラグイン。 公式 git data-attributeでルールを管理したい場合 ##PJAX (defunkt) 非同期通信でページ遷移するプラグイン。 公式 git 日本語での解説はこちら #デザイン ##AdminLTE Control Panel Template 管理画面用のプラグイン。 公式 git ##Material Design Lite マテリアルデザイン。Google製のプラグイン。 公式 git #要素 ##Google chart グラフを作成するGo
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 絵文字はここ数年で一気に使われるようになってきました。チャットサービスはもちろん、コメントで使われたり、iOS/Androidのようにキーボードの中で提供されるようにもなっています。コミュニケーションの基本にさえなっていると言えそうです。 そんな絵文字をWeb上で使いやすくするのがEmojiOne Areaです。ぜひ自分のサイトに組み込んでみましょう。 EmojiOne Areaの使い方 デモです。テキストエリア、テキストボックスに絵文字アイコンが表示できます。 右上のアイコンをタップすると一覧が出ますので、ここからアイコンを選択できます。 オートコンプリートもあります。 EmojiOne Areaでは自動補完はしないようにしたり、特定のカテゴリを非表示するようなオプションも指定で
はてなブログって基本的にページの読み込みが遅い上に、カスタマイズのためにjQueryを利用するとさらに速度が遅くなってしまいます。うちのブログはいじりすぎて遅い…。 少しでもjQueryの読み込みが速くなるようにコードを変えてみました。 はてなブログではシェアボタン、グローバルナビ、サイドバーの固定などのカスタマイズでjQueryを利用している人は多いはず。 こんな感じで読み込んでる人がほとんどだと思います。 デザイン→カスタマイズの「ヘッダー」か「フッター」のどこかにこのコードがあるかと。 私は、以下のように書き換えています。 こうすると多少は読み込みが速くなります。 注意して欲しいのは、私のブログでは問題なく動作していますが、他の人のコードでも大丈夫という保証はないということです。 おそらく問題なく動作するはずですが、ご利用は自己責任でお願いします。劇的に速くなるというモノではないので
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 本を読んでいると、左右に余白があって、必要に応じて単語の説明が記載されていることがあります。注釈を本の最後にまとめて載せているのに比べると分かりやすく、読みやすいのではないでしょうか。 そんな効果をWeb上で実現してくれるのがmarginotesです。Webらしく、よりインタラクティブになっています。 marginotesの使い方 marginotesは次のように指定します。descという要素を使います。 <span desc="The rainiest place in Europe. Probably. Maybe.">Brión</span> 注釈はマウスオーバーで表示されます。リンクとは別で下線が入っている部分が説明対象です。 右側に出すこともできます。 marginote
Emoji One Area Simple jQuery WYSIWYG editor with emojione smiles for use in replies and comments View on GitHub Download .zip Download .tar.gz Emoji One Area Emojione-area is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG-like editor with ability to use Emojione emojis. The end result is a secure text/plain in which the image emojis will be replaced with th
フォーム入力を楽にするフリガナ自動入力 ECサイトで買い物や問い合わせ、会員登録などのフォーム入力をする際に、「フリガナ」の入力が必要になる場合があります。 出来るだけフォーム入力の手間をなくし、離脱率を減らすよう工夫が必要ですが、今回はフォーム入力をした際に名前の漢字に合わせたフリガナを自動で入力するjQueryプラグインをご紹介します。 名前を入力すればフリガナを自動入力できるjquery.autoKana.js 実装にはjquery.autoKana.jsというプラグインを使用します。 ダウンロードは以下より。 GitHub – harisenbon/autokana: Library for automatically rendering Furigana for inputted Japanese Text 設置方法は以下の通りです。 ①jQueryライブラリを読み込み まずはj
jQuery Editable Select Example 編集可能でインクリメンタル検索も出来るselect実装jQueryプラグイン「Editable Select」 自分で内容を入力できつつ、既存値からも選択できるselect実装が出来ます。 関連エントリ 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」 美しいUIの月間イベントカレンダー実装jQueryプラグイン「Monthly.js」 アドブロック判別用jQueryプラグイン「Adi.js」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
