スマートフォン対応ã§ã‚ˆã使ã†htmlã€cssã€javascriptã®ã¾ã¨ã‚
スマートフォン(iosã€android)å‘ã‘ã®ã‚¦ã‚§ãƒ–サイト・ウェブアプリを作る際ã«å€‹äººçš„ã«ã‚ˆã使ã†htmlã€cssã€javascriptã®å‚™å¿˜éŒ²ã€‚ html関連 headタグ内ã§ã®è¨å®š<!-- //デãƒã‚¤ã‚¹ã‚µã‚¤ã‚ºã«ã‚ã‚ã›ã¦è¡¨ç¤ºé ˜åŸŸã‚’変更ã™ã‚‹ --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番å·ã®ãƒªãƒ³ã‚¯ã‚’無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画é¢ç”¨ã‚¢ã‚¤ã‚³ãƒ³ --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画é¢ç”¨ã‚¢ã‚¤ã‚³ãƒ³ã®å…‰æ²¢ã‚’無効化ã™ã‚‹ --> <link rel="apple-touch-icon
Androidã¨-webkit-tap-highlight-color
Androidã¨-webkit-tap-highlight-color Androidã¨-webkit-tap-highlight-colorã®é–¢ä¿‚ãŒã‚ˆãã‚ã‹ã‚‰ãšè‰²ã€…ã¨æ‚©ã‚“ã§ã„ãŸã®ã§ã™ãŒã€ã²ã¨é€šã‚Šã®çµè«–ãŒå‡ºãŸã®ã§ç´¹ä»‹ã—ã¾ã™ã€‚ ãã‚‚ãã‚‚-webkit-tap-highlight-colorã£ã¦ãªã«ã‚ˆ iPhoneãªã©ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã§aè¦ç´ をタップã—ãŸã¨ãã«ãƒã‚¤ãƒ©ã‚¤ãƒˆã•ã›ã‚‹ãƒ—ãƒãƒ‘ティã§ã™ã€‚ãƒã‚¤ãƒ©ã‚¤ãƒˆã¨è¨€ã£ã¦ã‚‚iPhoneã®å ´åˆã¯åŠé€æ˜Žã®ã‚°ãƒ¬ãƒ¼ã®ãƒ¬ã‚¤ãƒ¤ãƒ¼ãŒè¡¨ç¤ºã•ã‚Œã‚‹ã®ã§ã™ãŒã€‚ サンプル ã“ã®ãƒ¬ã‚¤ãƒ¤ãƒ¼ã®è‰²ã‚’-webkit-tap-highlight-colorã§åˆ¶å¾¡ã™ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚ a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } ã“ã®ã‚ˆã†ã«ã™ã‚‹ã¨ãƒã‚¤ãƒ©ã‚¤ãƒˆã‚«ãƒ©ãƒ¼ãŒåŠé€æ˜Žãªé’色ã«å¤‰ã‚ã‚Šã¾ã™ã€‚ サンプル ãŸã ã—ã€ã“ã®ã‚ˆã†ã«æŒ‡å®šã—ã¦ã‚‚A
「スマホ対応サイト制作　åˆå¿ƒè€…å‘ã‘ã€ã¿ãŸã„ãªæ„Ÿã˜ã§æ›¸ã„ã¦ã¿ãŸ 　-1.メニュー編-（※iPhone寄り） - Kaleidoscope
ã€ç›®æ¬¡ã€‘ 1.メニュー編 2.HTMLã¨CSSã§ç”»åƒã‚’æ“る編（å‰ç·¨ï¼‰ 2.HTMLã¨CSSã§ç”»åƒã‚’æ“る編（後編） 今æŒã£ã¦ã‚‹PCサイトをスマホ対応ã—ãŸã„ãªã…ã¨æ€ã£ã¦ã‚‹ã‚‚ã®ã®ã€ 「ã©ã“ã‹ã‚‰æ‰‹ã‚’付ã‘ã¦ã„ã„ã®ã‚„らã€ã‚ã‹ã‚‰ã‚“ï¼ï¼ã€ã£ã¦æ–¹ã‚‚多ã„ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ï¼Ÿ ã¨ã„ã†ã“ã¨ã§ã€è¨˜äº‹ã§ã‚‚書ã„ã¦ã¿ã£ã‹ãï¼ã¨ã€ãªãœã‹ã‚„ã‚‹æ°—ã«ãªã£ãŸã®ã§ã€é€£è¼‰å½¢å¼ã§æ›¸ã„ã¦ã¿ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ ãŸã ã€é€”ä¸ã§é£½ããŸã‚Šã€ã‚„ã‚‹æ°—ãŒç„¡ããªã£ãŸã‚‰ã€äºˆå‘Šç„¡ã終了ã™ã‚‹å¯èƒ½æ€§å¤§ã§ã™(￣▽￣;) 僕自身ã€äººã«æ•™ãˆã‚‰ã‚Œã‚‹ã»ã©ã®ã‚¹ãƒžãƒ›ã‚µã‚¤ãƒˆåˆ¶ä½œã®ç†Ÿç·´è€…ã¨ã„ã†ã‚ã‘ã§ã¯ç„¡ã„ã®ã§ã€ã‚‚ã£ã¨è‰¯ã„手段や方法ãŒã‚ã‚‹ã‹ã‚‚ã—ã‚Œã¾ã›ã‚“。 「ã“ã“ã¯ã“ã†ã—ãŸã‚‰ã„ã„ã€ãªã©ã€ã”æ„見ã‚ã‚Šã¾ã—ãŸã‚‰ã€é€†ã«æ•™ãˆã¦ãã ã•ã„(^-^; ã€ã¾ãšã¯ã˜ã‚ã«ã€‘ スマホサイトã¨è¨€ã£ã¡ã‚ƒã£ãŸã‚‚ã®ã®ã€ã¨ã‚Šã‚ãˆãšã¯iPhoneå‘ã‘ã®ã‚µã‚¤ãƒˆã‚’基準ã¨ã—ã¾ã™ã€‚ Androidã®ã€Œãƒ–ラウザã€ã‚‚ã€iPhon
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://blog.bluearrowslab.com/smartphone/topicks/125/
{{#tags}}- {{label}}
{{/tags}}