バニラなJavaScriptで複数項目対応の絞り込み検索スクリプトを書いてみた
仕組みとしては、対象外のアイテムに「d-none」というクラスを追加して非表示にしています。このクラス名は自由に変えられます。 既存のソースコードに組み込むときの注意点 絞り込み選択selectタグのname=”ABC”：絞り込み対象data-ABC 絞り込み選択optionタグのvalue=”XYZ”：絞り込み対象data-ABC=”XYZ” 全表示用のvalue値はallで統一する 例）地域で絞り込みたいとき <select class="js-filter" name="area"> <option value="all">全ての地域</option> <option value="東京">東京</option> </select> <div class="js-filter-item" data-area="東京">...</div> 関数呼び出しの最初の引数は「.」不要です。 m
クリックされた要素以外を非表示にする方法
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
skrollrでパララックスのランディングページを作ってみよう〜追記あり〜 – Freyja's Ramblings
2022.1.16 更新 皆さまこんにちは。 本日はskrollr再び！skrollrを使ってペラいちのランディングページを作ってみます。 まずはこちらにDEMOを作ってみましたのでご覧ください。 （※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m ) skrollrってなに？ パララックス（視差）効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。 skrollrをダウンロード skrollrの基本的な使い方は前回の記事をどうぞ。 ⚫︎パララックスが簡単に実装出来る！skrollrの使い方 ⚫︎skrollrを使ってシングルページのパララックスサイトを作ってみました スクロールで画像にパースペクティブ感を出す 今回は大きく分けてセクシ
パララックスが簡単に実装出来る！skrollrの使い方
2022.1.16 更新 皆さまこんにちは。 本日はパララックス(視差効果)が簡単に実装出来るskrollrというライブラリをを使ってみましたので、ご紹介しようと思います。 デモを作ってみましたので、こちらをご覧下さい。 skrollr.jsをダウンロードし、htmlファイルに読み込む まずGitHubからskrollr.jsをダウンロードします。 html側にはskrollr.min.jsファイルとjqueryを読み込ませます。 下のコードをhtmlのどこかにペースト、以上です。簡単ですね！ <script src="js/skrollr.min.js"></script> <script> var s = skrollr.init(); </script> デモではほぼ全てのdivにdata属性をつけて動かしています。 ポイントは、 data-○○=”ここに普通にcssを書く”色はrg
JavaScript - MDC
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
【翻訳記事】リバースエンジニアリング：1行のJavaScript
Alex Kras氏がブログで投稿した記事「Reverse Engineering One Line of JavaScript (Posted Jul 13, 2017)」を翻訳してご紹介しています。 なお、この記事は原著者の許諾を得て翻訳・掲載しています。
ひびしんプログラミング【公式】 | ZERO to ONE Program Training
副業はもちろん、転職や独立・起業、会社での昇進を考えたとき、「わからない」「知らない」では済ませられないプログラミングの基礎の基礎が1冊で学べます！未経験からスタートしたい人、IT超初心者だけど始めたい人、AIで無くなる仕事を見て不安になりたくない人へ、これからの未来のためにお役立て頂ければ幸いです。 まだお手元にお持ちでない方は、こちらから購入できます。 追加情報、よくある質問 本書をよりスムーズに簡単に読みながら手を動かしてもらうために、追加情報を提供しています(2019/11/23更新)。「上手く行かないな？」というとき、まずはこちらのページをご覧ください。解決方法が掲載されているかもしれません。 追加情報やQ&Aはこちら＞ 完成版コード&素材 このたびは『文系でもプログラミング副業で月10万円稼ぐ!』をお買い上げいただきましてありがとうございます。本書で解説しております完成版コード
［書籍連動］「ゲームで学ぶJavaScript入門 増補改訂版」物理エンジンの詳細解説
本記事は、書籍「ゲームで学ぶJavaScript入門 増補改訂版」用に作成した簡易2D物理エンジン「Tiny2D.js」の詳細解説です。Tiny2D.jsは角速度や質量は考慮しない、矩形と円しかサポートしないなど、物理エンジンと名乗るには僭越なほどシンプルなものですが、シンプルなだけに使い方も簡単で、修正も十分に可能です。「百聞は一見にしかず」です。まずはサンプルを実行してみて、どのような動きをするのか皆さん自身で確かめてみてください。 本書はブックインプレスより購入できます。
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
【jQuery入門】hide()でHTML要素を非表示・表示(show / toggle)する方法！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、jQueryで特定のHTML要素を簡単に非表示にすることができる「hide()」メソッドについて学習していきましょう！ この記事では、 ・「hide()」とは？ ・「hide()」の使い方 という基本的な内容から、 ・「hide()」のアニメーション ・表示・非表示の活用 などの応用的な使い方に関しても解説していきます。 この記事で、「hide()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！ 「hide()」とは？ それでは、まず最初に「hide()」メソッドについての基本的な知識を学習しましょう！ 「hide()」は、特定のHTML要素を非表示にすることが可能です。 また、単純に非表示にするだけでなくアニメーション効果を付与してゆっくり消えていくような演出も簡単に実現できるのが特徴です。 対象となるHTML要素は、テキスト・
【JavaScript入門】はじめてのDOM操作・取得まとめ！ | 侍エンジニアブログ
こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。 今回は、JavaScriptでHTMLを操作するために欠かせない「DOM」について学習をしていきましょう。DOMを学ぶには「ツリー構造」の基本や「イベント処理」などについて学習することも非常に重要になってきます。 そこでこの記事では、そもそもDOMとは何か？DOMの使い方は？という基本的な内容から学習を進めていき、さらに、 「DOM」とは？ それでは、まず最初に「DOM」について基本的な知識から学習を進めていきましょう！ 「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと言います。DOMの正式名称が「Document Object Model」と呼ばれることからも分かるように、HTML文書をオブジェクトデータのように考えます。 例えば、次のようなHTMLが
ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ
ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Ａ８タグの新トラッキング形式のタグの設置ができずに困っています。