MdN Design｜総合情報サイト
第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Fresh Usefu
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
[JavaScript] JKL.Calender
Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。 JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScr
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ
ハイブリッドアプリ開発でも利用出来る、JavaScript＆CSSのアニメーションライブラリを集めてみました。 最近ではCanvasやWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイントにまとめてみました。 jQueryのanimation代替え系 Velocity.js jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。
驚くほど速くする！高速化9つのポイント | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
utf-8でコーディングした際に起こる、mailto関連のSubjectやbodyの文字化け | Melanges
そのままですけど、 <a href="mailto:info@sample.com?subject=問い合わせ">info@sample.com</a> って書く場合がほどほどにございます。もちろんクライアントからの要望によりけりでしょうけど。utf-8でコーディングしていると、Outlook Express（以下OE）だとSubjectが文字化けしてしまいます。 MacのSafariだけはMailを起動すると文字化けせずなのですが、同じMacでIE5を使うと文字化けしちゃったりします。どうも、ブラウザがどこからどこまでをどのエンコードで受け渡すのか確立されていないのが原因なのかなぁと思ってみたり。 ネットの文献を探してみたけど、これといって有益なソースは見つかりませんでしたが、自力で解決してみたのでオープンにしてみます。 要は、subject以下をOEに受け渡したときに変換が出来ずに困っ
A personal exploration of design, technology, & rebellion.
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
レスポンシブ対応サイトを作成する超軽量のスクリプト -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ライブラリ『JustGage』 | 100SHIKI
いつか使いそうなのでメモ的にエントリー。 JavaScriptでアニメーションするゲージを作れるのがJustGageだ。 ちょっとしたダッシュボードなどに使えていいのではなかろうか。 もちろん色やアニメーション速度もカスタマイズすることができる。 マークアップも簡単なので覚えておいてもいいですな。
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『スマホ画面サイズや向きを動的に取得してやんよ!!!』デモページ
jQueryを利用したDOM操作 要素の追加メソッドまとめ - Qiita
連載インデックス「iPhoneで動かす業務用Webアプリ開発入門」 - ＠IT
IDEA * IDEA
CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
