JavaScript【疑似クラス】nth-childとnth-of-typeの違いを徹底検証！
フロントエンドエンジニアやコーダーが結構おざなりにしているnth-childとnth-of-typeの違いを解説します。知人の中にも「必要になったら毎回ググってる」人が多く、あまりきちんと理解しきれてないことがよくあります。 今回の目的は、...
吉村 ケンイチ
JavaScript
SEOサーチコンソールで複数のキーワード（クエリ）でフィルターをかける方法。「または（or）」の利用法。
Google Search Console、いわゆる「サチコ」でキーワードを複数でフィルタリングするにはひと手間かける必要があります。 単純に「インスタ」という単語を含むだけで良ければ、「次を含むクエリ」ボタンを使ってサクサクできますが、こ...
JavaScriptJavaScriptの予約語一覧
初心者をターゲットとしてこの記事を下記ますが、JavaScriptに慣れてきた、もしくはJavaScriptは空気のような存在だ、というかたも今一度確認しておいた方が良いかもしれません。 予約語とは定数や変数や関数・クラスの名前に利用出来な...
業務効率化Google Chromeのデベロッパーツール搭載のエレメント検索機能が便利すぎる件～セレクタ検索、xPath検索
Webページ内で複雑なセレクタがどの要素に当たるのかが一発でわかる便利な検索機能のご紹介です。 普通に検索窓として「class="nantoka"」や「src="/images」のような文字列を検索するのにも使えるのですが、実はここにはCS...
JavaScriptslick.js（カルーセルスライダー）の要素をスマホでピンチイン・拡大したい場合
slickスライダーを使用しているとスマホでピンチイン（拡大）出来なくて困ることがあります。 以下のサンプルはピンチイン出来ないままの状態です。 jQuery(function($){ $('.slider-01').slick({ cen...
JavaScript【2022, 2023年】JavaScript入門ガイド～初心者のためのポイント解説
JavaScriptに興味を持ってこのページをご覧になっている方は、HTMLは理解できたけどJavaScriptが分からない、もしくはデザイナーだけどプログラミングを始めてみたい、といったような初心者さんだと思います。 はじめに言っておくと...
JavaScriptSwiperの使い方とサンプル！動かない時のチェック項目も！【2022年 JavaScript】
Swiperとは 今最もメジャーなカルーセルスライダーのプラグインモジュールであるSwiper（公式：）について、読み込みから実装、完成形のサンプルをまとめてみました。 カルーセルスライダーといえば、Slick.jsやOwlCarousel...
JavaScript2022年、今さら要素をタイル状に配置するmasonry.jsの使い方・レイアウトサンプル
かなり前にNHK関連のWebサイトが起用して話題になったjQueryプラグインのmasonry.jsですが、最近グリッドレイアウトを利用する必要がありそうな気配なので、おさらいを兼ねてmasonry.jsについてまとめました。 早速maso...
JavaScriptJavaScriptを使ってクロスドメインの埋め込みiframeを更新（リロード）する方法
iframeはブラウザの仕様上、クロスドメイン（呼び出すHTMLが自分のドメイン上に無いこと）の場合にはjQueryでもJavaScriptでも操作が出来ません。 ただ、iframeを更新したい時にはちょっぴりイレギュラーな方法でリロードさ...
JavaScriptjQueryにおけるeach()文とは？基本的なループの使い方と注意点
※JavaScriptのforEach()については『JavaScriptにおけるforEach()とは？基本的なループの使い方と注意点』をご参照ください。 配列の内容を関数で処理する際に、jQueryではeach()を、プレーンなJava...
JavaScriptJavaScript、jQueryでブラウザのタブがアクティブ（非アクティブ）になったか判別/検知する方法
通常のサイト、いわゆるホームページを作成するときにはあまり意識しないですが、Webアプリケーションやブラウザ駆動のアプリケーションを作る時には意外と知っておく必要があります。 まずは、JavaScript（jQuery含む）ではブラウザで現...
JavaScriptIE（InternetExplorer）のサポート終了から生まれるメリット5選！～フロントエンドエンジニアの観点からJavaScriptを考える
2022年6月15日、それは「お疲れ様」と同時に「ヨッシャー！」となる不思議な日。かのInternetExplorerが遂にサポート終了となりました。エンジニア、Webデザイナ、コーダー、プログラマの皆さん、Web業界にかかわるすべての皆さ...
JavaScript【JavaScript】イベントにおけるバブリング（bubbling）とは？挙動と、停止する方法
JavaScript中級者ともなると、バブリングという言葉を耳にしたことはあるはずです。文字通り英語では「Bubbling」と書き、泡が水面まで登っていく様子を模したプログラム用語です。 悩見坂 楓 バブリングってあれか、MJが飼ってたおさ...
JavaScript【意外と知らない】jQuery.fn.on()の引数にドットを用いて名前空間を表現する方法
廃れそうで廃れないjQueryですが、まだまだ知らないことが多かったりしませんか？？今回はjQuery.fn.on()のイベントに名前空間を付けて管理できるという少々上級者向きな内容になります。 悩見坂 楓 名前空間って何よ、ネカフェの店名...
JavaScriptJavaScriptでブラウザのsessionに値を格納・抽出（取得）・削除する方法
session操作に関する構文 // session 格納 window.sessionStorage.setItem(,); // session VALUEの取得 window.sessionStorage.getItem(); // ...