Webサイトを使ã„ã‚„ã™ãï¼UIデザインã®CSSå°æŠ€ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯21個ã¾ã¨ã‚ï¼ˆå®Ÿä¾‹ã‚µãƒ³ãƒ—ãƒ«ã‚³ãƒ¼ãƒ‰ä»˜ï¼‰ç´ æ•µãªã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ãƒ¼ã‚¹ã‚’心ãŒã‘ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¨ã‚¯ã‚¹ãƒšãƒªã‚¨ãƒ³ã‚¹ã‚’æ ¼æ®µã«æ”¹å–„ã™ã‚‹ã“ã¨ãŒã§ãã‚‹ã€UIデザインã®é‡è¦ãƒã‚¤ãƒ³ãƒˆã‚’具体的ãªHTML/CSSã®ã‚µãƒ³ãƒ—ル例ã¨ä¸€ç·’ã«ã”紹介ã—ã¾ã™ã€‚ã“れらã®å„ãƒã‚¤ãƒ³ãƒˆã¯ã€ã‚‚ã¨ã‚‚ã¨@steveschogerãŒTwitterã§ãƒ„イートã—ãŸå†…容ã¨ãªã‚Šã¾ã™ã€‚ 1. アイコンã¯ãƒ©ãƒ™ãƒ«ã‚ˆã‚Šã‚‚å°‘ã—ã ã‘明るãã—よã†ã€‚ æ–‡å—ラベルã®æ¨ªã«ã‚¢ã‚¤ã‚³ãƒ³ã‚’é…ç½®ã™ã‚‹ã¨ãã¯ã€å°‘ã—ã ã‘色を明るãã—ã¦ã¿ã¾ã—ょã†ã€‚ã“ã†ã™ã‚‹ã“ã¨ã§ã€ã‚‚ã£ã¨ã‚‚é‡è¦ãªæƒ…å ±ï¼ˆæ–‡å—ラベル）をã†ã¾ã強調ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ See the Pen Little UI Details : å°æŠ€ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るã„背景色ã§ã¯ã€ç™½æ–‡å—ã«å°‘ã—ã ã‘å½±ã‚’è¿½åŠ ã—よã†ã€‚ 背景色ãŒæ˜Žã‚‹ãã€ç™½æ–‡å—を利用ã™ã‚‹ã¨ãã¯ã€æ–‡å—ã«å°‘ã—ã ã‘ç´ æ•µãªå½±ã‚’åŠ ãˆã‚‹ã“ã¨ã§ã€ã‚ˆã‚Šèªã¿ã‚„ã™ããª
インフォグラフィックã®ãƒ‡ã‚¶ã‚¤ãƒ³ã€ˆè¦–ç·šã®æµã‚Œã€‰ç·¨ | ビジュアルシンã‚ング
èªã¾ã‚Œã‚‹æ–‡ç« を書ã『一瞬ã§å¿ƒã‚’ã¤ã‹ã‚€77ã®æ–‡ç« テクニック〠- ビジョンミッションæˆé•·ãƒ–ãƒã‚°
{{#tags}}- {{label}}
{{/tags}}