[B! ã‚°ãƒªãƒƒãƒ‰] ben-keiã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

ben-kei id:ben-kei

ã‚°ãƒªãƒƒãƒ‰ã«é–¢ã™ã‚‹ben-keiã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (7)

${{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}}

[JS]ã‚°ãƒªãƒƒãƒ‰ã§é…ç½®ã—ãŸãƒ‘ãƒãƒ«ã‚’ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -gridSelector
Googleãƒˆãƒ¬ãƒ³ãƒ‰ã®ã‚ˆã†ãªã‚°ãƒªãƒƒãƒ‰çŠ¶ã«é…ç½®ã—ãŸè¤‡æ•°ã®ãƒ‘ãƒãƒ«ã«ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’ä¸Žãˆã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Dynamic Grid with Transitions ãƒ‡ãƒ¢ã¯Chrome, Firefoxã§ã”è¦§ãã ã•ã„ã€‚ â€»Safariã§è¦‹ãŸã‚‰ã€ã‚¯ãƒ©ãƒƒã‚·ãƒ¥ã—ã¾ã—ãŸã€‚ Demo 1: No transitions Demo 2: Transitions without delays Demo 3: Transitions with delays 3ç¨®é¡žã®ãƒ‡ãƒ¢ã¯ã€1:ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ç„¡ã—ã€2:ãƒ‡ã‚£ãƒ¬ã‚¤ç„¡ã—ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã€3:ãƒ‡ã‚£ãƒ¬ã‚¤æœ‰ã‚Šã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã¨ãªã£ã¦ã„ã¾ã™ã€‚ Demo 3ã®ãƒ‡ã‚£ãƒ¬ã‚¤æœ‰ã‚ŠãŒä¸€ç•ªã‹ã£ã“ã„ã„ã§ã™ï¼ Demo 3ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³gif å·¦ä¸Šã‹ã‚‰ãƒ‘ãƒãƒ«ã®è¡¨ç¤ºæ•°ãƒ»ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¤‰æ›´ã™ã‚‹ã¨ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã§å¤‰æ›´ã—ã¾ã™ã€‚ å®Ÿè£… divè¦ç´ ã§é…ç½®ã—ãŸãƒ‘ãƒãƒ«ã¨å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨
ben-kei 2013/06/20
ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³

ã‚°ãƒªãƒƒãƒ‰

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

ã‚°ãƒªãƒƒãƒ‰
ãƒªãƒ³ã‚¯
æ–°ã—ã„ã‚‚ã®ã‚’åˆ¶ä½œã§ãã‚‹äºˆæ„Ÿï¼åž‚ç›´ãƒ»æ°´å¹³ã®ãƒªã‚ºãƒ ã‚’å¤§åˆ‡ã«ã—ãŸãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’çµ„ã¿ç«‹ã¦ã‚‹ãƒ•ãƒ¬ãƒ¼ãƒ ãƒ¯ãƒ¼ã‚¯ -xy.css
Documentation -xy.css Step 1: ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ xy.cssã‚’ä¸‹è¨˜ãƒšãƒ¼ã‚¸ã‹ã‚‰ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚ ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ -xy.css Step 2: æ°´å¹³ã®ã‚°ãƒªãƒƒãƒ‰è¨è¨ˆ HTMLã¯éžå¸¸ã«ã‚·ãƒ³ãƒ—ãƒ«ã§ã€classãªã©ä½™è¨ˆãªã‚‚ã®ã¯ä¸€åˆ‡ã‚ã‚Šã¾ã›ã‚“ã€‚ <header></header> <article></article> <aside></aside> <footer></footer> å¤©åœ°ã«ãƒ˜ãƒƒãƒ€ã¨ãƒ•ãƒƒã‚¿ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã¨ã‚µã‚¤ãƒ‰ãƒãƒ¼ã‚’2ã‚«ãƒ©ãƒ æ°´å¹³ã«é…ç½®ã—ã¾ã™ã€‚ header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: åž‚ç›´ã®ã‚°ãƒªãƒƒãƒ‰è¨è¨ˆ articleã¨asideå†…ã«ã€è¦‹å‡ºã—ã¨ãƒ‘ãƒ©ã‚°ãƒ©ãƒ•
ben-kei 2013/01/21
ã‚°ãƒªãƒƒãƒ‰

html

CSS3

HTML5
ãƒªãƒ³ã‚¯
[JS]å¤‰æ›´æ™‚ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒæ°—æŒã¡ã„ã„ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–å¯¾å¿œã®ã‹ã£ã“ã„ã„ã‚°ãƒªãƒƒãƒ‰ã‚’ç”Ÿæˆã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -Gridâ€”Aâ€”Licious
Masonryã¯ã‹ã£ã“ã„ã„ã‘ã©ãƒ‘ãƒãƒ«ç§»å‹•ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒã¡ã‚‡ã£ã¨ãªã€ã¨ã„ã†äººã«ã´ã£ãŸã‚Šãªã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–å¯¾å¿œã§ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå¤‰æ›´æ™‚ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚‚ã‚¹ãƒ ãƒ¼ã‚ºã§ã‹ã£ã“ã„ã„ã‚°ãƒªãƒƒãƒ‰ã‚’ç”Ÿæˆã™ã‚‹jQueryã®ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Gridâ€”Aâ€”Licious Gridâ€”Aâ€”Licious -GitHub Gridâ€”Aâ€”Liciousã®ãƒ‡ãƒ¢ Gridâ€”Aâ€”Liciousã®ä½¿ã„æ–¹ Gridâ€”Aâ€”Liciousã®å®Ÿè£…ä¾‹ Gridâ€”Aâ€”Liciousã®ãƒ‡ãƒ¢ ã¾ãšã¯ã€Gridâ€”Aâ€”Liciousã®ãƒ™ãƒ¼ã‚·ãƒƒã‚¯ãªå‹•ä½œãŒç¢ºèªã§ãã‚‹ãƒ‡ãƒ¢ã‹ã‚‰ã”ç´¹ä»‹ã€‚ ã‚¢ãƒ¬ãƒ³ã‚¸ã¯ã€ä¸‹è¨˜ã®Gridâ€”Aâ€”Liciousã®å®Ÿè£…ä¾‹ã§ã€‚ ãƒšãƒ¼ã‚¸ã„ã£ã±ã„ã«é«˜ã•ã®ç•°ãªã‚‹ãƒ‘ãƒãƒ«ãŒåŒã˜é–“éš”ã§é…ç½®ã•ã‚Œã¦ã„ã¾ã™ã€‚ ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ï¼šã‚¹ãƒžãƒ•ã‚©ã‚µã‚¤ã‚º Gridâ€”Aâ€”Liciousã®ä½¿ã„æ–¹ Gridâ€”Aâ€”Liciousã¯2008å¹´ã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚ŒãŸå½“æ™‚ã¯å˜ã«ã‚°ãƒªãƒƒãƒ‰çŠ¶ã«
ben-kei 2012/10/19
ã‚°ãƒªãƒƒãƒ‰
ãƒªãƒ³ã‚¯
[JS]ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã‚’ã‚°ãƒªãƒƒãƒ‰çŠ¶ã«ãƒ©ãƒ³ãƒ€ãƒ ã«é…ç½®ã—ãŸã‚Šã€Pinteresté¢¨ã«é…ç½®ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ - BlocksIt.js
BlocksIt.jsã®ä½¿ã„æ–¹ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« ã€Œjquery.jsã€ã¨å½“ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’headå†…ã«è¨˜è¿°ã—ã¾ã™ã€‚ â€»jQueryã¯1.7.1ã§é–‹ç™ºã€‚ <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLã¯å¯¾è±¡ã¨ãªã‚‹ç¯„å›²ã‚’ãƒ©ãƒƒãƒ‘ãƒ¼ã§åŒ…ã¿ã€å„ãƒ‘ãƒãƒ«ã‚’åŒåˆ—ã«é…ç½®ã—ã¾ã™ã€‚ ãƒ‘ãƒãƒ«ã¯ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§divè¦ç´ ã‚’å¯¾è±¡ã«ã—ã¦ã„ã¾ã™ãŒã€ä»»æ„ã®è¦ç´ ã§å®Ÿè£…ã§ãã¾ã™ã€‚ <div id="container"> <div>ãƒ‘ãƒãƒ«</div> <div>ãƒ‘ãƒãƒ«</div> <div>ãƒ‘ãƒãƒ«</div
ben-kei 2012/08/22
jQuery

ã‚°ãƒªãƒƒãƒ‰
ãƒªãƒ³ã‚¯
[CSS]ã‚ãšã‹12å€‹ã®classåã§å¤šå½©ãªã‚°ãƒªãƒƒãƒ‰ã‚’çµ„ã¿ç«‹ã¦ã‚‹CSSã®ãƒ•ãƒ¬ãƒ¼ãƒ ãƒ¯ãƒ¼ã‚¯ -StackLayout
IE6ã‚’ã¯ã˜ã‚ã€iPhone, iPadã«ã‚‚å¯¾å¿œã—ãŸã€å¯å¤‰ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚‚å›ºå®šãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã«ã‚‚åˆ©ç”¨ã§ãã‚‹å®Ÿç”¨çš„ã§å¤šå½©ãªã‚°ãƒªãƒƒãƒ‰ã‚’çµ„ã¿ç«‹ã¦ã‚‹CSSã®ãƒ•ãƒ¬ãƒ¼ãƒ ãƒ¯ãƒ¼ã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ StackLayout ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ï¼šBasic Mockup [ad#ad-2] StackLayoutã®ä¸»ãªç‰¹å¾´ StackLayoutã®å¯¾å¿œãƒ–ãƒ©ã‚¦ã‚¶ãƒ»ãƒ‡ãƒã‚¤ã‚¹ StackLayoutã§ä½¿ç”¨ã™ã‚‹12å€‹ã®classå StackLayoutã®ãƒ‡ãƒ¢ StackLayoutã®ä½¿ã„æ–¹ StackLayoutã®ä¸»ãªç‰¹å¾´ ã‚ãšã‹12å€‹ã®classåã§ã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’ç®¡ç† classåã¯ã€ç°¡å˜ã«ã‚»ãƒžãƒ³ãƒ†ã‚£ãƒƒã‚¯ãªã‚‚ã®ã«å¤‰æ›´å¯èƒ½ ãƒã‚¹ãƒˆã®åˆ¶é™ã¯ç„¡ã— floatã®ã‚¯ãƒªã‚¢ç„¡ã—ã§ã€ã‚¨ãƒ¬ãƒ¡ãƒ³ãƒˆã‚’æ¨ªåˆ—ã«ç°¡å˜ã«ä¸¦ã¹ã‚‹ã“ã¨ãŒå¯èƒ½ ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã¯å¯å¤‰ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆç”¨ã§ã€å›ºå®šãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã«ã‚‚å¯¾å¿œ å„ã‚«ãƒ©ãƒ ã®æºã®è¨å®šã¯ç°¡å˜ã§ã€px, %ã®ä¸¡æ–¹ã«å¯¾å¿œ StackLa
ben-kei 2011/03/28
ã‚°ãƒªãƒƒãƒ‰

css
ãƒªãƒ³ã‚¯
ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§ã‚‚Photoshopã§ã‚‚ç°¡å˜ã«ã‚°ãƒªãƒƒãƒ‰ãŒè¨è¨ˆã§ãã‚‹ -Modular Grid Pattern
ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§ã‚‚Photoshopã§ã‚‚ã€æ•°å€¤ã‚’æŒ‡å®šã—ã¦ç°¡å˜ã«ã‚°ãƒªãƒƒãƒ‰ãŒè¨è¨ˆãƒ»ä½œæˆã§ãã‚‹ã€ŒModular Grid Patternã€ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Modular Grid Pattern [ad#ad-2] Modular Grid Patternã¯ã€ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã§ã‚‚Photoshopã§ã‚‚åŒæ§˜ã®æ‰‹é †ã§ã€ç°¡å˜ã«ã‚°ãƒªãƒƒãƒ‰ãŒä½œæˆã§ãã¾ã™ã€‚ Modular Grid Patternï¼šã‚ªãƒ³ãƒ©ã‚¤ãƒ³ç‰ˆ Modular Grid Patternï¼šPhotoshopç‰ˆ Modular Grid Patternï¼šã‚ªãƒ³ãƒ©ã‚¤ãƒ³ç‰ˆ ãƒ™ãƒ¼ã‚¹ãƒ©ã‚¤ãƒ³ã®é«˜ã•ã‚’å¤‰æ›´ã—ã¦ã„ã‚‹ã‚ãƒ£ãƒ—ãƒãƒ£ ä½œæˆã—ãŸã‚°ãƒªãƒƒãƒ‰ã¯ã€3ã¤ã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã§ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã§ãã¾ã™ã€‚ PNG pattern â€»GIMPç”¨ Photoshop pattern â€»Photoshopç”¨ Transparency mask â€»Fireworksç”¨ [ad#ad-2] Mod
ben-kei 2011/02/15
photoshop-ã‚¨ã‚¯ã‚¹ãƒ†ãƒ³ã‚·ãƒ§

ã‚°ãƒªãƒƒãƒ‰
ãƒªãƒ³ã‚¯
1