$(window).resize()は使わず、window.matchMediaを使って、jsでのメディアクエリー的な事をしてみよう的なお話
cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブ
第2回 Webセキュリティのおさらい その2 XSS | gihyo.jp
前回は、Webアプリケーションにおける受動的攻撃の代表例として、以下の4つを挙げました。 クロスサイトスクリプティング（XSS） クロスサイトリクエストフォージェリ（CSRF） オープンリダイレクト クリックジャッキング 今回は、これらのうち、XSSについてより掘り下げて解説していきます。 XSSはどのようにして引き起こされるのか XSSとは、動的にHTMLを生成するWebアプリケーションにおいて、データをエスケープせずに出力しているために、生成されるHTMLに攻撃者の作成したHTML断片やJavaScriptコードが埋め込まれてしまう脆弱性です。 たとえば、検索画面にてユーザーが「HTML5」という文字列を入力すると、http://example.jp/search?q=HTML5というURLで検索結果が表示されるWebアプリケーションがあったとしましょう。検索結果の画面では、ユーザーが
jQueryでチェックボックスの状態をうまく取れない、設定出来ないときは、attr()ではなくprop()を使ってね。（JavaScriptおれおれAdvent Calendar 2013 – 02日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる（こっちを使う） 仕組み .attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
2冊目の著書 – やさしくはじめる WebデザイナーのためのjQueryの学校 – あとがき
この度、マイナビさんから、私にとって2冊目の著書 「やさしくはじめる WebデザイナーのためのjQuery学校」が発売になりました！ この本は「HTML + CSS は分かるけど、jQuery ってよく分からない …」という人に読んでいただけたら … と思って書きました。jQuery って何？というところから始まって、基本的な使い方、コードの書き方など、基本的なことはもちろん、初心者の頃につまづきそうなポイントに重点を置きました。 1. 監修：西畑一馬さん、イラスト：狭間句美さん 今回 jQuery の本を執筆するにあたって、Web制作の現場で使う jQueryデザイン入門 の著者でもある、to-R の西畑一馬さんに監修していただきました。 私からしてみたら、西畑さんは jQuery の神様みたいな存在 … そんな人に監修していただけて、私自身もとても勉強になりましたし、読者の皆さんにお届
デザイン2案、文言3案どちらがいいかはユーザーに決めてもらうA/Bテストが簡単に実施できるスクリプト -ABalytics.js
バナー広告2案どちらがよいだろう？ サインアップのボタンの文言3案はどれが効果が高い？ などGoogle Analyticsを使ってコンバージョンレートを簡単に測定できるスクリプトを紹介します。 ABalytics.js -GitHub ABalytics.jsの特徴 ABalytics.jsの使い方 ABalytics.jsの特徴 ABalytics.jsは他のスクリプトに依存せずに動作するJavaScriptで、クライアントサイドでコードを記述するだけで、Google Analyticsを使ったA/Bテストを簡単に実施できます。 サーバーサイドには何も設置する必要はありません。 設置が簡単！ 作業はクライアントサイドだけです。 サーバーサイドの準備は何も必要ありません。 データは、Google Analyticsに保存されます。 エレメントのclassを加えるだけで、複数のパターンをテ
HugeDomains.com
Captcha security check actyway.com is for sale Please prove you're not a robot View Price Processing
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
【初心者向け】WEBクリエイターになるための入門7レッスン | DECONCEPTER
無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する敷居を大きく下げてくれている。今日はこれからWEBページを作りたいという方やWEBディレクターをやっているが作り方を実はよく知らないという方が最低限押さえておきたいレッスンをピックアップする。 HTML これが書けなきゃ始まらない。HTMLは全く難しいものではありません。整形した文書をWordで作ったことがある方は多いと思うが、HTMLはインターネットに整形した文書を公開するための言語だ。 WEB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nemousu.com