脱jQueryã®ãŸã‚ã«ã—ãŸã“㨠- QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
プãƒã‚°ãƒ©ãƒ 組んã ã‚‰è² ã‘ï¼å®Ÿã¯HTML/CSSã ã‘ã§ã§ãã‚‹ã“ã¨2015å¤
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ã²ã‚‰ãŠ ゆã†ã¦ã‚“） === æ ªå¼ä¼šç¤¾ãƒ‡ã‚£ãƒ¼ã‚¼ãƒ Webエンジニア ## コミュニティ活動 - ç¦å²¡ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰å‹ã®ä¼š Fukuoka Frontend Frogs - ç¦å²¡ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### ç¦å²¡ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰å‹ã®ä¼š Fukuoka Frontend Frogs ### ç¦å²¡ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—勉強会 ### baserCMSユーザー会 「井ã®ä¸ã®è›™ã€ã«ã¯ãªã‚‰ãªã„よã†ã«ã¨é›†ã¾ã£ãŸ フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãŸã‚ã®ã‚³ãƒŸãƒ¥ãƒ‹ãƒ†ã‚£ã€‚ Webコーディング・アプリ開発ã®æ‚©ã‚ã‚‹è›™ãŸã¡ãŒ ãã®å ´ã§è©±é¡Œã‚’決ã‚ã¦ã€ã‚¢ãƒ³ã‚«ãƒ³ãƒ•ã‚¡ãƒ¬ãƒ³ã‚¹å½¢å¼ã§
selectã‚¿ã‚°ã®æ©Ÿèƒ½ã‚’大幅ã«å‘上ã•ã›ã‚‹ã€Œselectivityã€:phpspot開発日誌
selectivity selectã‚¿ã‚°ã®æ©Ÿèƒ½ã‚’大幅ã«å‘上ã•ã›ã‚‹ã€Œselectivityã€ã€‚ 機能ã ã‘ã§ãªãデザインもモダンã«ã—ã¦ãã‚Œã¾ã™ æ–‡å—ã§ãƒ•ã‚£ãƒ«ã‚¿ãƒ¼å¯èƒ½ãªselectボックス実装 階層化。ã“ã‚Œã¯ä¾¿åˆ© ajaxã«ã‚ˆã‚‹çµæžœã®å–å¾— 関連エントリ クールã§ãƒ¢ãƒ€ãƒ³ãªã‚³ãƒ³ã‚¿ã‚¯ãƒˆãƒ•ã‚©ãƒ¼ãƒ ã®ãƒ‡ãƒ¢ï¼†ã‚µãƒ³ãƒ—ルスクリプト リストをモダンãªå½¢ã§ã‚½ãƒ¼ãƒˆå¯èƒ½ã«ã™ã‚‹Javascript「Sortable〠１ページã®ãƒ•ãƒªãƒ¼ã§ãƒ¢ãƒ€ãƒ³ãªWEBデザインPSD20個ã¾ã¨ã‚ モダンãªUIã§ã‹ã£ã“ã„ã„サイトãŒä½œã‚Œã‚‹DBä¸è¦ã®CMS「Grav〠Materialデザインã®ãƒ¢ãƒ€ãƒ³ãªFEフレームワーク「Materializeã€
ã‹ã¤ã¦ã¯JavaScriptを利用ã—ã¦ã„ãŸã‚‚ã®ã®ã€ä»Šã§ã¯CSSã®ã¿ã§å®Ÿè£…ã§ãã‚‹10ã®å°æŠ€
2015å¹´3月18æ—¥ CSS 2011å¹´ã«ã€Œå°‘ã—ã®ã‚³ãƒ¼ãƒ‰ã§å®Ÿè£…å¯èƒ½ãª20ã®jQueryå°æŠ€é›†ã€ã¨ã„ã†è¨˜äº‹ã§æ•°ã€…ã®ä¾¿åˆ©ãªåˆ¶ä½œæŠ€ã‚’紹介ã—ãŸã®ã§ã™ãŒã€æ™‚ã¯æµã‚Œã€ä»Šã§ã¯CSSã®ã¿ã§è¡¨ç¾ã§ãã‚‹ã‚‚ã®ãŒå¤šããªã£ã¦ãã¾ã—ãŸã€‚ã¨ã„ã†äº‹ã§ä»Šå›žã¯ãã®è¨˜äº‹å†…ã§ç´¹ä»‹ã—ãŸæŠ€ã‚’ä¸å¿ƒã«ã€ã‹ã¤ã¦ã¯JavaScriptを利用ã—ã¦ã„ãŸã‚‚ã®ã®ã€ä»Šã§ã¯CSSã®ã¿ã§å®Ÿè£…ã§ãã‚‹å°æŠ€ã‚’紹介ã—ã¾ã™ã€‚ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ ç›®æ¬¡ Div全体をクリックã§ãるよã†ã«ã™ã‚‹ テーブルã®å¶æ•°ãƒ»å¥‡æ•°ã®è¡Œã®è‰²ã‚’変ãˆã‚‹ フォームã«ãƒ†ã‚ストを入れã¦ãŠãã€ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã§æ¶ˆã™ï¼ˆæ–‡å—色も変更） ラジオボタンã¨ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’装飾ã™ã‚‹ スライドパãƒãƒ« アコーディオン ツールãƒãƒƒãƒ— 言語ã«ã‚ˆã£ã¦ã‚¹ã‚¿ã‚¤ãƒ«ã‚’変更 横並ã³ã®divã®é«˜ã•æƒãˆã‚‹ ボックスを上下左å³ä¸å¤®ã«é…ç½®ã™ã‚‹ ãã‚Œã§ã¯å®Ÿéš›ã«ã©ã‚“ãªäº‹ãŒã§ãã‚‹ã®ã‹è¦‹ã¦ã¿ã¾ã—ょã†ï¼ã‚µãƒ³ãƒ—ルも作ã£ãŸã®ã§ã‚³ãƒ¼ãƒ‰ã¨
ファイルアップ用ã®Dropゾーンを簡å˜ã«ä½œã‚Œã‚‹jQueryプラグイン「Dropperã€:phpspot開発日誌
入力値ã«ã‚¨ãƒ©ãƒ¼ãŒã‚ã‚‹å ´åˆã«ãƒ„ールãƒãƒƒãƒ—を表示ã§ãる「jQuery-Validation... 次ã®è¨˜äº‹ ≫：ページスクãƒãƒ¼ãƒ«ã«å¿œã˜ã¦è¦ç´ を様々ã«CSSアニメーションã—ã¤ã¤è¡¨ç¤º...
2014å¹´ç·ã¾ã¨ã‚ã€jQueryã®ãƒ—ラグインã¨ã‚¹ã‚¯ãƒªãƒ—ト100é¸
毎年末ã«jQueryã®ãƒ—ラグインをã¾ã¨ã‚ã¦ã„ã¾ã—ãŸãŒã€ä»Šå¹´ã¯ãƒ—ラグインã®ä»–ã«å˜ä½“ã§å‹•ä½œã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚‚åŠ ãˆã¦ã€jQueryã®ãƒ—ラグインã¨ã‚¹ã‚¯ãƒªãƒ—トã®ç·ã¾ã¨ã‚ã¨ã—ã¦è¨˜äº‹ã«ã—ã¾ã—ãŸã€‚ 今年目立ã£ãŸã®ã¯ã€åŽ»å¹´ã‹ã‚‰å¼•ã続ãアニメーション系ã€ç¸¦é•·ãƒšãƒ¼ã‚¸ç”¨ã®ã‚¹ã‚¯ãƒªãƒ—トã§ã—ょã†ã‹ã€‚ 1カラムã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒæµè¡Œã£ã¦ã„ã‚‹ãŸã‚ã‹èƒŒæ™¯é–¢é€£ã‚‚充実ã—ã¦ã„ã¾ã—ãŸã€‚ãã‚Œã¨SVGをより簡å˜ã«åˆ©ç”¨ã§ãるよã†ã«ãªã£ãŸã®ã‚‚大ããªç›®çŽ‰ã§ã™ã。 ã¾ãŸã€jQueryã«ä¾å˜ã—ãªã„ã€å˜ä½“ã§å‹•ä½œã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トも多ã開発ã•ã‚Œã‚‹ã‚ˆã†ã«ãªã£ãŸã¨æ€ã„ã¾ã™ã€‚ 背景関連 SVG関連 縦長ページ関連 スクãƒãƒ¼ãƒ«é€£å‹•ãƒ»ãƒ‘ララックス関連 ãã®ä»–スクãƒãƒ¼ãƒ«æ“作・補助関連 レスãƒãƒ³ã‚·ãƒ–関連 ナビゲーション関連 レイアウト関連 コンテンツ生æˆé–¢é€£ コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 ç”»åƒæ‹¡å¤§ãƒ»é…置・ã‚ャプション関連 アニメーション関連 エフェ
[JS]エフェクトã®ç¾Žã—ã•ãŒã‚¹ã‚´ã‚¤ï¼Webページを水é¢ã«ã—ã€æ³¢ç´‹ã‚’生ã¿å‡ºã™ã‚¹ã‚¯ãƒªãƒ—ト -jQuery Ripple
Googleã®æ–°UX「Material Designã€ã®ã‚¢ãƒŠã‚¦ãƒ³ã‚¹ä»¥é™ã€æ³¢ç´‹ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’数多ã紹介ã—ã¦ãã¾ã—ãŸã€‚例ãˆã°ã“ã‚Œã¨ã‹Riiple Click Effectã¨ã‹Wavesã¨ã‹ã€‚ ãれらã¨ã¯ä¸€å‘³é•ã„ã€WebGLã§ãƒªã‚¢ãƒ«ãªæ³¢ç´‹ã‚’æãjQueryã®ãƒ—ラグインを紹介ã—ã¾ã™ã€‚ jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減ã—ã¦ã¾ã™ã€‚実際ã¯ã‚‚ã£ã¨æœ¬ç‰©ã®æ°´é¢ã§ã™ã€‚ jQuery Rippleã®ãƒ‡ãƒ¢ jQuery Rippleã®ä½¿ã„æ–¹ jQuery Rippleã®ãƒ‡ãƒ¢ デモã¯Chrome, Safari, Firefox, Opera, IEã¯11+ã§ã€OpenGL 2.0対応ã®ãƒ“デオカード内蔵ã®PCã§ã”覧ãã ã•ã„。 ページ上をクリックã™ã‚‹ã¨ã€ãã“ã‹ã‚‰æ³¢ç´‹ãŒã©ã‚“ã©ã‚“増ãˆã¾ã™ã€‚ jQuery Rippleã®ä½¿ã„æ–¹ Step 1: 外部ファイル 当スクリプトã¨jq
![[JS]エフェクトã®ç¾Žã—ã•ãŒã‚¹ã‚´ã‚¤ï¼Webページを水é¢ã«ã—ã€æ³¢ç´‹ã‚’生ã¿å‡ºã™ã‚¹ã‚¯ãƒªãƒ—ト -jQuery Ripple](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4d2ad555b67ee7509f227b6ac09d4c92e1ab29b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110501.gif)
Web制作ã§ä½¿ãˆãŸï¼jQueryプラグインã¾ã¨ã‚＋起æ¥ã—ã¾ã—ãŸ
作æˆï¼š2014/09/1 更新：2014/11/01 Web制作 > å ±å‘ŠãŒé…ã‚Œã¾ã—ãŸãŒã€5月ã«é€€ç¤¾ã—6月ã«èµ·æ¥ï¼ˆæ ªå¼ä¼šç¤¾ã‚³ãƒ テ）ã—ã¾ã—ãŸã€‚今ã¾ã§ãƒ–ãƒã‚°ã«ãƒ¡ãƒ¢ã—ã¦ãŠã„ãŸã“ã¨ãŒã€èµ·æ¥ã‚„ç´å“ã«å½¹ç«‹ã£ãŸéƒ¨åˆ†ã‚‚ã‚ã‚Šã€ãƒ–ãƒã‚°ã‚’継続ã—ã¦ã‚ˆã‹ã£ãŸã¨æ€ã„ã¾ã™ã€‚ブãƒã‚°ã‚’見ã¦ãã ã•ã£ã¦ã„る皆様ã€ã”紹介ã•ã›ã¦ã„ãŸã ã„ãŸã‚µã‚¤ãƒˆé‹å–¶è€…様ã€å¿œæ´ã—ã¦ä¸‹ã•ã£ã¦ã„る皆様ã«ã¯å¿ƒã‚ˆã‚ŠãŠç¤¼ç”³ã—上ã’ã¾ã™ã€‚経営や制作ã®éƒ¨åˆ†ã§ã¯ã¾ã ã¾ã 未熟ã§ã™ãŒã€ä»Šå¾Œã¨ã‚‚ã”指導ã”éžæ’»ã®ã»ã©ã€ã‚ˆã‚ã—ããŠé¡˜ã„ã—ã¾ã™ã€‚ 今回ã¯ã€ŒWeb制作ã§ä½¿ã„ãŸã„ã€jQueryプラグインやスクリプトãªã©ã‚’ã¾ã¨ã‚ã¾ã—ãŸã€‚WordPressテーマを作るã¨ãã«ä½¿ã†ã‚‚ã®ã€æ¤œç´¢ã§ãƒ’ットã—ã«ãã„プラグインも多数ã”紹介。 ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢é€Ÿå ±ã¯ Twitter ã®@commteã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ ã‚‚ã㘠動画 １．動画をブラウザã®èƒŒæ™¯å…¨ä½“ã«å†ç”Ÿã•ã›ã‚‹ ２．動画を綺麗ã«è¡¨ç¤ºã•ã›ã‚‹ WP管ç†ç”»é¢
jqueryを効率よãå¦ã¶æ–¹æ³•ã¯ï¼Ÿ - プãƒã‚°ãƒ©ãƒŸãƒ³ã‚°å¦ç¿’ã®çª“å£
jQueryã‚’å¦ã¼ã†ã¨æ€ã£ã¦ãƒãƒƒãƒˆæ¤œç´¢ã‚’ã—ã¦ã‚‚ã€è‰²ã€…ãªæƒ…å ±ãŒå‡ºã¦ãã¦ã©ã®æƒ…å ±ã‚’å‚考ã«ã™ã‚Œã°ã„ã„ã‹åˆ†ã‹ã‚‰ãªã„ã¨ã„ã†çµŒé¨“ã‚’ã—ãŸæ–¹ã¯ã„ã‚‹ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚ 特ã«ç‹¬å¦ã§å¦ã¼ã†ã¨ã™ã‚‹ã¨ã€ãã®å£ã«ã‚ˆãã¶ã¤ã‹ã‚Šã¾ã™ã€‚ドットインストールã®ã‚ˆã†ãªãƒ¡ã‚¸ãƒ£ãƒ¼ãªã‚µãƒ¼ãƒ“スも使ã£ãŸã“ã¨ãŒãªã‘ã‚Œã°ã€ãã®ä¾¡å€¤ã¯åˆ†ã‹ã‚Šã¾ã›ã‚“。 ãã“ã§ãŠã™ã™ã‚ãªã®ãŒãƒ—ãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã‚¹ã‚¯ãƒ¼ãƒ«ã®æ´»ç”¨ã§ã™ã€‚最åˆã«ä½•ã‹ã‚‰å¦ã¶ã¹ãã‹ã¨ã„ã£ãŸèª¬æ˜Žã¯ã‚‚ã¡ã‚ã‚“ã®ã“ã¨ã€ã‚ャリアプランã¾ã§ç›¸è«‡ã«ä¹—ã£ã¦ãれるã®ã§ã€ãŸã å˜ã«å¦ã‚“ã§çµ‚ã‚ã‚‹ã¨ã„ã†ã“ã¨ãŒæ¸›ã‚‰ã›ã¾ã™ã€‚ The post jqueryを効率よãå¦ã¶æ–¹æ³•ã¯ï¼Ÿ first appeared on プãƒã‚°ãƒ©ãƒŸãƒ³ã‚°å¦ç¿’ã®çª“å£.
jQueryã§å¤–部HTML（JSONå½¢å¼ï¼‰åŒ–ã—ãŸè¦ç´ を「もã£ã¨è¦‹ã‚‹ã€ãƒœã‚¿ãƒ³ã§è¿½åŠ ã™ã‚‹æ–¹æ³•ã€è¤‡æ•°è¨ç½®å¯¾å¿œãƒ‘ターン】｜BLACKFLAG
以å‰ã«ã€ŒjQueryã§å¤–部HTML（JSONå½¢å¼ï¼‰åŒ–ã—ãŸè¦ç´ を「もã£ã¨è¦‹ã‚‹ã€ãƒœã‚¿ãƒ³ã§è¿½åŠ ã™ã‚‹æ–¹æ³•ã€ ã¨é¡Œã—ã¦ã€JSONå½¢å¼ã§ã§å¤–部HTML化ã—ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„è¦ç´ ã‚’ 「もã£ã¨è¦‹ã‚‹ã€ãƒœã‚¿ãƒ³ã§è¿½åŠ ã™ã‚‹UIを紹介ã—ã¾ã—ãŸã€‚ 当時公開ã—ãŸã‚¹ã‚¯ãƒªãƒ—トã§ã¯ã€Œã‚‚ã£ã¨è¦‹ã‚‹ã€å‹•ä½œã¯ ページ内ã§ï¼‘ã¤ã®è¨ç½®ã®ã¿ã®æ§‹æˆã«ãªã£ã¦ã„ãŸã¨ã“ã‚ 1ページã§è¤‡æ•°è¨ç½®ã‚’å¿…è¦ã¨ã—ãŸå ´é¢ãŒã‚ã£ãŸã‚Šã€åŒæ§˜ã®è¦æœ›ã‚‚ã„ãŸã ã„ãŸã‚Šã—ãŸã®ã§ã€ 複数è¨ç½®ãƒ‘ターンã®ã‚µãƒ³ãƒ—ルをå†åº¦ç´¹ä»‹ã—ã¦ã¿ã¾ã™ã€‚ ã‚µãƒ³ãƒ—ãƒ«ã‚’åˆ¥æž ã§è¡¨ç¤ºã™ã‚‹ ページをスクãƒãƒ¼ãƒ«ã—ã¦ã„ãã¨ç¾ã‚Œã‚‹ã€Œã‚‚ã£ã¨è¦‹ã‚‹ã€ã‚’クリックã™ã‚‹ã¨ ãã®ã‚¨ãƒªã‚¢ã®ç¶šãã«è¿½åŠ ã§è¦ç´ ã‚’èªã¿è¾¼ã¿ã¾ã™ã€‚ サンプルã§ã¯ãƒšãƒ¼ã‚¸å†…ã«2ã¤ã®ã€Œã‚‚ã£ã¨è¦‹ã‚‹ã€ã‚¨ãƒªã‚¢ã‚’è¨ç½®ã—ã¦ã„ã¾ã™ã€‚ å·¦ã®ã‚¨ãƒªã‚¢ã¯28個ã€å³ã®ã‚¨ãƒªã‚¢ã¯20個ã®è¦ç´ ã‚’ 5個ãšã¤è¿½åŠ 表示ã—ã¦ã„ã¾ã™ã€‚ 全体構æˆã«ã¤ã„ã¦ã¾ãšã¯HTMLã‹ã‚‰ã€‚ â—†HTML <div class=
jquery 1.xã¨2.x ã®é•ã„ã€ã•ã‚‰ã«å‹•ä½œã‚’高速ã«ã™ã‚‹ãŸã‚ã®è¨å®š | ã¾ã¨ã‚ーãŸãƒ¼
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…ã¾ãšã¯ jquery 1.x 㨠2.x ã®é•ã„ 1.x 系㯠IE8 以å‰ã‚’サãƒãƒ¼ãƒˆã™ã‚‹ãŒé…ã„ã€é‡ã„ 2.x 系㯠IE8 以å‰ã®ã‚µãƒãƒ¼ãƒˆã¯æ¨ã¦ã¦ã€ã„ã‚‹ãŒè»½ã„ã€æ—©ã„ アイルトン・セナã˜ã‚ƒã‚ã‚‹ã¾ã„ã—ãã‚“ãªã«æ—©ãã—ã¦ã©ã†ã™ã‚“ã®ï¼ŸWebページãŒãŸã£ãŸ1秒高速化ã™ã‚‹ã ã‘ã§ECサイトãªã‚“ã‹ã€å£²ä¸ŠãŒ10ï¼…å‘上ã—ãŸäº‹ä¾‹ã‚‚ã‚ã‚Šã¾ã™ã€‚ 使ã„分ã‘る対応ã—ã¦ã„ãªã„IE8以下ã«ã¯å¤ã„jqueryã‚’èªã¿è¾¼ã¾ã›ã¾ã™ <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
マウスオーãƒãƒ¼ã§å‹•ããªã‚らã‹ã‚«ãƒ«ãƒ¼ã‚»ãƒ«ãƒ‘ãƒãƒ« (1/2)
軽快ã§ãªã‚らã‹ãªã‚«ãƒ«ãƒ¼ã‚»ãƒ«ãƒ‘ãƒãƒ« 毎週アップãƒãƒ¼ãƒ‰ã•ã‚Œã‚‹å……実ã—ãŸå‹•ç”»ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã€ã‚«ãƒ«ãƒ¼ã‚»ãƒ«ãƒ‘ãƒãƒ«ã‚„ボックスレイアウトã§è³‘ã‚„ã‹ã‹ã¤ã‚³ãƒ³ãƒ‘クトã«ã¾ã¨ã‚ã¦ã„る「Universiteit van Nederlandã€ã€‚ã“ã®ã‚µã‚¤ãƒˆã®ã‚«ãƒ«ãƒ¼ã‚»ãƒ«ãƒ‘ãƒãƒ«ã¯ã€ãƒžã‚¦ã‚¹ã‚«ãƒ¼ã‚½ãƒ«ã®ä½ç½®ã«å¿œã˜ã¦è»½å¿«ã§ãªã‚らã‹ã«å‹•ã。 STEP 1ï¼šåŸºæœ¬æ§‹é€ ã‚’ç”¨æ„ã™ã‚‹ 今回作æˆã™ã‚‹ã‚«ãƒ«ãƒ¼ã‚»ãƒ«ã¯ã€æ¨ªé•·ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„をマウスã®åº§æ¨™ã«å¿œã˜ã¦å·¦å³ã«ç§»å‹•ã•ã›ã‚‹ã“ã¨ã§ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã®å‹•ãを演出ã—ã¦ã„る。 通常ã®ãƒœãƒƒã‚¯ã‚¹ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã§ã¯ã€overflow: scroll; ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã‚’表示ã•ã›ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã®æ“作ã«ã‚ˆã£ã¦ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を移動ã•ã›ã‚‹ã€‚今回ã®ã‚«ãƒ«ãƒ¼ã‚»ãƒ«ã¯ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã®ä»£ã‚ã‚Šã«ãƒžã‚¦ã‚¹åº§æ¨™ã‚’利用ã™ã‚‹ãŸã‚ã€overflow: hidden;ã§è¡¨ç¤ºãƒœãƒƒã‚¯ã‚¹ï¼ˆ.holder）ã‹ã‚‰ã¯ã¿å‡ºã™éƒ¨åˆ†ã‚’éžè¡¨ç¤ºåŒ–。内部（.inner）ã«æ¨ªé•·ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„
知ã£ã¦ãŠãã¨åŠ¹çŽ‡çš„ï¼ã‚³ãƒ¼ãƒãƒ¬ãƒ¼ãƒˆã‚µã‚¤ãƒˆåˆ¶ä½œãŒæ—ã‚‹jQuery プラグインや使ã„æ–¹ã¾ã¨ã‚
作æˆï¼š2014/04/7 更新：2014/11/01 Web制作 > ã‚ã®ä¼æ¥ã‚µã‚¤ãƒˆã§ä½¿ã‚ã‚Œã¦ã„る効果やテクニックをã¾ãŸæŽ¢ã•ãªã„ã¨ã„ã‘ãªã„ã€ãã‚‚ãã‚‚ã©ã†ã„ã£ãŸã‚ーワードã§æŽ¢ã—ãŸã‚‰ã„ã„ã®ã‹åˆ†ã‹ã‚‰ãªã„。ãã‚“ãªã“ã‚“ãªã§ã€ä»Šå›žã¯å¥‡æŠœãªã‚‚ã®ã§ã¯ãªãã€ã€Œä¼æ¥ã‚µã‚¤ãƒˆã§è¦‹ãŸã“ã¨ã‚ã‚‹ï¼ã€ã¨ã„ã†ã‚ˆã†ãªã€ã‚³ãƒ¼ãƒãƒ¬ãƒ¼ãƒˆã‚µã‚¤ãƒˆã«ä½¿ãˆãã†ãªå®šç•ªã®ãƒ—ラグインや作り方をã¾ã¨ã‚ã¾ã—ãŸã€‚ ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢é€Ÿå ±ã¯ Twitter ã®@commteã§é…ä¿¡ã—ã¦ã„ã¾ã™ã€‚ ã‚‚ã㘠スライドショー １．カルーセル（横） ２．フェードアウト ３．画åƒã¨æ–‡å—をスライド ４．文å—ãŒé…ã‚Œã¦ç§»å‹•ã™ã‚‹åŠ¹æžœ ５．異ãªã‚‹ã‚¿ã‚¤ãƒŸãƒ³ã‚°ã‚’è¨å®šã§ãã‚‹ ナビゲーション・メニュー ６．多階層 ドãƒãƒƒãƒ—ダウンメニュー ７．多階層 効果ã¤ã ８．スマホã§ã¯ãƒ‰ãƒãƒƒãƒ—ダウン ９．スマホã§ã¯ã‚»ãƒ¬ã‚¯ãƒˆãƒ¡ãƒ‹ãƒ¥ãƒ¼ã« １ï¼ï¼ŽAmazon風 メガドãƒãƒƒãƒ—ダウンメニュー １１．横スライド １
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
レスãƒãƒ³ã‚·ãƒ–Webデザインã«å¯¾å¿œã—ãŸãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚’実装ã™ã‚‹jQueryプラグイン・Remodal - ã‹ã¡ã³ã¨.net
RWD対応ã®ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚’実装ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トã€Remodalã®ã”紹介ã§ã™ã€‚jQueryã«ä¾å˜ã—ã¦ã„ã¾ã™ã€‚ RWDãªWebサイトã§ä½¿ãˆã‚‹ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦å®Ÿè£…スクリプトã§ã™ã€‚ デãƒã‚¤ã‚¹ã®ãƒ¢ãƒ‹ã‚¿ã‚µã‚¤ã‚ºã«å¿œã˜ã¦é©åˆ‡ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’ç¶æŒã™ã‚‹ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã§ã™ã€‚ スマフォã®å ´åˆã¯å…¨ç”»é¢ã«è¡¨ç¤ºã•ã‚Œã‚‹ã®ã§ãƒ•ã‚£ãƒ³ã‚¬ãƒ¼ãƒ•ãƒ¬ãƒ³ãƒ‰ãƒªãƒ¼ã‚’考慮ã—ãŸè¨è¨ˆã¨è¨€ãˆãã†ã§ã™ã€‚ <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script> 本体ã¨ã‚¹ã‚¯ãƒªãƒ—トをèªã¿è¾¼ã¿ã¾ã™ã€‚ <div class="remodal" data-remodal-id="modal" data-remodal-options='{
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
ãã“ãã“ユーザビリティã®é«˜ã„フォームを作ã£ãŸ
ãã“ãã“ユーザビリティã®é«˜ã„フォームを作ã£ãŸ 入力内容ã®æ¤œè¨¼ã¨ã‹ã€éƒµä¾¿ç•ªå·å¤‰æ›ã‚’å‚™ãˆãŸã€ãã“ãã“使ã„ã‚„ã™ã„フォームã®ãƒ†ãƒ³ãƒ—レートを作りã¾ã—㟠time2014/01/18 hatenabookmark- 去年末実家ã«å¸°çœã—ã¦ã„ãŸæ™‚ã«ã€jQueryã®ç·´ç¿’＆æ¥å‹™ã§ä½¿ã†ãŸã‚ã«ã€ãƒ•ã‚©ãƒ¼ãƒ ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã¨ã‹éƒµä¾¿ç•ªå·å¤‰æ›ã¨ã‹ã‚’å‚™ãˆãŸã€ãã“ãã“ユーザビリティã®é«˜ã„入力フォームをコーディングã—ã¦ã„ãŸã®ã§ã€ã“ã“ã§å…¬é–‹ã—ã¦ãŠãã¾ã™ã€‚ フォームサンプル ソースãŠæŒã¡å¸°ã‚Šç”¨ (Github) ã“ã“ã§"ãã“ãã“"ã¨è¨€ã£ã¦ã„ã‚‹ã®ã¯ã€ã‚‚ã¨ã‚‚ã¨æ¥å‹™ã§ãƒ¦ãƒ¼ã‚¶ãƒ“リティ改善案ã¨ã—ã¦ä½¿ã†ã“ã¨ãŒç›®çš„ã§ã‚ã£ã¦ã€ãƒ™ã‚¹ãƒˆã‚’目指ã—ã¦ã‚‚サーãƒåˆ¶ç´„やコスト的ãªè¦³ç‚¹ã§ä½¿ãˆãªã„ã“ã¨ãŒã‚ã‚‹ã‹ã‚‰ã€ãã“ã¯ç›®æŒ‡ã•ãªã„よã¨ã„ã†æ„味ã§ã™ã€‚ãã‚‚ãã‚‚ã€ãƒ•ã‚©ãƒ¼ãƒ ã¯å¿…è¦æ‚ªã§ã™ã—ã€ãƒ™ã‚¹ãƒˆã¯ãƒ•ã‚©ãƒ¼ãƒ ãŒå˜åœ¨ã—ãªã„ã“ã¨ã§ã™ã。 フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰å®Ÿè£…ã ã‘ã§ã™ï¼ˆã‚µãƒ¼ãƒå´ã‚¹ã‚¯ãƒªãƒ—ト
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
デブãƒã‚²
http://www.webooost.com/article/show/7
Flatis
{{#tags}}- {{label}}
{{/tags}}