[B! ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤] kuroaka1871ã®ãƒ

kuroaka1871 id:kuroaka1871

ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã«é–¢ã™ã‚‹kuroaka1871ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (8)

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

${{author_name}}$
{{author_name}}{{created}}
{{ #comment }}{{ comment }}{{ /comment }}
- {{ label }}

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

[CSS]å‹•ç”»ã‚’èƒŒæ™¯ã¨ã—ã¦è¡¨ç¤ºã•ã›ã€ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’é…ç½®ã™ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
å‹•ç”»ã‚’ãƒ–ãƒ©ã‚¦ã‚¶ã„ã£ã±ã„ã«èƒŒæ™¯ã¨ã—ã¦è¡¨ç¤ºã•ã›ã€ãã®ä¸Šã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§é…ç½®ã™ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ HTML5 Video å®Ÿè£… HTML ç¾åœ¨ã€å‹•ç”»ãƒ•ã‚¡ã‚¤ãƒ«ã¯äºŒã¤ã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã‚’ç”¨æ„ã™ã‚‹ã®ãŒã‚ˆã„ã§ã—ã‚‡ã†ã€‚WebMã¯GoogleãŒæŽ¨å¥¨ã™ã‚‹ã‚‚ã®ã§Chrome, Firefox, Operaã§ãƒã‚¤ãƒ†ã‚£ãƒ–ã«ã‚µãƒãƒ¼ãƒˆã•ã‚Œã¦ã„ã¾ã™ã€‚ <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§è¡¨ç¤ºã™ã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã¯ã€é€šå¸¸é€šã‚Šã®å®Ÿè£…ã§ã™ã€‚ <div class="overlay"> ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ </div> CSS ã¾ãšã¯ã€å‹•ç”»ã‚’ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼
kuroaka1871 2014/06/14
ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤
ãƒªãƒ³ã‚¯
[JS]ãƒšãƒ¼ã‚¸å…¨ä½“ã€ãƒšãƒ¼ã‚¸ä¸Šã®ã•ã¾ã–ã¾ãªè¦ç´ ã«ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã‚’ã‹ã£ã“ã‚ˆãè¡¨ç¤ºã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -plainOverlay
ãƒšãƒ¼ã‚¸å…¨ä½“ã«ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§ã‚«ã‚¦ãƒ³ãƒˆãƒ€ã‚¦ãƒ³ plainOverlayã®ä½¿ã„æ–¹ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« jquery.jsã¨å½“ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> ... <script src="jquery-1.11.0.min.js"></script> <script src="jquery.plainoverlay.min.js"></script> </head> Step 2: HTML HTMLã¯ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã‚’é©ç”¨ã™ã‚‹æ™‚ã«æŒ‡å®šã§ãã‚‹ã‚ˆã†idã‚’ã¤ã‘ã¦ãŠãã¨ä¾¿åˆ©ã§ã™ã€‚ <body> <div id="demo">ãƒ‘ãƒãƒ«</div> </body> Step 3: JavaScript jQueryã®ã‚»ãƒ¬ã‚¯ã‚¿ã§è¦ç´ ã‚’æŒ‡å®šã—ã€ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’å®Ÿè¡Œã—ã¾ã™ã€‚åŸºæœ¬æ›¸å¼ã¯ä¸‹è¨˜ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ //show element.plainOverlay('sh
kuroaka1871 2014/04/24
ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤

ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³
ãƒªãƒ³ã‚¯
[JS]ç”»åƒã®ãƒ›ãƒãƒ¼æ™‚ã®æ–¹å‘ã«ã‚ˆã£ã¦ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã‚’ã‚¹ãƒ©ã‚¤ãƒ‰è¡¨ç¤ºã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -SlipHover
ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸: auto scroll é•·ã„ãƒ†ã‚ã‚¹ãƒˆã‚’è‡ªå‹•ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã•ã›ã‚‹ã“ã¨ã‚‚ã§ãã¾ã™ã€‚ SlipHoverã®ä½¿ã„æ–¹ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« jquery.jsã¨å½“ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.sliphover.min.js"></script> Step 2: HTML å„ç”»åƒã¯imgè¦ç´ ã§é…ç½®ã—ãƒ©ãƒƒãƒ‘ãƒ¼ã§å†…åŒ…ã—ã€è¡¨ç¤ºã™ã‚‹ãƒ†ã‚ã‚¹ãƒˆã‚’titleå†…ã«è¨˜è¿°ã—ã¾ã™ã€‚ <div id="container"> <img src="1.jpg" title="title1" /> <img src="2.jpg" title="title2" /> ... </div> Step 3: JavaScript ãƒ©ãƒƒãƒ‘ãƒ¼ã‚’jQueryã®
kuroaka1871 2014/03/07
ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤

jQuery
ãƒªãƒ³ã‚¯
ã•ãã£ã¨ç°¡å˜ï¼jQueryã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤è¡¨ç¤ºã•ã›ã‚‹æ–¹æ³• | æ ªå¼ä¼šç¤¾LIG(ãƒªã‚°)ï½œDXæ”¯æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ é–‹ç™ºãƒ»Webåˆ¶ä½œ
ã©ã†ã‚‚ã§ã™ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã®ã¯ã‚„ã¡ã§ã™âœŒ(Â´Ê˜â€¿Ê˜ï½€)âœŒ æ¢…é›¨æ˜Žã‘ã®æš‘ã•ã§ãƒãƒ†æ°—å‘³ã§ã™â€¦ã“ã®æš‘ã•å«Œã§ã™ãªã€€câŒ’ã£Â´Ê˜â€¿Ê˜ï½€)ã£ ã¯ã‚„ã¡ã¯é™ã‹ã«æš®ã‚‰ã—ãŸã„ã€€câŒ’ã£ â—žâ€¸â—Ÿ )ã£ ãã‚“ãªã“ã¨è¨€ã£ã¦ã‚‚ã“ã®æš‘ã•ã¯å’Œã‚‰ãŽã¾ã›ã‚“(â—žâ€¸â—Ÿ) ä»Šå›žã¯jQueryã§ç°¡å˜ã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤è¡¨ç¤ºã•ã›ã‚‹æ–¹æ³•ã‚’ã”ç´¹ä»‹ã—ã¦ã„ãã¾ã™(â—žâ€¸â—Ÿ) ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã¨ã¯ ãƒ©ã‚¤ãƒˆãƒœãƒƒã‚¯ã‚¹ã®ã‚ˆã†ã«è¦ç´ ã®ä¸Šã«è¦ç´ ã‚’é‡ãã¦è¡¨ç¤ºã•ã›ã‚‹æ–¹æ³•ã§ã™ ä¸Šã«é‡ãã‚‹æ–¹ã®è¦ç´ ã‚’åŠé€æ˜Žã«ã•ã›ã¦ä¸‹ã®è¦ç´ ãŒã†ã£ã™ã‚‰è¦‹ãˆã‚‹ã‚ˆã†ãªè¡¨ç¾ã«å¤šãä½¿ã‚ã‚Œã¾ã™( Ë˜Ï‰Ë˜)â˜ HTML </pre> <div id="overlay"> <p id="text">ï½²ï½ªï½°ï½°ï½²ã¿ã¦ã‚‹ã…âœŒ(Â´Ê˜â€¿Ê˜ï½€)âœŒ</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> IDåoverlayã¯ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã•ã‚Œ
kuroaka1871 2013/07/15
ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤

jQuery
ãƒªãƒ³ã‚¯
ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã®ãƒ›ãƒãƒ¼æ™‚ã«ãƒ•ã‚§ãƒ¼ãƒ‰ã‚¢ã‚¦ãƒˆï¼†ã‚¢ã‚¤ã‚³ãƒ³ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§ãã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSlickhover.jsã€:phpspoté–‹ç™ºæ—¥èªŒ
ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã®ãƒ›ãƒãƒ¼æ™‚ã«ãƒ•ã‚§ãƒ¼ãƒ‰ã‚¢ã‚¦ãƒˆï¼†ã‚¢ã‚¤ã‚³ãƒ³ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§ãã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSlickhover.jsã€ 2013å¹´05æœˆ17æ—¥- Slickhover.js ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã®ãƒ›ãƒãƒ¼æ™‚ã«ãƒ•ã‚§ãƒ¼ãƒ‰ã‚¢ã‚¦ãƒˆï¼†ã‚¢ã‚¤ã‚³ãƒ³ã‚’ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã§ãã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSlickhover.jsã€ã€‚ ç”»åƒç‰ã®ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã«ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã™ã‚‹ã¨ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã—ã¤ã¤ãƒ•ã‚§ãƒ¼ãƒ‰ã‚¢ã‚¦ãƒˆã—ã€ä¸Šã«ç”»åƒã‚’ã‹ã¶ã›ã‚‹çš„ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’ä½œã‚‹ãŸã‚ã®jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€‚ ãã‚Œä»¥å¤–ã¯ä½•ã‚‚ã‚„ã£ã¦ãã‚Œã¾ã›ã‚“ãŒã€ã“ã†ã„ã†ç´°ã‹ãªã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã‚‚æ„å¤–ã¨ï¼‘ã‹ã‚‰å®Ÿè£…ã—ã‚ˆã†ã¨ã™ã‚‹ã¨é¢å€’ã ã£ãŸã‚Šã™ã‚‹ã‚‚ã®ã§ã™ãŒã€ã“ã®ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã§ç°¡å˜ã«å®Ÿè£…ã§ãã¾ã™ ä»–ã®ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã¨çµ„ã¿åˆã‚ã›ã‚‹ã“ã¨ã§ã‚¯ãƒ¼ãƒ«ãªæ¼”å‡ºãŒã§ããã† é–¢é€£ã‚¨ãƒ³ãƒˆãƒª ãƒžã‚¹ã‚¯ã‚’ä½¿ã£ãŸãŠæ´’è½ãªã‚¹ãƒ©ã‚¤ãƒ€ãƒ¼ãŒä½œã‚Œã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒMaskify Sliderã€ selectãƒœãƒƒã‚¯ã‚¹ã‚’ãƒªãƒƒãƒã‹ã¤ã‚¯
kuroaka1871 2013/05/18
jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³

ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤

hover
ãƒªãƒ³ã‚¯
ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã™ã‚‹ã‚°ãƒªãƒƒãƒ‰ã®è¶…ã‚¯ãƒ¼ãƒ«ãªãƒ‡ãƒ¢:phpspoté–‹ç™ºæ—¥èªŒ
App Showcase with Grid Overlay ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã™ã‚‹ã‚°ãƒªãƒƒãƒ‰ã®è¶…ã‚¯ãƒ¼ãƒ«ãªãƒ‡ãƒ¢ã€‚ ã¯ã˜ã‚ã¦ã“ã†ã„ã†ã®ã¯è¦‹ãŸæ°—ãŒã—ã¾ã™ãŒã€ãªã‹ãªã‹ã‚¯ãƒ¼ãƒ«ãªã®ã§ãƒ‡ãƒ¢ã ã‘ã§ã‚‚è¦‹ã¦ãŠãã¨ã‚ˆã•ãã†ã€‚ è¦‹ã›æ–¹ã¨ã—ã¦é¢ç™½ã„ãƒ‡ãƒ¢ã«ãªã£ã¦ã„ã¦ã€ã‚½ãƒ¼ã‚¹ã‚‚å…¬é–‹ã•ã‚Œã¦ã„ã‚‹ã®ã§å¿œç”¨ã—ã¦ã¿ã‚‹ã¨é¢ç™½ã„ç‰©ãŒã§ããã† æœ‰ã‚Šç‰©ã‚„æµè¡Œã‚Šã‚’ä½¿ã†ã ã‘ã§ã¯ãªãã€ã“ã†ã„ã†ç‰©ã‚’è‡ªåˆ†ã§è€ƒãˆã¦ä½œã‚Œã‚‹ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã¨ã„ã†ã®ã¯ä¾¡å€¤ãŒé«˜ãã†ã§ã™ã é–¢é€£ã‚¨ãƒ³ãƒˆãƒª åž‚ç›´ã‚¢ã‚¤ã‚³ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼å®Ÿè£…ãƒ‡ãƒ¢ï¼†ã‚µãƒ³ãƒ—ãƒ«ãƒ—ãƒã‚°ãƒ©ãƒ ã€ŒVertical Icon Menuã€ ãƒ–ãƒ©ã‚¦ã‚¶ä¸Šã§ã¾ã‚‹ã§ç¾Žè¡“é¤¨ã€‚3Dã‚¤ãƒ¡ãƒ¼ã‚¸ã‚®ãƒ£ãƒ©ãƒªãƒ¼ãƒ‡ãƒ¢ PayPalã®èªè¾¼ä¸ã‚¢ã‚¤ã‚³ãƒ³ã‚’CSSã§å®Ÿç¾ã—ãŸãƒ‡ãƒ¢ ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã§ãƒšãƒ¼ã‚¸ã‚ãã‚Šã‚’ã™ã‚‹UIå®Ÿè£…ãƒ‡ãƒ¢ ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ï¼†ã‚¿ãƒƒãƒãƒ•ãƒ¬ãƒ³ãƒ‰ãƒªãªWEBãƒ™ãƒ¼ã‚¹ã®éŸ³æ¥½ãƒ—ãƒ¬ã‚¤ãƒ¤ãƒ¼å®Ÿè£…ãƒ‡ãƒ¢ ã“ã‚Œã¯æ–°ã—ã„!ãƒ‘ãƒãƒ«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒç¾Žã—ã„ã‚¹ãƒ©ã‚¤ãƒ‰ã‚·ãƒ§ãƒ¼å®Ÿè£…ãƒ‡ãƒ¢ æ—¢ã«ã“ã“ã¾ã§
kuroaka1871 2013/04/24
ã‚°ãƒªãƒƒãƒ‰

ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤

ã‚¹ãƒ©ã‚¤ãƒ‰ã‚·ãƒ§ãƒ¼

javascript

responsive
ãƒªãƒ³ã‚¯
IDEA * IDEA
ãƒ‰ãƒƒãƒˆã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ä»£è¡¨ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
kuroaka1871 2013/04/07
jQuery

ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤
ãƒªãƒ³ã‚¯
Bootstrapãƒ™ãƒ¼ã‚¹ã®ã‚µã‚¤ãƒˆã§ã‚µã‚¤ãƒˆã®ä½¿ã„æ–¹ã‚’ã‚¹ãƒ†ãƒƒãƒ—åˆ¥ã«ã‚ªãƒ¼ãƒãƒ¬ã‚¤è¡¨ç¤ºã§ãã‚‹ã€ŒBootstro.jsã€:phpspoté–‹ç™ºæ—¥èªŒ
Bootstrapãƒ™ãƒ¼ã‚¹ã®ã‚µã‚¤ãƒˆã§ã‚µã‚¤ãƒˆã®ä½¿ã„æ–¹ã‚’ã‚¹ãƒ†ãƒƒãƒ—åˆ¥ã«ã‚ªãƒ¼ãƒãƒ¬ã‚¤è¡¨ç¤ºã§ãã‚‹ã€ŒBootstro.jsã€ 2013å¹´04æœˆ04æ—¥- Bootstro.js Bootstrap Intro.js Bootstrapãƒ™ãƒ¼ã‚¹ã®ã‚µã‚¤ãƒˆã§ã‚µã‚¤ãƒˆã®ä½¿ã„æ–¹ã‚’ã‚¹ãƒ†ãƒƒãƒ—åˆ¥ã«ã‚ªãƒ¼ãƒãƒ¬ã‚¤è¡¨ç¤ºã§ãã‚‹ã€ŒBootstro.jsã€ã€‚ ã‚µã‚¤ãƒˆä¸Šã®è¦ç´ ã‚’ãƒã‚¤ãƒ©ã‚¤ãƒˆã•ã›ã¦èª¬æ˜Žã‚’å¹ãå‡ºã—ã§è¡¨ç¤ºã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã‚‹Bootstrapãƒ™ãƒ¼ã‚¹ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã€‚ ã‚µã‚¤ãƒˆã§ä½•ã‚’ã‚„ã£ãŸã‚‰ã„ã„ã‹åˆ†ã‹ã‚‰ãªã„ã€ã¨ã„ã†ãƒ¦ãƒ¼ã‚¶å‘ã‘ã®åˆ†ã‹ã‚Šã‚„ã™ã„ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’Bootstrapãƒ™ãƒ¼ã‚¹ã®ã‚µã‚¤ãƒˆã§å®Ÿç¾å‡ºæ¥ã¾ã™ ã¾ã™ã¾ã™BootstrapãŒä¾¿åˆ©ã«ãªã‚Šã¾ã™ã é–¢é€£ã‚¨ãƒ³ãƒˆãƒª Bootstrapã®ãƒ†ãƒ¼ãƒžã§è‰¯ã„æ„Ÿã˜ã«å‹•ãã‚ªãƒ¼ãƒˆã‚µã‚¸ã‚§ã‚¹ãƒˆå®Ÿè£…jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒMagicSuggestã€ Bootstrapã‚’ãƒ™ãƒ¼ã‚¹ã¨ã—ãŸãƒ•ãƒªãƒ¼ã®UIKitã€ŒFlat UIã€ Goo
kuroaka1871 2013/04/07
bootstro.js

javascript

bootstrap

jQuery

ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤
ãƒªãƒ³ã‚¯
1