[B! layout] mimosafaã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

mimosafa id:mimosafa

layoutã«é–¢ã™ã‚‹mimosafaã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (35)

${{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 ã®æ›¸ãæ–¹ã¨ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®åˆ†é¡ž (è‡ªå·±æµ)
React ã‚„ Svelte ã§ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãƒ™ãƒ¼ã‚¹ã§é–‹ç™ºã™ã‚‹ã¨ãç‰¹æœ‰ã® CSS ãƒŽã‚¦ãƒã‚¦ã£ã¦ã‚ã‚“ã¾ã‚ŠåŠ¹ã‹ãªã„æ°—ãŒã™ã‚‹ Twitter ã«æ›¸ã„ãŸã‚‰åéŸ¿ãŒã‚ã£ãŸã®ã§ã€è‡ªå·±æµã ã‘ã©ã¾ã¨ã‚ã¦ãŠã React Component ã®ç®¡ç†å˜ä½ã¨ã€CSS ã¨ã—ã¦ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ç®¡ç†ãƒãƒªã‚·ãƒ¼ã¯é•ã†ã‚ˆãã€ã¿ãŸã„ãªè©±ã‚’ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã«æ™‚æŠ˜ã•ã‚Œã‚‹ãŒã€ãã‚“ãªè©±ã¯ç„¡è¦–ã—ã¦å®Œå…¨ä¸€è‡´ã•ã›ã‚‹ã€‚ãã†ã„ã†æ˜Ÿã®ã‚‚ã¨ã§é–‹ç™ºã—ã¦ã„ã‚‹ ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®åˆ†é¡ž ãƒã‚¸ãƒƒã‚¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ ãƒ–ãƒãƒƒã‚¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ å®šç¾© ãƒã‚¸ãƒƒã‚¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ Provider ã‚„ hooks ãªã©ã®ãƒ‡ãƒ¼ã‚¿å‡¦ç†ã ã‘ã‚’æ‰±ã„ã€åã«æ¸¡ã™ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ ä¸€åˆ‡ã® CSS ã‚„ DOM å®Ÿä½“ã‚’æŒãŸãªã„ ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¯è¤‡æ•°ã®åãƒ–ãƒãƒƒã‚¯ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆ(ã¾ãŸã¯ slot)ã‚’æŒã¡ã€åãƒ–
mimosafa 2023/06/03
ã‚ã¨ã§èªã‚€

layout
ãƒªãƒ³ã‚¯
Pass Multiple Children to a React Component with Slots
You need to create a reusa ble component. But the children prop wonâ€™t cut it. This component needs to be able to accept multiple children and place them in the layout as it sees fit â€“ not right next to each other. Maybe youâ€™re creating a Layout with a header, a sidebar, and a content area. Maybe youâ€™re writing a NavBar with a left side and a right side that need to be dynamic. These cases are all e
mimosafa 2022/03/23
ã‚ã¨ã§èªã‚€

react

layout

slot
ãƒªãƒ³ã‚¯
https://csslayout.io/
mimosafa 2020/07/29
ã‚ã¨ã§èªã‚€

css

layout

design
ãƒªãƒ³ã‚¯
CSS æœ€è¿‘ã®Webãƒšãƒ¼ã‚¸ã‚„ã‚¢ãƒ—ãƒªã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã«é©ã—ãŸã€ãƒ©ãƒƒãƒ‘ãƒ¼ã®å®Ÿè£…ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’å¾¹åº•è§£èª¬
æœ€è¿‘ã®Webãƒšãƒ¼ã‚¸ã‚„ã‚¢ãƒ—ãƒªã«é©ã—ãŸã€ãƒ©ãƒƒãƒ‘ãƒ¼ã®å®Ÿè£…ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒ©ãƒƒãƒ‘ãƒ¼ã¨ã¯ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’èªã¿ã‚„ã™ã„å¹…ã«åŒ…ã‚€ã‚‚ã®ã§ã€CSSã§ã®ãƒ©ãƒƒãƒ‘ãƒ¼ã®å®Ÿè£…ã€ãƒžãƒ¼ã‚¸ãƒ³ã‚„ãƒ‘ãƒ‡ã‚£ãƒ³ã‚°ã®è¿½åŠ ã€ä¸å¤®æƒãˆã€ãƒ©ãƒƒãƒ‘ãƒ¼ã®ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã€Flexboxã‚„CSS Gridã¨ã®çµ„ã¿åˆã‚ã›æ–¹ãªã©ã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®å®Ÿè£…ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ãŒæº€è¼‰ã§ã™ã€‚ Styling Layout Wrappers In CSS by Ahmad Shadeed ã¯ã˜ã‚ã« ãƒ©ãƒƒãƒ‘ãƒ¼ã¨ã¯ ãƒšãƒ¼ã‚¸ã«ãƒ©ãƒƒãƒ‘ãƒ¼ãŒå¿…è¦ãªç†ç”± CSSã§ã®ãƒ©ãƒƒãƒ‘ãƒ¼ã®å®Ÿè£… ãƒ©ãƒƒãƒ‘ãƒ¼ã®displayã®ã‚¿ã‚¤ãƒ— ãƒ©ãƒƒãƒ‘ãƒ¼é–“ã®ãƒžãƒ¼ã‚¸ãƒ³ã®è¿½åŠ å…¨ç”»é¢ã‚»ã‚¯ã‚·ãƒ§ãƒ³å†…ã®ãƒ©ãƒƒãƒ‘ãƒ¼ ãƒ’ãƒ¼ãƒãƒ¼ã‚»ã‚¯ã‚·ãƒ§ãƒ³ã«ãƒ©ãƒƒãƒ‘ãƒ¼ãŒå¿…è¦ã§ã™ã‹ï¼Ÿ ãƒ©ãƒƒãƒ‘ãƒ¼ã‚’ä¸å¤®æƒãˆã«ã™ã‚‹ã‹ã€å·¦æƒãˆã«ã™ã‚‹ã‹ ãƒ©ãƒƒãƒ‘ãƒ¼ã®ãƒãƒªã‚¨ãƒ¼ã‚·ãƒ§ãƒ³ã«å¯¾ã™ã‚‹CSSå¤‰æ•°ã®ä½¿ç”¨ display: contents;ã‚’ä½¿ç”¨ã™ã‚‹ æµå‹•çš„ãªèƒŒæ™¯ã«å›ºå®šã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’é…ç½®
mimosafa 2020/07/09
css

layout

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

ã‚ã¨ã§èªã‚€
ãƒªãƒ³ã‚¯
Flexboxã§ã‚¹ãƒžãƒ¼ãƒˆãƒ‹ãƒ¥ãƒ¼ã‚¹ï¼ˆSmartNewsï¼‰é¢¨ã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’å®Ÿè£…ã™ã‚‹æ–¹æ³• - Design Color
ã‚¹ãƒžãƒ¼ãƒˆãƒ‹ãƒ¥ãƒ¼ã‚¹ï¼ˆSmartNewsï¼‰é¢¨ã®è¡¨ç¤ºã¨ã¯ ã€Œã‚¹ãƒžãƒ¼ãƒˆãƒ‹ãƒ¥ãƒ¼ã‚¹ï¼ˆSmartNewsï¼‰ã€ã¨ã¯ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ç”¨ã®ãƒ‹ãƒ¥ãƒ¼ã‚¹ã‚¢ãƒ—ãƒªã§ã™ã€‚å··ã§ã¯ç•¥ã—ã¦ã€Œã‚¹ãƒžãƒ‹ãƒ¥ãƒ¼ã€ãªã‚“ã¦å‘¼ã°ã‚Œã¦ã„ã¾ã™ã€‚ èªã¿è¾¼ã¿ãŒé€Ÿã„ãŸã‚ã€ã„ã¤ã‚‚æƒ…å ±åŽé›†ã«ãŠä¸–è©±ã«ãªã£ã¦ã„ã‚‹ã‚¢ãƒ—ãƒªã§ã™ãŒã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚‚è¦‹ã‚„ã™ã„ã‚“ã§ã™ã‚ˆãã€‚ç¸¦ã ã‘ã§ãªãã€2ã€œ3åˆ—ã§æ¨ªä¸¦ã³ã«ãªã£ãŸã‚Šã¨è¦‹ãŸç›®ã«å¤‰åŒ–ãŒã‚ã£ã¦è¨˜äº‹ãŒè¦‹ã¤ã‘ã‚„ã™ã„ã‚“ã§ã™ã€‚ SmartNews ãŸã ã€ã“ã®è¦‹ãŸç›®ã‚’floatã‚„display: inline-block;ã§å®Ÿè£…ã—ã‚ˆã†ã¨ã™ã‚‹ã¨ã‹ãªã‚Šé¢å€’â€¦ã¨æ€ã£ã¦ã„ãŸãã‚“ãªæ™‚ã€æŸ”è»Ÿã«å¯¾å¿œã§ãã‚‹Flexboxã®å˜åœ¨ã‚’çŸ¥ã‚Šã¾ã—ãŸã€‚æ¬¡ã‹ã‚‰ã¯ã€Flexboxã‚’ä½¿ã£ãŸå®Ÿè£…æ–¹æ³•ã‚’ãŠä¼ãˆã—ã¦ã„ãã¾ã™ã‚ˆï¼ ä»¥ä¸‹ãŒå®Ÿè£…ç”¨ã®ã‚³ãƒ¼ãƒ‰ã§ã™ã€‚ã€ŒCSSã€ã®ã‚¿ãƒ–ã‚’ã‚¯ãƒªãƒƒã‚¯ã—ã¦ç¢ºèªã—ã¦ã¿ã¦ãã ã•ã„ã€‚ See the Pen Flexboxã§ã‚¹ãƒžãƒ¼ãƒˆãƒ‹ãƒ¥ãƒ¼ã‚¹ï¼ˆSmartNewsï¼‰é¢¨
mimosafa 2017/11/29
flexbox

css

layout
ãƒªãƒ³ã‚¯
ç„¡æ–™ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã‚µã‚¤ãƒˆã‚’ã‚¯ãƒªãƒƒã‚¯ã ã‘ã§ãƒ‡ã‚¶ã‚¤ãƒ³ã—ã¦ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã‚‚å¯èƒ½ãªã€ŒLaunchacoã€
é–²è¦§è€…ã®ç’°å¢ƒã«å¿œã˜ã¦ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¤‰åŒ–ã™ã‚‹ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ã‚µã‚¤ãƒˆã‚’æ‰‹è»½ã«ç„¡æ–™ã§ä½œæˆã§ãã‚‹ã‚µãƒ¼ãƒ“ã‚¹ãŒã€ŒLaunchacoã€ã§ã™ã€‚ã“ã®ã‚µãƒ¼ãƒ“ã‚¹ã‚’ä½¿ã†ã¨ã€ã»ã‚“ã®æ•°ã‚¯ãƒªãƒƒã‚¯ã ã‘ã§ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ãƒšãƒ¼ã‚¸ã‚’ä½œæˆã—ã¦ã€å¿…è¦ãªãƒ•ã‚¡ã‚¤ãƒ«ã‚’ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã™ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚ Launchaco - Name a business http://launchaco.com/build/ ãƒšãƒ¼ã‚¸ã‚’é–‹ãã¨ã™ãã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’é–‹å§‹ã§ãã‚‹çŠ¶æ…‹ã«ãªã£ã¦ã„ã¾ã™ã€‚ ã€ŒStep 1/4ã€ã§ã¯ã¾ãšã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ãƒ†ãƒ³ãƒ—ãƒ¬ãƒ¼ãƒˆã‚’é¸æŠžã€‚ ã™ã‚‹ã¨æ¬¡ã®ãƒšãƒ¼ã‚¸ã§ã€é¸æŠžã—ãŸãƒ†ãƒ³ãƒ—ãƒ¬ãƒ¼ãƒˆã«ã‚ˆã‚‹ãƒšãƒ¼ã‚¸ãƒ‡ã‚¶ã‚¤ãƒ³ãŒè¡¨ç¤ºã•ã‚Œã¾ã—ãŸã€‚ä¸Šéƒ¨ã®ãƒ†ãƒ³ãƒ—ãƒ¬ãƒ¼ãƒˆã‚’ã‚¯ãƒªãƒƒã‚¯ã™ã‚‹ã“ã¨ã§ã€ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ ã§å¤‰åŒ–ã•ã›ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚ ãƒšãƒ¼ã‚¸ä¸Šéƒ¨ã®ãƒ†ã‚ã‚¹ãƒˆæ¬„ã®å†…å®¹ã‚’è‡ªç”±ã«æ›¸ãã‹ãˆã‚‹ã“ã¨ã‚‚å¯èƒ½ã€‚æ—¥æœ¬èªžã‚‚å•é¡Œãªãåˆ©ç”¨ã§ãã¾ã™ã€‚ ã‚‚ã¡ã‚ã‚“ã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãƒ‡ã‚¶ã‚¤ãƒ³ã«ãªã£ã¦ã„ã‚‹ã®ã§ã€æ¨ªå¹…
mimosafa 2016/12/09
responsive

layout

CC
ãƒªãƒ³ã‚¯
ç†è§£ã—ã¦ãŠããŸã„ã€CSSã«ã‚ˆã‚‹ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ä»•çµ„ã¿ï¼ˆfont-sizeï¼line-heightç·¨ï¼‰Inline Layoutâ”€Frontrend Conference
ç†è§£ã—ã¦ãŠããŸã„ã€CSSã«ã‚ˆã‚‹ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ä»•çµ„ã¿ï¼ˆfont-sizeï¼line-heightç·¨ï¼‰Inline Layoutâ”€Frontrend Conference é«˜æ´¥æˆ¸å£®ï¼ˆæ ªå¼ä¼šç¤¾ãƒ”ã‚¯ã‚»ãƒ«ã‚°ãƒªãƒƒãƒ‰ï¼‰ ã“ã®è¨˜äº‹ã¯ã€Frontrend Conferenceã®ã‚»ãƒƒã‚·ãƒ§ãƒ³ã€ŒInline layoutã€ã§ãŠè©±ã•ã›ã¦ã„ãŸã ã„ãŸå†…å®¹ã‚’åŸºã«ã€é€£è¼‰è¨˜äº‹ï¼ˆå…¨4å›žï¼‰ã¨ã—ã¦æ›¸ãèµ·ã“ã—ãŸã‚‚ã®ã§ã™ã€‚ä»Šå›žã¯ç¬¬ï¼‘å›žç›®ã§ã™ã€‚ ã¯ã˜ã‚ã« Frontrend Conferenceã§ã¯ã€çš†ã•ã‚“ãŒæ–°ã—ã„æŠ€è¡“ã«ã¤ã„ã¦è©±ã—ã¦ã„ãŸä¸ã€ç§ã‹ã‚‰ã¯CSS2.1ã®ãŠè©±ã‚’ã•ã›ã¦ã„ãŸã ãã¾ã—ãŸã€‚ç§ãŒè§£èª¬ã—ãŸã®ã¯ã€CSSã‚’æ›¸ãä¸Šã§æ¬ ã‹ã›ãªã„ã€ä»¥ä¸‹ã®4ã¤ã«ã¤ã„ã¦ã§ã™ã€‚ font-size line-height vertical-align inline-block ãƒˆãƒ¬ãƒ³ãƒ‰ã¨ã¯ã»ã©é ã„å†…å®¹ã§ã¯ã‚ã‚Šã¾ã™ãŒã€å¤šãã®äººã«ã¨ã£ã¦ã€ãªã‚“ã¨ãªãæ„Ÿè¦š
mimosafa 2015/03/06
line-height

font-size

css

layout
ãƒªãƒ³ã‚¯
ã€Œç´™ã£ã½ã„ãƒ‡ã‚¶ã‚¤ãƒ³ã€ã®ç‰¹å¾´ã‚’ç›—ã‚ï¼ã‚¤ãƒ™ãƒ³ãƒˆãƒã‚¹ã‚¿ãƒ¼äº‹ä¾‹ã‹ã‚‰å¦ã¶ã€ç´™ã£ã½ã„ãƒ‡ã‚¶ã‚¤ãƒ³ã®ç‰¹å¾´ | ãƒ‡ã‚¶ã‚¤ãƒ³ | ãƒ–ãƒã‚° | æ±äº¬ã®Webåˆ¶ä½œä¼šç¤¾ãƒ»ãƒ›ãƒ¼ãƒ ãƒšãƒ¼ã‚¸åˆ¶ä½œï½œQUOITWORKS Inc.ï¼ˆæ ªå¼ä¼šç¤¾ã‚¯ã‚ªãƒ¼ãƒˆãƒ¯ãƒ¼ã‚¯ã‚¹ï¼‰
ã‚¯ã‚ªãƒ¼ãƒˆãƒ¯ãƒ¼ã‚¯ã‚¹ã®ãƒ–ãƒã‚° æ±äº¬ã®Webåˆ¶ä½œä¼šç¤¾ æ ªå¼ä¼šç¤¾ã‚¯ã‚ªãƒ¼ãƒˆãƒ¯ãƒ¼ã‚¯ã‚¹ã®ãƒ–ãƒã‚°ã§ã™ã€‚ã“ã“ã§ã¯Webåˆ¶ä½œã«ãŠã‘ã‚‹ãƒŽã‚¦ãƒã‚¦ã‚„ãƒŠãƒ¬ãƒƒã‚¸ã€ãƒ“ã‚¸ãƒã‚¹ã«é–¢ã™ã‚‹è¦šæ›¸ãªã©ã¾ã¨ã‚ã¦ç™ºä¿¡ã—ã¦ãŠã‚Šã¾ã™ã€‚ quoitworksã®ãƒ ãƒ©ãƒžãƒ„ã“ã¨ã€muuuuu.orgã®ä¸ã®äººã€ãƒ ãƒ¼ã¡ã‚ƒã‚“ã§ã™ã€‚ã“ã‚“ã«ã¡ã¯ã€‚ãŠç›†ä¼‘ã¿ã¾ã§ã‚‚ã†å°‘ã—ã§ã™ãï¼ã¿ãªã•ã¾ä»•äº‹ã®é€²æ—ã¯ã„ã‹ãŒã§ã—ã‚‡ã†ã‹ã€‚ webã®ãƒ‡ã‚¶ã‚¤ãƒ³ã®ç¾å ´ã§ã‚ˆãã‚ªãƒ¼ãƒ€ãƒ¼ã¨ã—ã¦ã‚ã‚‹ã®ãŒã€ã€Œç´™ã£ã½ã„ãƒ‡ã‚¶ã‚¤ãƒ³ã€ã§ã™ã€‚ webã®ãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°æ™‚ã®ã“ã¨ã‚’è€ƒãˆã™ãŽã¦ã—ã¾ã£ãŸã‚Šã€ãƒ¦ãƒ¼ã‚¶ãƒ“ãƒªãƒ†ã‚£ã‚„ã€webç‹¬è‡ªã®è¦–ç·šã®æµã‚Œã‚’æ„è˜ã—ã™ãŽã¦ã—ã¾ã†ã‚ã¾ã‚Šã«ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ã•ã«æ¬ ã‘ãŸã‚Šã™ã‚‹ã“ã¨ãŒå¤šã„ã‚ˆã†ãªæ°—ãŒã—ã¾ã™ã€‚ ã¾ãŸãŠå®¢ã•ã‚“ã¨ã—ã¦ã‚‚ç”Ÿã¾ã‚Œã¦ã‹ã‚‰webã‚’è¦‹ã¦ã„ã‚‹æ™‚é–“ã‚ˆã‚Šã‚‚ã€ç´™ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’è¦‹ã‚‹ã“ã¨ãŒå¤šã„ã®ã§ã€ã‚¤ãƒ¡ãƒ¼ã‚¸ã¨ã—ã¦ç´™ï¼ˆãƒã‚¹ã‚¿ãƒ¼ã€é›‘èªŒï¼‰ã®ã‚ˆã†ãªå®Œæˆå›³ã‚’ã‚¤ãƒ¡ãƒ¼ã‚¸ã•ã‚Œã‚‹ã“ã¨ãŒå¤šã„ã®ã§ã¯ãªã„ã®ã§ã—ã‚‡
mimosafa 2014/08/23
design

layout

ã¾ã¨ã‚

ãƒãƒ©ã‚·
ãƒªãƒ³ã‚¯
CSSã§2ã‚«ãƒ©ãƒ ã‚’ä½œã£ã¦ã¿ã‚‹ - kojika17
CSSã§2ã‚«ãƒ©ãƒ ã¨ã„ã£ã¦ã‚‚ã€ãã®ä½œæˆæ–¹æ³•ã¯æ§˜ã€…ã§ã™ã€‚ å¤šãã®ãƒ‘ã‚¿ãƒ¼ãƒ³ã‚’ç†è§£ã™ã‚‹ã“ã¨ã¯ã€CSSã«æŸ”è»Ÿæ€§ã‚’æŒãŸã›ã‚‹ã“ã¨ã«ã€ã¤ãªãŒã‚Šã¾ã™ã€‚ 1. floatã‚’åˆ©ç”¨ã™ã‚‹ åŸºæœ¬çš„ãªæ–¹æ³•ã§ã™ã€‚ åã«floatã‚’åˆ©ç”¨ã™ã‚‹ã¨ã€ç°è‰²ã®èƒŒæ™¯ã‚’æ•·ã„ã¦ã„ã‚‹è¦ªã®é«˜ã•ãŒç®—å‡ºã§ããªããªã‚‹ãŸã‚ã€èƒŒæ™¯è‰²ãŒå‡ºãªããªã£ãŸã‚Šã€ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå´©ã‚ŒãŸã‚Šã—ã¾ã™ã€‚ ã“ã‚Œã‚‰ã®å•é¡Œã‚’è§£æ±ºã™ã‚‹ã«ã¯ã€clearfix ã‹ overflowã‚’åˆ©ç”¨ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatã¨marginã‚’ä¸€å®šæ–¹å‘ã«ã‹ã‘ã‚‹ ç‰‡æ–¹ã«floatã€ç‰‡æ–¹ã¯floatã‚’ã‹ã‘ãŸæ–¹å‘ã«éš£ã®è¦ç´ ã®æ¨ªå¹…ä»¥ä¸Šã®marginã‚’ã¨ã‚‹æ–¹æ³•ã§ã™ã€‚ floatã®ã‹ã‹ã£ã¦ã„
mimosafa 2014/07/05
css

layout

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ
ãƒªãƒ³ã‚¯
ã‚¦ã‚§ãƒ–ã‚µã‚¤ãƒˆã‚„ãƒ–ãƒã‚°ã«ã‚ˆãã‚ã‚‹ãƒªã‚¹ãƒˆãƒ‡ã‚¶ã‚¤ãƒ³ãŒæµè¡Œã®ã‚°ãƒªãƒƒãƒ‰ãƒ‡ã‚¶ã‚¤ãƒ³ã‚ˆã‚Šã‚‚æœ‰åŠ¹ãªã‚ã‘
ã€Œã‚¦ã‚§ãƒ–ã®æœªæ¥ã‚’æ‹…ã†æ¬¡ã®UIãƒ‡ã‚¶ã‚¤ãƒ³ã¯ã€Žã‚«ãƒ¼ãƒ‰ã€ã«ã‚ã‚Šã€ã¨è¨€ã‚ã‚Œã‚‹ãªã©ã€ã‚¦ã‚§ãƒ–ã‚µã‚¤ãƒˆã‚’æ ¼åçŠ¶ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã—ãŸã‚°ãƒªãƒƒãƒ‰ãƒ‡ã‚¶ã‚¤ãƒ³ã¯äººæ°—ã§ã€å¤šãã®ã‚¢ãƒ—ãƒªã‚„ã‚¦ã‚§ãƒ–ã‚µã‚¤ãƒˆã§æŽ¡ç”¨ã•ã‚Œã¦ã„ã¾ã™ãŒã€å®Ÿéš›ã«ã‚°ãƒªãƒƒãƒ‰ãƒ‡ã‚¶ã‚¤ãƒ³ã¨ä»¥å‰ã‹ã‚‰ã‚ã‚‹ãƒªã‚¹ãƒˆãƒ‡ã‚¶ã‚¤ãƒ³ã®2ç¨®é¡žã‚’ãƒ†ã‚¹ãƒˆã—ã¦ã¿ãŸã¨ã“ã‚ã€ã€Œãƒªã‚¹ãƒˆãƒ‡ã‚¶ã‚¤ãƒ³ã®æ–¹ãŒæ˜Žã‚‰ã‹ã«è¦‹ã‚„ã™ãã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®åå¿œãŒã„ã„ã€ã¨ã„ã†çµè«–ãŒå‡ºã¾ã—ãŸã€‚ List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ ã‚°ãƒªãƒƒãƒ‰ãƒ‡ã‚¶ã‚¤ãƒ³ã¨ãƒªã‚¹ãƒˆãƒ‡ã‚¶ã‚¤ãƒ³ã®ã©ã¡ã‚‰ãŒæœ¬å½“ã«åŠ¹æžœçš„ãªã®ã‹ï¼Ÿã¨ã„ã†ã“ã¨ã‚’èª¿æŸ»ã—ãŸã®ã¯ã‚½
mimosafa 2014/04/03
grid

layout

ui

ux
ãƒªãƒ³ã‚¯
[CSS]ã‚¢ã‚¤ãƒ†ãƒ æ•°ãŒä¸æ˜Žã§ã‚‚ã‚«ãƒ©ãƒ æ•°ã«åˆã‚ã›ã¦ã´ã£ãŸã‚Šã«é…ç½®ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ
ä¸‹è¨˜ã®ã‚ˆã†ãª3ã‚«ãƒ©ãƒ ã®ã‚°ãƒªãƒƒãƒ‰ã«è¤‡æ•°ã®ã‚¢ã‚¤ãƒ†ãƒ ã‚’é…ç½®ã™ã‚‹æ™‚ã€ã‚¢ã‚¤ãƒ†ãƒ ã®æ•°ãŒ3ã®å€æ•°ã ã£ãŸã‚‰ã´ã£ãŸã‚ŠåŽã¾ã‚Šã¾ã™ãŒã€ã‚¢ã‚¤ãƒ†ãƒ ãŒ7, 8å€‹ã®å ´åˆã¯æœ€å¾Œã«ä½™ç™½ã‚’ç”Ÿã˜ã¾ã™ã€‚ ã‚‚ã¡ã‚ã‚“ä½™ç™½ã®ã¾ã¾ã§ã‚‚è‰¯ã„å ´åˆã¯ã‚ã‚Šã¾ã™ãŒã€ã´ã£ãŸã‚ŠåŽã‚ãŸã„ã¨ã„ã†æ™‚ã«å½¹ç«‹ã¤ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ Tetris & The Power Of CSS åŸºæœ¬ã¨ãªã‚‹HTMLã¯ã€ãƒªã‚¹ãƒˆã§ã‚¢ã‚¤ãƒ†ãƒ ã‚’é…ç½®ã—ã¾ã™ã€‚ HTML ã‚¢ã‚¤ãƒ†ãƒ æ•°ã¯ã€é©å½“ã«å¤‰æ›´ã—ã¦æ§‹ã„ã¾ã›ã‚“ã€‚ <ul class="flex-container"> <li class="flex-it em">1</li> <li class="flex-it em">2</li> <li class="flex-it em">3</li> <li class="flex-it em">4</li> <li class="flex-it em">5</li> <li cla
mimosafa 2013/11/12
css

layout

flexbox

css3

display
ãƒªãƒ³ã‚¯
[JS]Pinterestã‚„ã‚¦ã‚©ãƒ¼ãƒ«ãªã©ã®æœ€è¿‘ã‚ˆãè¦‹ã‹ã‘ã‚‹ã‚«ãƒ¼ãƒ‰ã‚’ä½¿ã£ãŸãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’ä½œæˆã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -Freewall
Demo :Piterest Layout Pinteresté¢¨ã«é«˜ã•ã®ç•°ãªã‚‹ã‚«ãƒ¼ãƒ‰ã‚’ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€‚ Freewallã®ä½¿ã„æ–¹ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« headå†…ã«jquery.jsã¨å½“ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML ã‚«ãƒ¼ãƒ‰ã‚’åŒ…ã‚€ãƒ©ãƒƒãƒ‘ãƒ¼ã‚’ç”¨æ„ã—ã¾ã™ã€‚ <div id="freewall" class="free-wall"> </div> Step 3: JavaScript ãƒ‡ãƒ¢ã§ã¯ã€å„ã‚«ãƒ¼ãƒ‰ã‚’ã‚¹ã‚¯ãƒªãƒ—ãƒˆã§ç”Ÿæˆã—ã¦ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’ä½œæˆã—ã¦ã„ã¾ã™ã€‚ <sc
mimosafa 2013/10/21
jQuery

grid

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

æ•´åˆ—

layout
ãƒªãƒ³ã‚¯
ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚¿ã‚¤ãƒ«çŠ¶ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’å®Ÿç¾ã§ãã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒFreewallã€:phpspoté–‹ç™ºæ—¥èªŒ
Freewall - jQuery plugin for creating grid layouts. ãƒ€ã‚¤ãƒŠãƒŸãƒƒã‚¯ãªã‚¿ã‚¤ãƒ«çŠ¶ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’å®Ÿç¾ã§ãã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒFreewallã€ã€‚ Gridã‚„Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ä»–ã€è‡ªç”±ã«ãƒ–ãƒãƒƒã‚¯ã‚’çµ„åˆã›ã¦éš™é–“ã®ãªã„ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒä½œã‚Œã¾ã™ã€‚ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–å¯¾å¿œã€‚ ï¼‘è¦ç´ ã‚’ã‚¯ãƒªãƒƒã‚¯ã™ã‚‹ã¨æ‹¡å¤§ã™ã‚‹ãªã©ã€ã¡ã‚‡ã£ã¨æ–°ã—ã„ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå®Ÿè£…ã§ãã¾ã™ã€‚ ã¡ã‚‡ã£ã¨å¤‰ã‚ã£ãŸæ„Ÿã˜ã®ã‚µã‚¤ãƒˆã‚’ä½œã‚‹ã®ã«ï¼‘ãƒã‚¿ã¨ã—ã¦ã„ã„ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ã€‚ é–¢é€£ã‚¨ãƒ³ãƒˆãƒª CSSã§è¨å®šãŒã§ãã‚‹Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå®Ÿè£…ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã€ŒSalvattoreã€ ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ã§å†ç·¨æˆã§ãã‚‹Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆä½œæˆãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒjQuery.Shapeshiftã€
mimosafa 2013/10/20
ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

grid

jQuery

layout
ãƒªãƒ³ã‚¯
CSSã§è¨å®šãŒã§ãã‚‹Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå®Ÿè£…ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã€ŒSalvattoreã€:phpspoté–‹ç™ºæ—¥èªŒ
Salvattore ? A jQuery Masonry alternative with CSS-driven configuration. CSSã§è¨å®šãŒã§ãã‚‹Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå®Ÿè£…ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã€ŒSalvattoreã€ã€‚ Pinteresté¢¨UIã‚’å®Ÿç¾ã™ã‚‹ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã¯å¤šæ•°ã‚ã‚Šã¾ã™ãŒã€CSSã§è¨å®šãŒå‡ºæ¥ã‚‹ã®ã¯ä¾¿åˆ©ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“ JSã¯ä½¿ã£ã¦ã„ã¾ã™ãŒã€ã‚«ãƒ©ãƒ æ•°ç‰ã®èª¿æ•´ã‚’CSSã§ã§ãã‚‹ã®ãŒç‰¹å¾´ã§ã™ã€‚ é–¢é€£ã‚¨ãƒ³ãƒˆãƒª ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ã§å†ç·¨æˆã§ãã‚‹Pinteresté¢¨ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆä½œæˆãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒjQuery.Shapeshiftã€ ç”»åƒã‚’ã‚¯ãƒªãƒƒã‚¯ã§é¸æŠžã—ã¦ãƒ•ã‚©ãƒ¼ãƒ é€ä¿¡ã§ãã‚‹ã‚ˆã†ã«ã™ã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒImage Pickerã€
mimosafa 2013/09/28
css

Pinterest

grid

masonry

jQuery

layout
ãƒªãƒ³ã‚¯
ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã‚‚ãƒ–ãƒãƒƒã‚¯ã‚’å›ºå®šä½ç½®ã«è¡¨ç¤ºã•ã›ã‚‰ã‚Œã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSticky-Kitã€:phpspoté–‹ç™ºæ—¥èªŒ
ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã‚‚ãƒ–ãƒãƒƒã‚¯ã‚’å›ºå®šä½ç½®ã«è¡¨ç¤ºã•ã›ã‚‰ã‚Œã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSticky-Kitã€ 2013å¹´08æœˆ08æ—¥- Sticky-Kit | jQuery plugin for sticky elements ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã‚‚ãƒ–ãƒãƒƒã‚¯ã‚’å›ºå®šä½ç½®ã«è¡¨ç¤ºã•ã›ã‚‰ã‚Œã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€ŒSticky-Kitã€ ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã‚‚ã€ãƒŠãƒ“ã‚²ãƒ¼ã‚·ãƒ§ãƒ³ã¯å›ºå®šä½ç½®ã«è¡¨ç¤ºã•ã›ãŸã„ã¨ã„ã†å ´åˆãŒã‚ã‚Šã¾ã™ã€‚æœ€è¿‘æµè¡Œã‚Šã§ã™ãã€‚ ã‹ãªã‚Šè¤‡é›‘ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã§ã‚ã£ã¦ã‚‚ã€ç°¡å˜ã«è¦ç´ ã‚’å›ºå®šã—ã€ãƒ¦ãƒ¼ã‚¶ãƒ“ãƒªãƒ†ã‚£å‘ä¸Šã«ç¹‹ã’ã‚‰ã‚Œã‚‹ã®ã¯ä¾¿åˆ©ã€‚ å®Ÿéš›ã«ã“ã‚Œã‚’ï¼‘ã‹ã‚‰ã‚„ã‚ã†ã¨ã™ã‚‹ã¨ã‹ãªã‚Šå¤§å¤‰ã§ã™ãŒã€jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã®ãŸã‚ã€1è¡Œã§ã‚µã‚¯ãƒƒã¨å®Ÿç¾ã§ãã‚‹ã‚ãŸã‚ŠãŒç´ æ™´ã‚‰ã—ã„ã§ã™ é–¢é€£ã‚¨ãƒ³ãƒˆãƒª ã‚¢ã‚¤ãƒ†ãƒ ã‚’ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ã§ç”»é¢ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆå‡ºæ¥ã‚‹jQueryãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã€Œgridster.jsã€ ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ã§å†ç·¨æˆã§ãã‚‹Pinteres
mimosafa 2013/08/08
ã‚¹ã‚¯ãƒãƒ¼ãƒ«

jQuery

affix

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

å›ºå®š

fix

layout
ãƒªãƒ³ã‚¯
CSS Flexible Box ï¼ˆFlexboxï¼‰ ã‚’ä½¿ã£ã¦ã¿ã‚ˆã† - æœ€æ–°ä»•æ§˜å¯¾å¿œç‰ˆ | WWW WATCH
ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã‚„å¯å¤‰ã™ã‚‹ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚µã‚¤ã‚ºãªã©ã«æŸ”è»Ÿã«å¯¾å¿œã™ã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¯èƒ½ãª CSS Flexible Box ã«ã¤ã„ã¦ã€æœ€æ–°ã® W3C ä»•æ§˜ã«åŸºã¥ã„ãŸè§£èª¬ã‚’ã‚µãƒ³ãƒ—ãƒ«ã‚½ãƒ¼ã‚¹ã‚’ä½¿ã„ãªãŒã‚‰ã‚„ã£ã¦ã¿ã¾ã™ã€‚ CSS3 ã®ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã¨ã—ã¦ç–å®šã•ã‚Œã¦ã„ã‚‹ CSS Flexible Box ï¼ˆCSS3 Flexboxï¼‰ ã¯ã€CSS ã«ã‚ˆã‚‹ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’å®Ÿç¾ã™ã‚‹ãŸã‚ã®ä»•çµ„ã¿ã€‚ ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ãŸã‚ã® CSS ãƒ—ãƒãƒ‘ãƒ†ã‚£ã¯ä»–ã«ã‚‚ã‚ã‚Šã¾ã™ãŒã€CSS Flexible Box ã¯ç‰¹ã«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã‚„å¯å¤‰ã™ã‚‹ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚µã‚¤ã‚ºãªã©ã«æŸ”è»Ÿã«å¯¾å¿œã—ãŸã€ãã®åã®é€šã‚Šãƒ•ãƒ¬ã‚ã‚·ãƒ–ãƒ«ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒå¯èƒ½ã§ã™ã€‚ ç¾åœ¨æœ€æ–°ã®ä»•æ§˜æ›¸ã¯ä¸‹è¨˜ã€‚2012å¹´ 9æœˆ 18æ—¥ä»˜ã‘ã§å‹§å‘Šå€™è£œã«ãªã£ã¦ã„ã¾ã™ã€‚ CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
mimosafa 2013/07/17
css3

css

flexiblebox

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

layout

ä»•æ§˜
ãƒªãƒ³ã‚¯
[CSS]ãƒ‘ãƒ¼ã‚»ãƒ³ãƒˆã§æŒ‡å®šã•ã‚ŒãŸæ£ç¢ºãªã‚µã‚¤ã‚ºãŒä¸æ˜Žãªè¦ç´ ã‚’å¤©åœ°å·¦å³ã®ä¸å¤®ã«é…ç½®ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
å¤©åœ°å·¦å³ã®ä¸å¤®ã«é…ç½®ã—ãŸã„è¦ç´ ã®ã‚µã‚¤ã‚ºãŒå¹…ã‚‚é«˜ã•ã‚‚ãƒ”ã‚¯ã‚»ãƒ«ã§æŒ‡å®šã•ã‚Œã¦ã„ã‚Œã°ã€marginã‚„paddingã§ç°¡å˜ã«é…ç½®ã§ãã¾ã™ãŒã€ã‚µã‚¤ã‚ºæŒ‡å®šã«ãƒ‘ãƒ¼ã‚»ãƒ³ãƒˆã‚’ä½¿ç”¨ã—ãŸè¦ç´ ã ã¨è¡¨ç¤ºã‚µã‚¤ã‚ºã«ä¾å˜ã•ã‚Œã¦ã‚µã‚¤ã‚ºãŒåˆ†ã‹ã‚Šã¾ã›ã‚“ã€‚ ãã‚“ãªãƒ‘ãƒ¼ã‚»ãƒ³ãƒˆã§æŒ‡å®šã•ã‚ŒãŸãƒ”ã‚¯ã‚»ãƒ«ã§ã®æ£ç¢ºãªã‚µã‚¤ã‚ºãŒä¸æ˜Žãªè¦ç´ ã‚’å¤©åœ°å·¦å³ã®ä¸å¤®ã«é…ç½®ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ï¼šå¹…780pxã§è¡¨ç¤º HTML HTMLã¯ã‚·ãƒ³ãƒ—ãƒ«ã§ã€ä¸å¤®ã«é…ç½®ã™ã‚‹divè¦ç´ ã ã‘ã§ã™ã€‚ <body> <div>Percentage sized and still centered.</div> </body> CSS ã±ã£ã¨æ€ã„ã¤ãæ–¹æ³•ã¨ã—ã¦ã¯ãƒ‘ãƒ¼ã‚»ãƒ³ãƒˆã‚’ãƒã‚¬ãƒ†ã‚£ãƒ–ãƒžãƒ¼ã‚¸ãƒ³ã§ä½¿ãˆã°ã„ã„ã®ã§ã¯ã€ã¨ãªã‚‹ã¨ã“ã‚ã§ã™ãŒã€ãƒã‚¬ãƒ†ã‚£ãƒ–ãƒžãƒ¼ã‚¸ãƒ³ã‚’ä½¿ç”¨ã™ã‚‹ã¨å·¦å³ã®ä¸å¤®ã¯ã§ãã¾ã™ãŒã€å¤©åœ°ã®ä¸å¤®ãŒã†ã¾ãã„ãã¾ã›ã‚“ã€‚ ã“ã“ã§ã¯ãƒã‚¬ãƒ†ã‚£ãƒ–ãƒžãƒ¼ã‚¸ãƒ³ã§ã¯ãªãã€
mimosafa 2013/07/10
css

css3

layout

centering
ãƒªãƒ³ã‚¯
waterfall.js
divè¦ç´ ãªã©ã§é…ç½®ã—ãŸé«˜ã•ã®ç•°ãªã‚‹ãƒ‘ãƒãƒ«ã‚’ãƒ¬ãƒ³ã‚¬çŠ¶ã«ä¸€å®šã®éš™é–“ã§é…ç½®ã™ã‚‹jQueryå…¼Zeptoã®ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ å·¦ã®ã‚µã‚¤ãƒ‰ãƒãƒ¼ã¯é©ç”¨ãªã—ã€å³ã ã‘ãƒ¬ãƒ³ã‚¬çŠ¶ã«ã§ãã¾ã™ã€‚ waterfall waterfall -GitHub ãã†ã„ãˆã°æœ€è¿‘ã€ãƒ‡ãƒ¢ã«zeptoã®æ–¹ã‚’ä½¿ã£ã¦ã‚‹ãƒ—ãƒ©ã‚°ã‚¤ãƒ³ãŒå¢—ãˆã¦ãã¾ã—ãŸãã€‚ waterfallã®ãƒ‡ãƒ¢ waterfallã®ä½¿ã„æ–¹ waterfallã®ãƒ‡ãƒ¢ ã‚¹ã‚¯ãƒªãƒ—ãƒˆã®ãƒšãƒ¼ã‚¸è‡ªä½“ãŒãƒ‡ãƒ¢ã«ãªã£ã¦ã„ã¾ã™ã€‚ ã¾ãšã¯ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã‚µã‚¤ã‚ºã§ã®è¡¨ç¤ºã€‚ ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ã€å¹…780pxã§è¡¨ç¤º ã‚«ãƒ©ãƒ ã®æ•°ã¯ã‚«ãƒ©ãƒ ã®å¹…ã®æœ€å°å€¤ã‚’è¨å®šã™ã‚‹ã“ã¨ã§ã€è‡ªå‹•ã§è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ ãƒšãƒ¼ã‚¸å†…ã®é©ç”¨ç¯„å›²ã‚‚æŒ‡å®šã§ãã‚‹ã®ã§ã€å·¦ã®ã‚µã‚¤ãƒ‰ãƒãƒ¼ã¯ãã®ã¾ã¾ã®è¡¨ç¤ºã§ã™ã€‚ waterfallã®ä½¿ã„æ–¹ ä½¿ã„æ–¹ã¯ç°¡å˜ã§ã™ã€‚ HTMLãŒã‚ã‚Œã°ã€æ•°è¡ŒåŠ ãˆã‚‹ã ã‘ã§å®Œäº†ã§ã™ã€‚ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« waterfallã¯j
mimosafa 2013/06/26
layout

grid

jQuery
ãƒªãƒ³ã‚¯
è¦ç´ ã‚’å¤©åœ°å·¦å³ä¸å¤®ã«é…ç½®ã§ãã‚‹ç°¡å˜è¶…è»½é‡ã‚¹ã‚¯ãƒªãƒ—ãƒˆ -Midway.js | ã‚³ãƒªã‚¹
ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã‚„ã‚¹ãƒžãƒ•ã‚©ãƒ»ã‚¿ãƒ–ãƒ¬ãƒƒãƒˆã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–å¯¾å¿œã§ã€ç”»åƒã‚„ãƒ†ã‚ã‚¹ãƒˆãªã©ã‚’å¤©åœ°å·¦å³ã®ä¸å¤®ã«ç°¡å˜ã«é…ç½®ã§ãã‚‹è¶…è»½é‡ï¼ˆ1KBï¼‰ã®ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ä½œæ¥ã¯ã€HTMLã«2ã¤è¿½åŠ ã™ã‚‹ã ã‘ã§ã™ã€‚ Midway.js Midway.jsã®ãƒ‡ãƒ¢ Midway.jsã®ä½¿ã„æ–¹ Midway.jsã®ãƒ‡ãƒ¢ å¤©åœ°å·¦å³ä¸å¤®é…ç½®ã¯è¡¨ç¤ºã‚µã‚¤ã‚ºã‚’å¤‰æ›´ã—ã¦ã‚‚ã€å¤‰ã‚ã‚‰ãšã«å¤©åœ°å·¦å³ä¸å¤®é…ç½®ã«ãªã‚Šã¾ã™ã€‚ ãƒ‡ãƒ¢ã¯ã€ãƒ–ãƒ«ãƒ¼ã®çŸ©å½¢ã®ä¸ã«ã€ãƒ›ãƒ¯ã‚¤ãƒˆã®è¦ç´ ã‚’å¤©åœ°å·¦å³ä¸å¤®é…ç½®ã«ã—ã¦ã„ã¾ã™ã€‚ ã¾ãšã¯ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã‚µã‚¤ã‚ºã‹ã‚‰ã€‚ ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ï¼šIE7ãƒ¢ãƒ¼ãƒ‰ã§è¡¨ç¤º Midway.jsã®ä½¿ã„æ–¹ ä½¿ã„æ–¹ã¯ç°¡å˜ã§ã€ã‚¹ãƒ†ãƒƒãƒ—ã¯2ã¤ã§ã™ã€‚ Step 1: å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ« headå†…ã«ã€ã‚¹ã‚¯ãƒªãƒ—ãƒˆã‚’å¤–éƒ¨ãƒ•ã‚¡ã‚¤ãƒ«ã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> <script src="http://code.jquery.com/jquery-latest.js"></s
mimosafa 2013/06/05
jQuery

layout

ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆ

ä¸å¤®
ãƒªãƒ³ã‚¯
Windows8ã®ãƒ‘ãƒãƒ«é¢¨UIã‚’ä½œæˆã™ã‚‹ã‚µãƒ³ãƒ—ãƒ«ï¼†ãƒ‡ãƒ¢:phpspoté–‹ç™ºæ—¥èªŒ
Fullscreen Layout with Page Transitions | Codrops Windows8ã®ãƒ‘ãƒãƒ«é¢¨UIã‚’ä½œæˆã™ã‚‹ã‚µãƒ³ãƒ—ãƒ«ï¼†ãƒ‡ãƒ¢ã€‚ ã‚¿ãƒ–ãƒ¬ãƒƒãƒˆãªã©ã§ã‚‚ä½¿ã„ã‚„ã™ã„ã‚¤ãƒ³ã‚¿ãƒ•ã‚§ãƒ¼ã‚¹ã‚’å®Ÿç¾ã™ã‚‹ãŸã‚ã®ã‚µãƒ³ãƒ—ãƒ«ãŒé…å¸ƒã•ã‚Œã¦ã„ã¾ã™ã€‚ ã‚«ãƒƒã‚³ã„ã„ã®ã§ãã®ã¾ã¾ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã—ã¦ä½¿ãˆãã†ã§ã™ã€‚ ã‚¿ãƒƒãƒç¯„å›²ãŒå¤§ãããªã„ã¨ã‚¿ãƒƒãƒç«¯æœ«ã§ã¯ä½¿ã„ã«ãããªã‚Šã¾ã™ãŒã“ã‚Œã ã¨ååˆ†ãªå¤§ãã•ã§ã™ã é–¢é€£ã‚¨ãƒ³ãƒˆãƒª ãƒ¢ãƒ€ãƒ³ãªã‚µã‚¤ãƒˆã‚’ä½œæˆã™ã‚‹ãŸã‚ã®CSS3ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«é›† CSS3ã§Chromeé¢¨ã‚¦ã‚£ãƒ³ãƒ‰ã‚¦ã‚’ä½œæˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« PHPã§OAuthã‚µãƒ¼ãƒã‚’ä½œæˆã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« WEBãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ãªã‚‰è¦‹ã¦ãŠãã¹ãCSS3ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« ãƒ†ã‚ã‚¹ãƒˆã‚’å††å½¢ã«æç”»ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«
mimosafa 2013/04/30
layout

css3
ãƒªãƒ³ã‚¯
1 2 æ¬¡ã®ãƒšãƒ¼ã‚¸