業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
leanModal
Strengths perfect for hidden page content uber light at just over 1kb (minified) flexible width & height image free multiple instances on one page great for login, sign up & alert panels, etc. How To Use Step 1: together with JQuery, include jquery.leanModal.min.js in your page, thusly: <script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script> Step 2: rather than call another
You-Dont-Need-jQuery - jQueryを使わない書き方教えます
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward outbox_alt Generative AI arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia
「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう！～ ①環境構築＆サーバ側の実装編 ～ - Tech-Sketch
HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。 本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。 まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。 はじめに 「スマートフォンやタブレット用のWebアプリを作りたい！！...でも、なにで作ればいいのかわからない。。」 こんなこと思ったことありませんか？ 最近は、HTML5 + JavaScript +
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
[JAZUG青森 今から始めるMicrosoft Azure ～すぐに使えるクラウド活用術～ - Japan Azure User Group | Doorkeeper](https://jazug.doorkeeper.jp/events/20654) で話しました。 各スライドのサンプルコードは以下にて公開しています。 https://github.com/nnasaki/JAZUG-AOMORI/pulls?q=is%3Apr+is%3Aclosed （APIキー込みなので、皆さんチェックアウトしてすぐ動くはず） また、作ったアプリは皆さんのAndroidにインストールして動かせますのでお試しください。 https://dply.me/3qkwyp
クックパッドでのスマートフォン開発
Visual Summary of Egocentric Photostreams by Representative KeyframesMarc Bolaños Solà
Pinterest風のデザイン 「jQuery Masonry」を試してみた
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って試してみました。 基本的には公式サイトに載ってることを自分なりにまとめた内容となっております。 ダウンロードはこちらから JSなどの必要なファイルは以下からダウンロードします。 jQuery Masonry 設置の仕方 設置も特に難しいことはなくJavaScript読み込んでCSSで調整する感じです。 サンプルは以下から サンプルサイト JavaScriptの記述例 <script type="text/javascript" src="https://ajax.googleapis.com/ajax
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編
以前にご紹介した 「jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト」 それを使って、今行っている案件をこなそうと思ったら、 ３つ程改良したい部分が出てきた。 一つ目はあらかじめ文字を出現させていて、 そのままsubmitされた場合、デフォルトの文字のままだった場合、 それを削除するというもの。 二つ目は、あらかじめHTMLの段階でvalueをセットしていた場合や、 以前入力していたのをあらかじめ表示させておくなどをした場合、 デフォルトの文字を表示させないようにするというもの。 ３つめは単純、フォーカスがあった部分の 背景の色を変えて、入力している部分がわかるようにするもの。 以上３点を加えたものを作ってみた。 ※2011/06/19 add jQuery1.2～1.2.6までは今回の方法でも動作しますが、1.3以降のバージョンでは、ボタンクリック時
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
Web制作をちょっとだけ楽にするjQueryプラグイン 「laquu.js」 | webox blog
知り合いが便利そうなものを作っていたのでご紹介します。 Web制作時によく使う機能をひとまとめにしたjQueryプラグインです。 読み込むjsのファイルが増えてきたり、その都度追加していくのが面倒だなと感じてきていたのでこういうのは非常に助かりますね。 Laquu.js 個人的によく使う機能 アコーディオン ドロップダウン ブランク XHTMLで非推奨とされているtarget属性の代替となる機能です。 個人的にはJSで実装するなら非推奨でも入れてしまいますが… ちなみにHTML5ではtarget属性は復活しています。 スクローラー ページ内リンクのスムーススクロールを実装する機能です。 スクロール2ビュー スクロールを検知して指定要素を表示/非表示してくれる機能です。 イメージオーバー そのうちプリロードしてくれるようにするそうです。 ツールチップ コナミコマンド ネタ機
WordPressで自作のjQueryスクリプトを実行する方法
WordPressで自作のjQueryスクリプトを実行する方法 ただいま大人気のjQueryですが、Wordpressで使用する場合いろいろお決まりごとがあるようです。 なので今回はWordpressでjQueryスクリプトを書くときの注意事項をメモっておきます。 投稿日2010年07月30日 更新日2011年04月03日 通常のHTMLでのjQueryの使用 Wordpressを使用していない静的HTMLでのjQueryの使用方法から見ていきましょう。 例えば、h2を消したいなんて場合こんな感じになりますよね。 JavaScript <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("h2
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
汝の隣人のブログを愛せよ | LOVELOG
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
IBM Developer
