Form_design_from_Netflix.pdf

 Form_design_from_Netflix.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

February 25, 2020
Tweet

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 ϑϩʔτϥϕϧɺύεϫʔυදࣔ͸ɺΑ͍ϑΥʔϜσβΠϯͰ͕͢ɺ໰୊఺΋͋Δ ·ͱΊ