Form_design_from_Netflix.pdf

Transcript

1. /FUqJY
   ͔ΒֶͿϑΥʔϜσβΠϯ 'FC
   
    ࠓ੢
   ढ़จ
   גࣜձࣾΞϯςΟʔɾϑΝΫτϦʔ
2. ຊ೔ɺ࿩͢͜ͱ /FUqJY
   ͷϩάΠϯը໘ʹ͋ΔԼهͷϑΥʔϜσβΠϯʹ͍ͭͯݴٴ͠·͢ɻ
   w ϑϩʔτϥϕϧ
   w ύεϫʔυͷදࣔ
   /FUqJY
   Λ୊ࡐʹ͍ͯ͠·͕͢ɺʢ/FUqJY
   ʹݶΒͣʣ͋ΒΏΔϑΥʔϜʹ͓͚ΔҰൠత ͳ಺༰ͷ࿩Ͱ͢ɻ
3. /FUqJY
   ͱ͸ /FUqJYʢωοτϑϦοΫεʣ͸ɺΞϝϦΧ߹ऺࠃͷΦϯϥΠϯ
   %7%
   Ϩϯλϧٴͼө૾ ετϦʔϛϯά഑৴ࣄۀձࣾɻ
   ೥
   
   ݄ͷ࣌఺Ͱ
   
   ϱࠃҎ্Ͱ഑৴ࣄۀΛల ։͠ɺ
   ೥ͷച্͸
   
   ԯυϧʢஹԁʣɺܖ໿ऀ਺͸ੈքͰ
   
   ԯ
   
   ສ ਓɻ
   ຊࣾ͸ΧϦϑΥϧχΞभϩεΨτεʹஔ͔Ε͍ͯΔɻສछྨɺԆ΂ສຕͷ%7% Λอ༗͠ɺϨϯλϧ޲͚ʹ ສਓͷސ٬Λಘ͍ͯΔɻ·ͨɺετϦʔϛϯά഑৴Ͱ ͸طଘͷίϯςϯπʹՃ͑ɺಠ઎഑৴΍ΦϦδφϧ࡞඼΋ѻ͍ͬͯΔɻ
   ΞϝϦΧɺΦϥϯμɺϒϥδϧɺΠϯυɺ೔ຊɺؖࠃʹࢧࣾΛ࣋ͭɻ ΢ΟΩϖσΟΞ
   8JLJQFEJB 
   ϑϦʔඦՊࣄయΑΓ
4. ϑϩʔτϥϕϧ ϑϩʔτϥϕϧͱ͸ɺϥϕϧΛϓϨʔεϗϧμʔͱͯ͠࢖༻͢Δٕज़Ͱ͢ɻϛχϚϜ ͰɺεϖʔεΛઅ໿Ͱ͖Δಛੑ͔Βߴ͍ධՁΛಘ͍ͯ·͢ɻ
5. ϑϩʔτϥϕϧ͸
   $44
   Ͱ࣮૷Ͱ͖Δ <div class="p-floatlabel"> <input class="p-floatlabel_textfield" type=“text" required> <label class="p-floatlabel_placeholder">ϝʔϧΞυϨε·ͨ͸ܞଳి࿩൪߸</label> </div> HTML SCSS .p-floatlabel { position: relative; } .p-floatlabel_placeholder { position: absolute; top: 50%; pointer-events: none; .p-floatlabel_textfield:focus ~ &, .p-floatlabel_textfield:valid ~ & { top: 0; } } GPDVT
   ٖࣅΫϥεͷ͋ͱͷҰൠܑఋ݁߹ࢠͰηϨΫλΛࢦఆ͢Δɻ
   ೖྗޙɺWBMJE
   ٖࣅΫϥεͰελΠϧΛݻఆ͢Δɻ
6. ϑϩʔτϥϕϧͷ໰୊఺ w ϓϨʔεϗϧμʔͷ໨తͰ͋ΔώϯτΛ༩͑Δεϖʔε͕ඞཁʹͳΓ·͢
   w ίϯτϥετ͕௿͘ɺςΩετ͕খ͘͞ΞΫηγϏϦςΟͷ؍఺Ͱ͸Α͋͘Γ·ͤΜ
7. ύεϫʔυͷදࣔ ύεϫʔυͷೖྗ͸
   UZQF
   ଐੑͷ஋Λ
   QBTTXPSE
   ʹ͢ Δ͜ͱͰɺ෬ͤࣈʹͳΓ·͢ɻ͜Ε͸γϣϧμʔϋοΩ ϯάͷ๷ࢭʹͳΓ·͕͢ɺλΠϓϛεͷϦεΫ૿Ճʹ ͭͳ͕Γ·͢ɻ
   ొ࿥ϑΥʔϜͷதʹ͸ʮύεϫʔυͷ֬ೝʯͷΑ͏ͳ ϑΟʔϧυΛؚΉ΋ͷ͕͋ΓɺϢʔβʔͷλΠϓϛε ʹΑΔ࠶ೖྗͷ༧๷ࡦʹͳΓ·͢ɻ
8. +BWB4DSJQU
   Ͱಈతʹ
   UZQF
   ଐੑ஋ͷ
   QBTTXPSE
   Λ
   UFYU
   ʹมߋ͠·͢ɻ ύεϫʔυͷදࣔͷ࢓૊Έ HTML <input type="password"> HTML <input type="text">
9. *OUFSOFU
   &YQMPSFS
   
   ͱ
   .JDSPTPGU
   &EHFʢ8JOEPXT
   ൛ʣ͸ඪ४Ͱͪ͜ΒͷػೳΛఏ ڙ͍ͯ͠·͢ɻ͜͜Ͱ͸཈੍͠·͠ΐ͏ɻ ඪ४ͷύεϫʔυදࣔػೳͷ཈੍ SCSS [type="password"]::-ms-reveal { display: none; }
10. w γϣϧμʔϋοΩϯάͷةݥੑ্͕͕Γ·͢
    w ϒϥ΢βͷηΩϡϦςΟରࡦ͕ແԼʹͳΓ·͢ ύεϫʔυͷදࣔͷ஫ҙ఺
11. w ϑϩʔτϥϕϧɺύεϫʔυදࣔ͸ɺ/FUqJY
    Λ͸͡Ίଟ͘ͷ
    8FC
    αΠτͰ࢖ΘΕ ͍ͯΔ
    w ϑϩʔτϥϕϧɺύεϫʔυදࣔ͸ɺΑ͍ϑΥʔϜσβΠϯͰ͕͢ɺ໰୊఺΋͋Δ ·ͱΊ