responsivepx for Japanese
responsivepxã¨ã¯ responsivepxã¨ã¯ã€Media Queryを使用ã—ãŸãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªWebサイトをインタラクティブã«è¡¨ç¤ºç¢ºèªã™ã‚‹ã“ã¨ãŒã§ãるツールã§ã™ã€‚ URLを入力ã—ã¦è¡¨ç¤ºã•ã›ãŸã‚‰å¾Œã¯ãƒãƒ¼ã§å¹…や高ã•ã‚’調整ã—ã¦ãã ã•ã„。ã“ã¡ã‚‰ã§è©¦ã™ã¨åˆ†ã‹ã‚Šã‚„ã™ã„ã§ã™â†’http://css-tricks.com ã“ã®ãƒ„ールã¯githubã«ã¦ã‚³ãƒ¼ãƒ‰ãŒå…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ Built by @rem / kachibito.net
Media Queriesã®ã‚ˆã†ã«ã€ãƒ¢ãƒ‹ã‚¿ãƒ¼ã‚µã‚¤ã‚ºã«å¿œã˜ã¦ã‚¹ã‚¿ã‚¤ãƒ«ã‚’変更å¯èƒ½ã«ã™ã‚‹éžä¾å˜åž‹ã§1KBã®è»½é‡jsライブラリ・syze - ã‹ã¡ã³ã¨.net
シンプルã§è‰¯ã•ãã†ã ã£ãŸã®ã§ä¸€å¿œå‚™å¿˜éŒ²ã€‚ Media Queriesライクã«ãƒ–レークãƒã‚¤ãƒ³ãƒˆã« å¿œã˜ã¦ã‚¹ã‚¿ã‚¤ãƒ«ã‚’変更ã§ãるライブラリã§ã™ã€‚ éžä¾å˜åž‹ã§1KBã¨ã€è¶…軽é‡ã‚¹ã‚¯ãƒªãƒ—トãªã®ã§ ç°¡å˜ãªã‚ャンペーンサイトã¨ã‹ãªã‚‰ã“ã‚Œã§ã‚‚ ã„ã„ã‹ã‚‚ã—ã‚Œãªã„ã§ã™ã。 Media Queriesã®ã‚ˆã†ã«ãƒ‡ãƒã‚¤ã‚¹ã‚’é™å®šã—ãªã„クãƒã‚¹ãƒ–ラウザ対応ã§ã€ä»–ã®ãƒ©ã‚¤ãƒ–ラリã«ä¾å˜ã›ãšåˆ©ç”¨å‡ºæ¥ã‚‹ã€åœ§ç¸®ç‰ˆã¯1KBã¨è»½é‡ã€ã¨ã„ã†ã®ãŒç‰¹å¾´ã§ã™ã€‚ サイズã«å¿œã˜ã¦ã‚¹ã‚¿ã‚¤ãƒ«ãŒå¤‰ã‚ã£ã¦ã„ã¾ã™ã€‚何ã—ã¦ã‚‹ã‹ã¨ã„ã†ã¨ã€éžå¸¸ã«ã‚·ãƒ³ãƒ—ルã§æŒ‡å®šã—ãŸãƒ–レークãƒã‚¤ãƒ³ãƒˆã«åˆã‚ã›ã¦<html>ã«classã‚’ä»˜åŠ ã•ã›ã¦ã‚‹ã‚“ã§ã™ã。 サンプルã©ã†ãžã€‚ Sample　※動作確èªã¯responsivepxãŒä¾¿åˆ©ã§ã™ iPhoneã ã£ã¦OK。実機ã§ã‚‚確èªæ¸ˆã¿ã§ã™ã€‚ コード <script src="syze.min.js"></script> <script>syze
Media Queries を使ã£ã¦ã€Webサイトをスマートフォンã«å¯¾å¿œã•ã›ã‚‹ã¨ãã®æ³¨æ„書ã
今回ã“ã®ãƒ–ãƒã‚° - Webデザインレシピをã€iPhone ãªã©ã§ã‚‚見れるよã†ã«ãƒªãƒ‡ã‚¶ã‚¤ãƒ³ã—ã¾ã—ãŸã€‚使用ã—ãŸã®ã¯ CSS3 ã® Media Queries（メディアクエリ）。メディアクエリã®ä½¿ã„方や感想ã€æ°—ã‚’ã¤ã‘ãŸã„注æ„書ãã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸï¼ é…ã‚Œã°ã›ãªãŒã‚‰ã“ã®ãƒ–ãƒã‚° – Webデザインレシピをã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã§ã‚‚見れるよã†ã«æ”¹ä¿®ã—ã¾ã—ãŸã€‚ã“ã®ãƒ–ãƒã‚°ã¯ WordPress ã§æ›¸ã„ã¦ã„ã‚‹ã®ã§ã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã‚„ iPad ã¸ã®å¯¾å¿œæ–¹æ³•ã¯ã„ãã¤ã‚‚ã‚ã‚‹ã®ã§ã™ãŒã€ä»Šå›žã¯ CSS3 ã® Media Queries（メディアクエリ）を使ã£ã¦ã€iPadã€iPhone ãªã©ã€ã„ã‚ã‚“ãªãƒ‡ãƒã‚¤ã‚¹ã«å¯¾å¿œï¼ˆå¯¾å¿œã¨ã„ã†ã‹ã€ä¸€å¿œè¦‹ã‚Œã‚‹ç¨‹åº¦ï¼‰ã«ã—ã¦ã¿ã¾ã—ãŸã€‚ ãªã®ã§ Media Queries を使ã£ãŸã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³å¯¾å¿œã¨ã€ãƒªãƒ‡ã‚¶ã‚¤ãƒ³ã—ãªãŒã‚‰æ€ã£ãŸã“ã¨ãªã©ã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ CSS3 Media Queries 目次
デãƒã‚¤ã‚¹ã«åˆã‚ã›ã¦CSSを振り分ã‘る「Media Queries〠| DevelopersIO
Media Queriesã¯ã€èªã¿è¾¼ã¾ã‚Œã‚‹CSSã‚„ã€CSSã®è¨˜è¿°ã®ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã«æ¡ä»¶ã‚’åŠ ãˆã‚‹ã“ã¨å‡ºæ¥ã‚‹ã‚ˆã†ã«ãªã‚‹ä»•æ§˜ã§ã™ã€‚ 今ã¾ã§ã‚‚CSS2ã®Media typesを使ã„ã€screenã‚„printãªã©å¤§ã¾ã‹ãªãƒ¡ãƒ‡ã‚£ã‚¢ç”¨ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¨å®šã™ã‚‹ã“ã¨ã¯ã§ãã¾ã—ãŸã€‚ã§ã™ãŒã€ãã‚Œã§ã‘ã§ã¯æ˜¨ä»Šã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã€ã‚¿ãƒ–レット端末事情ã«ã¯ã¨ã¦ã‚‚対応ã§ãã¾ã›ã‚“。JavaScriptã§å¯¾å¿œã™ã‚‹æ–¹æ³•ã‚‚ã‚ã‚Šã¾ã™ãŒã‚·ãƒ³ãƒ—ルã§ã¯ã‚ã‚Šã¾ã›ã‚“。ãã“ã§ã€CSS3ã ã‘ã§æŒ¯ã‚Šåˆ†ã‘ãŒå¯èƒ½ã«ãªã‚‹ã®ãŒMedia Queriesã¨ã„ã†ä»•æ§˜ã§ã™ã€‚ Media Queries Media Queriesã¯ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ç«¯æœ«ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã‚’ã‚‚ã¨ã«é©ã—ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’é©ç”¨ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚Media Queriesを利用ã™ã‚‹ã“ã¨ã§ã€PC用スタイルシートã€ã‚¿ãƒ–レット用スタイルシートã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ç”¨ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã¨å€‹åˆ¥ã«ã‚¹ã‚¿ã‚¤ãƒ«ã‚’指定ã™ã‚‹ã“ã¨ãŒã§ã
jsdo.itä¼ç”» CSSã§å¿…殺技ã«å‚åŠ ã—ã¦ã„ã¾ã™ã€‚
ã©ã‚‚。僕ã§ã™ã€‚タイトル通り「jsdo.itä¼ç”» CSSã§å¿…殺技ã«å‚åŠ ã—ã¦ã„ã¾ã™ã€‚〠URL㯠http://jsdo.it/panicdragon/23cU（第2弾） http://jsdo.it/panicdragon/zh69（第1弾） panicdragon ã¨ã„ã†ãƒãƒ¼ãƒ ã«å‚åŠ ã•ã›ã¦ã„ãŸã ã„ã¦ãŠã‚Šã¾ã™ã€‚ jsdo.it http://jsdo.it/ ãã‚‚ãã‚‚ãªã«ã‚ˆ ãã‚‚ãã‚‚jsdo.itã£ã¦ãªã‚“ã よ？ãã‚Œã£ã¦è¨€ã†æ–¹ã®ç‚ºã€èª¬æ˜Žã•ã›ã¦é ‚ãã¾ã™ã€‚ jsdo.itã¨ã¯æ ªå¼ä¼šç¤¾ã‚«ãƒ¤ãƒƒã‚¯ã•ã‚“ãŒåˆ¶ä½œã•ã‚ŒãŸã‚‚ã®ã§ã€WEBデザイナーã€ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—エンジニアã€JavaScriptエンジニアã¨ã„ã£ãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãŸã‚ã®ã€ã‚³ãƒ¼ãƒ‰ã‚³ãƒŸãƒ¥ãƒ‹ãƒ†ã‚£ã«ãªã£ã¦ã„ã¾ã™ã€‚ web上ã§ç·¨é›†ã—ã€ä¿å˜ã§ã作å“を公開ã§ãã¾ã™ã€‚ ソースを共有ã—ã‚ã£ã¦ã€åˆ†ã‹ã‚‰ãªã„ã¨ã“ã‚ãªã©ã‚‚相談ã«ã®ã£ã¦ãã‚ŒãŸã‚Šã—ã¾ã™ã€‚ ãã®jsdo.i
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}