アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
知ってた？JavaScriptでメディアクエリを利用するちょっとしたテクニック
Web制作ですっかり定番となったメディアクエリを使ったレスポンシブ Webデザイン。JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。 テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイルシートを適用しています。 以下の例はcssbasic.cssをすべてのデバイスに適用して、水平方向の画面幅が500ピクセル以上なら、csswide.cssも適応します。 <link rel="stylesheet" media="all" href="cssbasic.css" /> <link rel="stylesheet" media="(min-width: 500px)" href="
$(window).resize()は使わず、window.matchMediaを使って、jsでのメディアクエリー的な事をしてみよう的なお話
cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu
jQueryのIEが使えるバージョンとバージョンアップしても使えるようにする方法
jQueryもこの記事を書いている現在では3.1.1まで新しいバージョンがでています。 しかし新しいバージョンをすぐ使用しようとすると使えないプラグインが出てきたり、既存のコードが使えないこともあるので、なかなか変更するタイミングがなかったりします。 またブラウザの対応もバージョンによっては使えなかったりもしますよね。 そこで今回はjQueryのバージョンはどのIEのバージョンに対応しているのかと、jQueryのバージョンを上げたいけど既存のコードはどうすればいいのかというのを調べました。 それぞれのjQueryはどのIEまで対応しているか 現在は大きく分けると1系・2系・3系があります、ChromeやFirefoxなどのブラウザはあまり気にせずとも大丈夫なことが多いですが、肝心のIEの対応バージョンは以下になります。 1.X系はIE8以前 2.X系はIE9～ 3.X系もIE9～、性能向上
プログラムの中身を直感的なGUIで操作できるJavaScriptライブラリ「dat.gui」を使ってみた！ : うえぶはっく
みなさんは、上の画像みたいにパラメータをいじれるGUIを見たことがあるでしょうか？ いろいろネットを検索していると、たまに見かけたりするのですが、だいたい3D系のサンプルデモや物理演算のシミュレーションなどによく使われているようです。 実際に触ってみると意外に便利なライブラリで、プログラムの好きな箇所をGUIで表示させて、誰でも気軽にいじれるようにできるのは面白いと思います。 そこで今回は、この「dat.gui」の簡単な使い方などをまとめておきたいと思います。 使い方！ まず、簡単なサンプルデモを作りながら、基本的な使い方を見ていくことにします。 今回は、「div要素」で四角のボックスを作り、これにCSSをGUIからコントロールしてみようと思います。 サンプルデモはこんな感じ！(スマホ対応してないので、できればPCブラウザ推奨です…) See the Pen http://codepen.
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
2冊目の著書 – やさしくはじめる WebデザイナーのためのjQueryの学校 – あとがき
この度、マイナビさんから、私にとって2冊目の著書 「やさしくはじめる WebデザイナーのためのjQuery学校」が発売になりました！ この本は「HTML + CSS は分かるけど、jQuery ってよく分からない …」という人に読んでいただけたら … と思って書きました。jQuery って何？というところから始まって、基本的な使い方、コードの書き方など、基本的なことはもちろん、初心者の頃につまづきそうなポイントに重点を置きました。 1. 監修：西畑一馬さん、イラスト：狭間句美さん 今回 jQuery の本を執筆するにあたって、Web制作の現場で使う jQueryデザイン入門 の著者でもある、to-R の西畑一馬さんに監修していただきました。 私からしてみたら、西畑さんは jQuery の神様みたいな存在 … そんな人に監修していただけて、私自身もとても勉強になりましたし、読者の皆さんにお届
JavaScriptから見たCSS。CSSを学ぶという事。（CSS おれおれ Advent Calendar 2012 – 24日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に！ JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！ というお話です。 なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！） あ、あとSVGやらも範囲外です。 断定的に申していても、常々例外はあるものです。 JavaScriptで出来る事、出来ない事 JavaScriptそれ自体が出来る事は、あ
[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
iOS6 のマップって不便って騒がれたけど、それほどでもないよね？…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書
![[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b62b4e0fd4ed08a00e42d880ceb27ae1f776b93/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fws_ps01.jpg)
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リロードさせた後、スクロール位置を復元 - グノシー
jqTyping
http://case-mobile-design.com/iphone-andoird%E5%90%91%E3%81%91%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%AEjquery%E5%B0%8F%E6%8A%80%E9%9B%86/