Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー

こんにちは、ライターのマサトです！ 今回は、jQueryで効率よく親要素を取得することができる「closest()」メソッドについて学習していきましょう！ この記事では、 ・「closest」とは？ ・「closest」の使い方 という基本的な内容から、 ・「tr」を使ったTable要素の取得方法 ・「closest」の戻り値 ・「closest」と「parent」の違い ・「closest」と「find」の違い などの応用的な使い方に関しても解説していきます。 この記事で、jQueryによる「closest()」をしっかり学習して自分のスキルアップを目指しましょう！ 「closest」とは？ それでは、まず最初に「closest()」メソッドについての基本的な知識から勉強を進めていきましょう！ 「closest()」は、基本的に親要素を取得することができるメソッドです。 ただし、検索性と

最初に attrとpropの使い分けがわからないと言われたので、誰でも使い分けができるようになる一覧を作りました。 基本的にはpropで取得できるものはpropで、そうじゃないものはattrで、と思っていたのですが、data-*やvalueまでそれで取得していたので、思ったよりもが根が深いなと思った次第です。 （追記）data属性に対する扱いについて data-*属性には、用途が2種類あります。 HTML5としてのカスタム属性（とそれを利用した関連技術） jQueryのdata()メソッドのための初期値 前者はそれを利用した有名どころではBootstrap（TwitterBootstrap）がなどがありますが、 CSSの属性セレクタとしても使えるので、別にBootstrapに限った話ではなく、普通に使用している人もいるかと思います。 問題は後者の方で、ここで「初期値」と書いたり、追記前の記

最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde

jQueryのコードといえば、$(document).ready(function() {}で書くのがお決まり。でもそのコードの書き方はもう古いかもしれません。 jQueryでreadyメソッドはDOMが完全にロードされたタイミングでコードを実行するように実装されていました。このメソッドはすべてのDOM要素が利用可能になった時点で所定の関数を実行するので、要素へ確実にアクセスしたり操作したりできます。 jQuery 3.0がリリースされるまでは、次のように無名関数で使うのが一般的でした。 $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0での「ready()」メソッドの変更 jQuery 3.0のリリースまでは、readyメソッドを呼び出す方法はいくつかありました。 document要素

見栄え良く、使いやすいフォーム作りに役立つ、便利なセレクトボックス系jQueryプラグインのまとめ。現在のメンテナンス状態まで徹底調査しました。 誰もがselect要素がデフォルトのスタイルで良いと思っているわけではありません。スタイルの見え方をコントロールしたい（複数のブラウザーやデバイスで一貫性を保ちたい）と考えたり、はじめからサポートされていない追加機能が欲しいと考える人もいるかもしれません。 幸い、簡単にそうしたことができるすばらしいjQueryのプラグインはたくさんあります。 次のプロジェクトに組み込める、すばらしいプラグインを厳選して紹介します。オプション、メソッド、イベントなどにより自由自在に設定を変えられるプラグインもあれば、スタイリング変更や、使いやすさに配慮し単にselect要素を置き換えるものもあります。 Chosen Chosenは拡張性のあるプラグインで、sele

せっかく WordPress を使っているので、ギミック的な JavaScript コードの紹介をするときは WordPress ですぐに使える形がしたいなと思い　body の最下部、つまり、 ・・・ <script> //ここに挿入 </script> </body> </html>と functions.php から インラインの JavaScript コードを挿入できる方法を考えました。直接メインのテーマを編集することなく、functions.php の編集だけで入れられる事で利便性が増すのではないかと思います。 なぜ head ではなく body 最下部なのかhead ではなく body の最下部に JavaScript コードを挿入することの利点は、Web ページの描画を高速化することです。昔は head 要素に script タグを使って書いてあげることが主流でしたが、最近の流

注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

例えば、以下のようなレイアウトのPCサイトがあったとき、これをレスポンシブ化してスマホ対応する場合、あなたならどうやって対応しますか？ 以下のようにコーディングされていれば、contentとsidebarの横幅を広げてワンカラムにすることですんなりスマホに最適化できますので、特に迷うことはないと思います。 <div class="content"> メインコンテンツ </div> <div class="sidebar"> サイドバー </div> 問題は以下のパターンです。左サイドバーなので、以下のようにコーディングされていることが多いと思います。 <div class="sidebar"> サイドバー </div> <div class="content"> メインコンテンツ </div> これをCSSで回り込みさせてレイアウトするのが王道かと思います。 .sidebar{ float

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr

前回の「GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法 」に端を発してjQueryを使って外部のJavaScriptのソースを読み込む際の様々なやり方の検証をしてみる。 jQueryのappend()を使ってタグを追加できますのでこれでscriptタグを追加してみます。 <script> $(document).ready(function(){ var script_tag = document.createElement("script"); script_tag.type = "text/javascript"; script_tag.src = "hoge.js"; script_tag.charset = "utf-8"; $("body").append(script_tag); }) </script> function foo() { a

今回は、jQueryでサイドバーをスクロールに合わせて追尾するスクリプトをご紹介したいと思います。 webページを下にスクロールしていくと、サイドが空白になっていく場合などがあると思います そんな時にこちらのスクリプトを設置すれば、追尾させたい要素をスクロールに合わせて追尾させることが可能です。 スクロールに追尾させるのは、賛否両論あるとは思いますが、サイトの種類などにもよると思いますが、僕は使われていない要素を有効に使えるスクリプトなどで良いとは思います。 下記のサイトで紹介されていて初心者の方でもコピペで利用できると思うのでご紹介したいと思います。 最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました！ 僕の方でも動作デモサイトをご用意していますので、是非ご覧くだださい。 動作デモサイト jQuery本体の読み込み まずは、jQueryを本体を読み込みます。

また会いましたな！ スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ 先日、ついにWii UとSplatoonをゲットしました。 そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！ 今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。 前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。 また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。 デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。 よろしくお願いします。 PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作って

色々なWEBサイトを見ていてページをスクロールしていくと、ブラウザの画面上に表示されたタイミングで画像や要素が出現したりなど、様々なイベントを発生しているサイトを見ることがあります。 今回はある特定の要素が画面に現れたタイミングで処理を行うことができるjQueryのプラグイン「jquery.inview」をご紹介します。「jquery.inview」を使用すると要素が見えたタイミングでイベントを発生することができるので動きのあるページを作成することが可能になります。 ランディングページなどで注目させたい箇所やアピールしたい箇所に動きをつけて、閲覧者に興味を惹かせることができるかもしれませんね。 「jquery.inview」で画面に表示された時に処理を実行 今回は、指定した要素が画面に表示されたタイミングでフェードインして要素を出現させる方法を記述します。 下記のページから「jquery.

2014.12.03 超簡単！フォームをリアルタイムで入力チェックする：jQuery-Validation-Engine ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、リアルタイムで入力チェックが出来るようになっていますか？リアルタイムチェックを導入していないせいで、入力完了率を下げてお客様を逃していませんか？ リアルタイムチェックをまだ導入されていない場合は、「jQuery Validation Engine」を導入しましょう！「jQuery Validation Engine」はお客様の入力をリアルタイムでチェックしてくれるので、入力エラーを事前に防ぎ、それが入力完了率やコンバージョン率の向上に繋がります。「入力完了率なんてそんなに低くないでしょ」と思われるかもしれませんが、驚くことにフォームの入力完了率は業界別に見るフォーム入力完了率データがす

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード Footable (v2) レスポンシブ対応テーブル ソート フィルタ ページネーション など スクリプト <link href= "css/footable.core.min.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="js/footable.js" type="text/javascript"></script> スタイルのテーマが用意されています。standaloneもしくはmetroをインクルードして下さい。 <!-- テーマスタイル --> <l

「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの

ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。