レスポンシブって何だろう

Transcript

1. ਅͷϨεϙϯγϒͬͯԿͩΖ͏ 20130322 Yumi Ishizaki (Hashizume) 1 13೥3݄22೔༵ۚ೔
2. ࣗݾ঺հ id:uniq ໊લ:Yumi Ishizaki (Hashizume) ݩσβΠφʔɻ DࣾͰχίχίपΓͷԿ͔ͱ͔ɻ ࠓҰԠϑϩϯτΤϯυɻ DࣾάϧʔϓͰԻָ഑৴αΠτͱ͔ɻ ※දࢴͷࣸਅ͸ಛʹҙຯ͋Γ·ͤΜ 2 13೥3݄22೔༵ۚ೔
3. UIݚमͰ ϨεϙϯγϒwebσβΠϯʹ͍ͭͯϨΫνϟʔΛड͚ͨɻ allWebΫϦΤΠλʔक़͞ΜΑΓɻ ↓ ײಈͨ͠ʂ ↓ ʮٕज़͚ͩ͡Όͳͯ͘ɺ ҙࣝͷ෦෼Ͱ΋Ϩεϙϯγϒʯ…ͳॴɻ 3 13೥3݄22೔༵ۚ೔
4. جຊৼΓฦΓ ϨεϙϯγϒwebσβΠϯͬͯԿʁ ϨεϙϯγϒWebσβΠϯͱ͸ɺσόΠε͝ͱʹෳ਺ͷσβ ΠϯΛ༻ҙ͢ΔͷͰ͸ͳ͘ɺϒϥ΢βʔͷ΢Οϯυ΢αΠζ ʹ߹ΘͤͯσβΠϯΛϑϨΩγϒϧʹௐ੔͢Δ੍࡞ख๏ͩ "4$**KQɿεϚϗରԠͷ৽ைྲྀʮϨεϙϯγϒ8FCσβΠϯʯͱ͸ʁ
    IUUQBTDJJKQFMFN 4 13೥3݄22೔༵ۚ೔
5. جຊৼΓฦΓ ίʔυ͸ʁ /* ը໘͕480pxҎ্Ͱ800pxҎԼͷͱ͖ʹɻ */ @media only screen and (min-width: 480px) and (max-width: 800px) {} /* ը໘͕479pxҎԼͷͱ͖ɻεϚʔτϑΥϯͱ͔ɻ */ @media only screen and (min-width: 479px) {} /* ը໘͕800pxҎ্ͷͱ͖ */ @media only screen and (min-width: 800px) {} /* ୺຤͕ԣஔ͖ʢԣ௕ʣ */ @media only screen and (orientation: landscape) {} /* ୺຤͕ॎ௕ */ @media only screen and (orientation: portrait) {} CSSɿMedia Queries ͩΑ <meta name="viewport" content="width=device-width, initial-scale=1"> htmlɿmetaλάͷviewportઃఆ 5 13೥3݄22೔༵ۚ೔
6. ϓϥΠϕʔτͰ΋࡞͚ͬͨͲ ͳΜͪΌͬͯϨεϙϯγϒͰ࢒೦ͳײ͡Ͱ͢ ͜͜Β΁Μͷ伱͕ؒޡຐԽͯ͠Δײ͡Ͱ࢒೦ɻ ԣ෯ͷϑΟοτײ͕ແ͍ɻ 6 13೥3݄22೔༵ۚ೔
7. ͜͏͍͏ϨγϙϯγϒΛ࡞Γ͍ͨͳʔ 伱͕ؒͳͯ͘ྑ͍ ࢀΓ·͠ΐ͏ɻҏ੎ࢤຎʛ̧̟౦ւ IUUQJTFKSDFOUSBMDPKQ 7 13೥3݄22೔༵ۚ೔
8. ҙ͍ࣝͨ͠Ϩεϙϯγϒతͳߟ͑ খ͍͞ը໘͸खલʹஔ͘ͷͰจࣈ͸ খ͍͞ํ͕͍͍ɻ େ͖͍ը໘͸ԕ͘ʹஔ͘ͷͰจࣈ͸ େ͖͍ํ͕͍͍ɻ ը໘ͷେ͖͞ʹΑͬͯɺจࣈαΠζ Λมߋ͢Δඞཁ͕͋Δ $44
   7BMVFT
   BOE
   6OJUT
   .PEVMF
   -FWFM
    IUUQXXXXPSH538%DTTWBMVFTWJFXQPSUSFMBUJWFMFOHUIT 8 13೥3݄22೔༵ۚ೔
9. ը໘ͷେ͖͞ʹΑͬͯɺ จࣈαΠζ΋มߋ 9 13೥3݄22೔༵ۚ೔
10. ௅ઓ͍ͨ͠ϨεϙϯγϒͬΆ͍ٕज़ …͍ͬͯ͏͔ɺ୯Ґʁ px͡Όͳͯ͘ˋΛ࢖͏ emͰϒϨΠΫϙΠϯτΛ࡞Δ ʢը໘width:70emա͗ͨΒɺ35em+35emͷ2ΧϥϜʹ͢Δͱ͔ʣ ը໘ʹରͯ͠Կׂͷେ͖͞ͷจࣈʹ͢Δ͔୯Ґ vw=viewport width vh=viewport height vmim=viewport minium 10 13೥3݄22೔༵ۚ೔
11. vw,vh,vmin ͷղઆ ը໘αΠζʹΑͬͯfont΍ΧϥϜͷαΠζ͕มߋ͞ΕΔ vw→ը໘͕width:800pxͳΒ8px=1vw vh→ը໘͕height:600pxͳΒ6px=1vh vmin→ը໘͕width:800px; height:600px; ͳΒ6px=1vmin demo→http://css-tricks.com/examples/ ViewportTypography/ 11 13೥3݄22೔༵ۚ೔
12. ·ͱΊ ը໘αΠζ͕มΘΕ͹ʢ୺຤͕มΘΕ͹ʣɺϢʔβʔͷར༻ ํ๏ʗࢹௌํ๏΋มΘΔɻͦΕʹ߹ΘͤͯɺσβΠϯ΋ม͑ ͍͖ͯ·͠ΐʔɻ ͦͷͨΊͷٕज़͸͢Ͱʹ͋ͬͨΜͩʂ ૣ͓͘͏͔ͪ͑ͬͯࣗ෼ͷαΠτΛ௚͍ͨ͠Ͱ͢ɻ 12 13೥3݄22೔༵ۚ೔