ã“ã‚ŒãŒã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³å‘ã‘サイトを作るã¨ãã® viewport è¨å®šï¼“パターンã
スマートフォンå‘ã‘ã® Web サイトを作るã¨ãã€viewport ã®è¨å®šæ¬¡ç¬¬ã§ä½¿ã„å‹æ‰‹ãŒå¤§å¹…ã«å¤‰ã‚る。 最近ã¯ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ– Web デザインãŒæµè¡Œã—ã¦ã‚‹ã‘ã©ã‚‚ã€ãã®å¤§å‰æã¨ã—㦠viewport ã®è¨å®šãƒ‘ターンを抑ãˆã¦ãŠãã®ã¯é‡è¦ã ã‚ã†ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€viewport ã®è¨å®šã«ã‚ˆã£ã¦ã€è¦‹ãŸç›®ãƒ»ä½¿ã„å‹æ‰‹ãŒã©ã†å¤‰ã‚ã‚‹ã‹ã‚’解説ã™ã‚‹ã€‚ パターン1: 何も考ãˆãšã« HTML を書ã ã¾ãšã¯ã€viewport を指定ã›ãšã«ã€å˜ç´”㪠HTML をスマートフォンã§è¡¨ç¤ºã—ã¦ã¿ã‚‹ã€‚ <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んãªç´ æãŒã”ã£ãŸç…®ã«ãªã£ãŸæ§˜åã‚’ãŠæ¤€ã§è¡¨ç¾ã—ã¦ã„ã¾ã™ã€‚ 湯気ãŒ<strong>「ã¦ã£ãã€</strong>ã«è¦‹ãˆã‚‹ã®ãŒéš ã—味ã«ãªã£ã¦ã„ã¾
スマートフォンã€ã‚¿ãƒ–レットã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã®ãŸã‚ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®å¹…ã‚’ã©ã®ã‚ˆã†ã«è¨è¨ˆã™ã‚Œã°ã‚ˆã„ã‹
iPhoneã‚„Androidãªã©ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã€ã€Œæ–°ã—ã„iPadã€ãªã©ã®ã‚¿ãƒ–レットã€ãã—ã¦ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ãªã©ã€ã•ã¾ã–ã¾ãªãƒ‡ãƒã‚¤ã‚¹ã®å¹…ã«å¯¾å¿œã•ã›ã‚‹Responsive Web Designã®ãŸã‚ã«ã€ã©ã®ã‚ˆã†ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®å¹…ã‚’è¨è¨ˆã—ã€ã„ãã¤ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’用æ„ã™ã‚‹ã®ã‹3ã¤ã®æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ å„デãƒã‚¤ã‚¹ã®å¹…ã¯ã€2012å¹´3月ã®ãƒ‡ãƒ¼ã‚¿ã§ã™ã€‚ A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ã‚ャプãƒãƒ£ã«ä½¿ç”¨ã—ã¦ã„ã‚‹ç”»åƒã¯å…ƒè¨˜äº‹ã‚ˆã‚ŠPSDファイルã§ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã§ãã¾ã™ã€‚ å„デãƒã‚¤ã‚¹ã®ã‚µã‚¤ã‚º レイアウトを3㤠レイアウトを4㤠レイアウトを6㤠å„デãƒã‚¤ã‚¹ã®ã‚µã‚¤ã‚º ã¾ãšã¯ã€2012å¹´3月ç¾åœ¨ã®å„デãƒã‚¤ã‚¹ã®å¹…ã§ã™ã€‚ ※クリックã§æ‹¡å¤§ ãƒã‚¤ãƒ³ãƒˆ 上段：ãƒãƒ¼ãƒˆãƒ¬ã‚¤ãƒˆï¼ˆç¸¦ç½®ã）ã€ä¸‹æ®µï¼šãƒ©ãƒ³ãƒ‰ã‚¹ã‚±
å°‘ã—ã®ã‚³ãƒ¼ãƒ‰ã§å®Ÿè£…å¯èƒ½ãª15ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆç”¨å°æŠ€é›†
å°‘ã—ã®ã‚³ãƒ¼ãƒ‰ã§å®Ÿè£…å¯èƒ½ãª15ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆç”¨å°æŠ€é›†ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ãŒæ™®åŠã—ã¦ãã¦ã€Webサイトを作る時ã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆã‚‚一緒ã«åˆ¶ä½œã—ã¦ã„る方も多ããªã£ã¦ãã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚ç§ã‚‚スマホサイトを制作ã™ã‚‹æ©Ÿä¼šãŒå¢—ãˆã€ã ã‚“ã ã‚“Evernoteã«ä¿å˜ã—ã¦ã„ãŸã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆã‚’作る時ã®å°æŠ€ãŒãŸã¾ã£ã¦ããŸã®ã§ã€iPhoneã§ä½¿ãˆã‚‹å°æŠ€ã‚’ä¸å¿ƒã«ã¾ã¨ã‚ã¦è¨˜äº‹ã«ã—ã¦ã¿ã¾ã™ã€‚ã„ãã¤ã‹ã‚µãƒ³ãƒ—ルも作ã£ã¦ã„ã‚‹ã®ã§ã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‹ã‚‰ã‚ã‚ã›ã¦ã”覧下ã•ã„ï¼ ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚µã‚¤ãƒˆç”¨å°æŠ€é›†ã€€ç›®æ¬¡ã„ãã¤ã‹ã‚µãƒ³ãƒ—ルも作ã£ãŸã®ã§ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‹ã‚‰ã€ã‚‚ã—ãã¯ãƒ–ラウザーã‹ã‚‰ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆã‚’ iPhone ãªã©ã«åˆ‡ã‚Šæ›¿ãˆã¦ã”覧ãã ã•ã„ï¼ æ¨ªå¹…ã‚’ãƒ‡ãƒã‚¤ã‚¹ã®å¹…ã«ã‚ã‚ã›ã‚‹æ–‡å—サイズã®è‡ªå‹•èª¿æ•´ã‚’オフリストã®ã‚¯ãƒªãƒƒã‚¯ï¼ˆã‚¿ãƒƒãƒ—）範囲を広ã’ã‚‹ç”»é¢ã®å¹…ã«ã‚ã‚ã›ã¦ CSS を変ãˆã‚‹ãƒªãƒ³ã‚¯ãƒ†ã‚ストã®ã‚ã‚‹ Div 全体をクリック（タップ
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Free iPhone Apps For Graphic Designers | | Graphic Design Junction
ã€ã‚³ãƒ©ãƒ 】手ã®ã²ã‚‰ã‚µã‚¤ã‚ºã®ã‚¯ãƒªã‚¨ã‚¤ã‚·ãƒ§ãƒ³ãƒ„ール (13) iPhoneアプリã®ã¿ã§ã€ã‚°ãƒªãƒ¼ãƒ†ã‚£ãƒ³ã‚°ã‚«ãƒ¼ãƒ‰ã‚’制作・出力ã—ã¦ã¿ã‚ˆã† | クリエイティブ | マイコミジャーナル
{{#tags}}- {{label}}
{{/tags}}