æž ç·šä»˜ãã®å¹ã出ã—ミニブãƒã‚°ã®éš†ç››ä»¥é™ã‚¦ã‚§ãƒ–上ã§ã‚ˆã見ã‹ã‘ã‚‹å¹ã出ã—ã‚’CSSã§ä½œã‚‹ãŠè©±ã€‚å˜è‰²ã®ã‚‚ã®ã¯ã‹ãªã‚Šå‰ã«æ›¸ã„ãŸã€‚今回ã¯ãã‚Œã«æž ç·šã‚’ã¤ã‘ã¦ã¿ã‚ˆã†ï¼ã€€ã¿ã‚ˆã†ï¼ã€€ã¿ã‚ˆã†ï¼ Demo: Bordered Speech Bubble æž ç·šã¯å˜ãªã‚‹solidãªborderã§å°‘ã—角を丸ã‚ãŸã ã‘。 尻尾を付ã‘ã‚‹ :before擬似è¦ç´ を使ã†ã€‚デモã®3番目ã®ã‚µãƒ³ãƒ—ルã®ã‚ˆã†ã«ã€ã¾ãšæž ç·šã¨åŒã˜è‰²ã§ä¸‰è§’形を作る。三角形ã¯ä»¥å‰ã®ã‚¨ãƒ³ãƒˆãƒªã§æ›¸ã„ãŸæ‰‹æ³•ã¨åŒã˜ã§ã€å·¦å³ã®borderã‚’transparentã«ã™ã‚‹ã“ã¨ã«ã‚ˆã£ã¦ä½œã‚‹ã€‚ .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
é’空文庫ã®ã»ã¼å…¨ä½œå“ã‚’ã€ä»•æ§˜ç–定ä¸ã®CSS3ドラフトã«å¾“ã£ã¦ç¸¦æ›¸ãHTML化
スマホサイトã®ä½œã‚Šæ–¹ã§ã€ã‚ã‚“ã¾ã‚Šæ›¸ã‹ã‚Œã¦ãªã„ã“ã¨ã‚’書ã„ã¦ã¿ãŸ - Kaleidoscope
{{#tags}}- {{label}}
{{/tags}}