webデザイン基礎学

初心者向けのwebデザインに関する基礎的な解説をまとめました。

Transcript

1. ͳΔ΄Ͳʂ ͕͜͜μϝͩͬͨ - 今日からわかる Web デザイン基礎学 -
2. σβΠϯͬͯͳʹʁ ̍ݶ໨
3. ҹ࡮෺ͱXFCσβΠϯͷҧ͍ ҹ࡮෺ 8FCαΠτ
4. ཧ૝ʹ͍ۙΑΓ๛͔ͳදݱ͕Մೳɻ
   छྨͷ৭Ͱදݱ͢ΔͨΊɺ
   ඒ͍͠ҹ࡮ʹߴղ૾౓ͷσʔλ͕ඞཁʂ σΟεϓϨΠͰͷද͕ࣔલఏɻ
   छྨͷ৭Ͱදݱ͢ΔͨΊɺ
   ߴղ૾౓ͷσʔλ͕ෆඞཁʂ Ճ๏ࠞ৭ ݮ๏ࠞ৭ ৭Λ଍͍ͯ͘͠ʹͭΕɺ
 ৭͕ࠇʹ͍͍ۙͮͯ͘ɻ ৭Λ଍͍ͯ͘͠ʹͭΕɺ
 ৭͕നʹ͍͍ۙͮͯ͘ɻ ˠEQJ ˠEQJ ҹ࡮෺ͱXFCσβΠϯͷҧ͍
5. w ݟͤΔ
   w ΞΫγϣϯΛىͯ͜͠΋Β͏
   w ୳ͯ͠΋Β͏ w ݟͤΔ ҹ࡮෺ 8FCαΠτ ͪ͜Β͕ൃ৴ଆͰ͋Γɺ
 λʔήοτ͸ड͚औΔ͚ͩɻ ͪ͜Β͕ൃ৴ଆͰ͋Δ͕ɺ
 λʔήοτʹ΋ߦಈΛىͤ͜͞ͳ͍ ͱ੒Γཱͨͳ͍ɻ ໌֬ͳҧ͍ ҹ࡮෺ͱXFCσβΠϯͷҧ͍
6. 8FCαΠτσβΠϯͷ໾ׂ ຬ଍౓ ஌Γ͍ͨ ൺֱ͍ͨ͠ Θ͔Βͳ͍ ௐ΂Δ Ϣʔβʔ cc αΠτ͕ఏڙͨ͠
   Ձ஋ ໨తɾ໨ඪ
7. 8FCαΠτσβΠϯͷ໾ׂ ஌Γ͍ͨ ൺֱ͍ͨ͠ Θ͔Βͳ͍ ௐ΂Δ Ϣʔβʔ ར༻γʔϯ΍ςʔϚʹԊͬͨ
   ໎Θͤͳ͍αΠτ࡞Γ͕େ੾ ͦΕ͸ͬͪͩ͜Αʂ ͋Ε͸͜͜ʂ ༠ಋͯ͋͛͠Δ
8. จࣈΛѻ͏ྗ  ݶ໨
9. จࣈ͕༩͑ΔΠϝʔδ ͍Ζ͸ʹ΄΁ͱ ͍ Ζ ͸ ʹ ΄ ΁ ͱ ͍Ζ͸ʹ΄΁ͱ ͍Ζ͸ʹ΄΁ͱ ͍ Ζ ͸ ʹ ΄ ΁ ͱ ͍Ζ͸ʹ΄΁ͱ ϑΥϯτͷछྨ จࣈͷαΠζ ߦؒɾΞΩ ͍͔ͭ͘ͷϧʔϧ จࣈ͕༩͑ΔΠϝʔδ͸ҙ֎ͱڧ͍ʂ
 Θ͔Βͣ࢖༻͍ͯ͠Δͱ໨తͱ͸ҧͬͨํ޲ʹʜ
10. ϑΥϯτ͕༩͑ΔΠϝʔδ ໌ேମ ηϦϑ ΰγοΫମ αϯηϦϑ ༏խ͞ɺ্඼͞ɺߴڃײɺ৴པײ ྗڧ͞ɺઆಘྗɺ҆৺ײɺ਌͠Έ΍͢͞
11. SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺஍Α͞΁ɻ )0.& 4)01 $0/$&15 SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺஍Α͞΁ɻ )0.& 4)01 $0/$&15 ϑΥϯτ͕༩͑ΔΠϝʔδ /( 0,
12. αΠζ͕༩͑ΔΠϝʔδ େ͖͍จࣈ খ͍͞จࣈ ҆৺ײɺ૖େ͞ɺ૽͕͠͞ɺେ୾͞ɺ
    ਌͠Έ΍͢͞ɺಡΈ΍͢͞ ߴڃײɺرগײɺ੩͚͞ɺ্඼͞ɺ
 ಡ·ͤ΍͢͞
13. αΠζ͕༩͑ΔΠϝʔδ SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺஍Α͞΁ɻ )0.& 4)01 $0/$&15 େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯ ϙΠϯτͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺஍Α͞΁ɻ )0.& 4)01 $0/$&15 େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ͍ͱࢥ ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱ Ίͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
14. ߦؒͱߦૹΓ͕༩͑ΔΠϝʔδ ͜ΕΒΛ·ͱΊͯ
    จࣈ૊Έͱ͍͏ɻ 8FCαΠτͰ͸अಓ ߦ͕ؒڱ͍ɺߦૹΓ͕খ͍͞ ߦ͕ؒ޿͍ɺߦૹΓ͕େ͖͍ ٸ͍Ͱ͍Δɺ৘ใ͕ଟ͍ɺಡ·ͤͳ͍ ༏խɺ৘ใ͕গͳ͍ɺಡΜͰ΄͍͠
15. ߦؒͱߦૹΓ͕༩͑ΔΠϝʔδ SHARP ࠓ · Ͱ ମ ݧ ͠ ͨ ͜ ͱ ͷ ͳ ͍ ɺ ੜ · Ε ͨ ͯ ͷ ৺ ஍ Α ͞ ΁ ɻ )0.& 4)01 $0/$&15 େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ SHARP ࠓ·Ͱମݧͨ͜͠ͱͷͳ͍ɺ ੜ·Εͨͯͷ৺஍Α͞΁ɻ )0.& 4)01 $0/$&15 େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀ ߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
16. ઈରʹࣦഊ͠ͳ͍ ৭࠼બͼͷϋ΢πʔ  ݶ໨
17. ৭͕༩͑ΔΠϝʔδ ੜ໋ɾ׆ಈతɾ৘೤తɾিಈతɾഁյɾ๫ྗ Ոఉɾ࢓ࣄɾࣗ༝ɾஆ͔͍ɾਂ͍஌ܙɾਪ࡯ྗ ޷ح৺ɾ޲্৺ɾ஌ࣝɾ޾෱ɾܰշɾΧδϡΞϧ Ժ΍͔͞ɾௐ࿨ɾࣗવɾฏ࿨ɾόϥϯεɾڠௐ ฏ࿨ɾ҆શɾྫྷ੩ɾ੣࣮ɾਗ਼ܿɾए͍ɾ૘΍͔ ਫ਼ਆɾݽಠɾؾ඼ɾݫॗɾਸߴɾӉ஦ ߴوɾ༏խɾັྗతɾඇݱ࣮తɾྶతɾਆൿ ਗ਼ܿɾܿ͞ɾඒ͠͞ɾ७ਮɾਆ੟ɾఱࠃ ௐ࿨ɾ༕ᓔɾෆ҆ɾաڈɾബ҉͍ɾࢥ͍ग़ ҉ҋɾࢮɾڪාɾѱɾ௜໧ɾߴڃײɾஉੑత ྫྷͨ͞ɾۚଐɾચ࿅ɾߗ͍ɾ্඼ ੒ޭɾߴڃɾ෋ɾ௖఺ɾً͖ɾ߽՚ ৭͸͜Μͳʹ΋ϞϊͷΠϝʔδΛม͑ͯ͠·͏ʜ
18. ৭͕༩͑ΔΠϝʔδ ໌౓ ࠼౓ ৭૬ ʰ̏ଐੑʱ
19. ઈରࣦഊ͠ͳ͍৭ͷ૬ੑ ৭બͼ͸ηϯεʁΜͳ͜ͱͳ͍Αʂ    ϕʔεΧϥʔ ิ৭ ΞΫηϯτ
20. ઈରࣦഊ͠ͳ͍৭ͷ૬ੑ $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$,
     ࢲͨͪͷ࢓ࣄ͸ςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔ͸ςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊ౰ʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ஋͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ Ϋϥ΢υ΍εϚʔτϑΥϯɺΫϥ΢υϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘؀ڥ͸ܶతʹมΘΓ·ͨ͠ɻ $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$,
     ࢲͨͪͷ࢓ࣄ͸ςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔ͸ςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊ౰ʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ஋͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ Ϋϥ΢υ΍εϚʔτϑΥϯɺΫϥ΢υϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘؀ڥ͸ܶతʹมΘΓ·ͨ͠ɻ /( 0, $36/$) ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ $)&$,
     ࢲͨͪͷ࢓ࣄ͸ςΫϊϩδʔΛ௨ͯ͡ੈքΛΑΓྑ͘͢Δ͜ͱͰ͢ɻ ࢲͨͪΫϥϯνλΠϚʔ͸ςΫϊϩδʔͷେ͖ͳՄೳੑΛ৴͡ɺ ਓʑ ʹຊ౰ʹศརͱײ͍͚ͯͨͩ͡ΔΑ͏ͳՁ஋͋ΔαʔϏεΛੈքத ʹఏڙ͍͖͍ͯͨ͠ͱߟ͍͑ͯ·͢ɻ Ϋϥ΢υ΍εϚʔτϑΥϯɺΫϥ΢υϑΝϯσΟϯάͳͲͷΤίγ εςϜʹΑͬͯςΫϊϩδʔΛऔΓר͘؀ڥ͸ܶతʹมΘΓ·ͨ͠ɻ
21. શͯΛۦ࢖ͯ͠ࢹ఺ૢ࡞  ݶ໨
22. ࢹ఺Ҡಈͷେݪଇ 'ͷ๏ଇ
23. ;ͷ๏ଇ ࢹ఺Ҡಈͷେݪଇ
24. ࢹ఺Ҡಈͷେݪଇ δϟϯϓ཰Λۦ࢖ͯ͠ɺ
    ϢʔβʔΛ༠ಋ͢Δ͜ͱ͕Ͱ͖Δ ਓؒͷ໨͸େ͖͍΋ͷ
    ͱ৭ͷ͍͍ͭͯΔ΋ͷʹ൓Ԡ͠΍͍͢ʂ ͳΜͯͬͨͬͯɺ ΫϥϯνλΠϚʔɻ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋ ͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋͋
25. ࢹ఺Ҡಈͷେݪଇ େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭͍ͬͯΒͬ͠ΌΔํɺଟ ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯ τͳͲΛ·ͱΊͯ͝঺հ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ େਓͱ͸ҧ͏࢓༷ ͷ੺ͪΌΜͷ͓෍ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށ࿭ͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺ೔ৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱ͸ҧ͏࢓༷ ͷ੺ͪΌΜͷ͓෍ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށ࿭ͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺ೔ৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱ͸ҧ͏࢓༷ ͷ੺ͪΌΜͷ͓෍ ஂɺͲͷ༷ʹऔΓ ѻ͏ͷ͔ށ࿭ͬͯ ͍Βͬ͠ΌΔํɺ ଟ͍ͱࢥ͍·͢ɻ ͦ͜Ͱɺ೔ৗͷ͓ खೖΕํ๏͔Β͓ ચ୕ʹ͍ͭͯɺ ͪΐͬͱͨ͠ϫϯ େਓͱ͸ҧ͏࢓༷ͷ੺ͪΌΜͷ͓෍ஂɺͲͷ༷ʹऔΓѻ͏ͷ͔ށ࿭ͬ ͍ͯΒͬ͠ΌΔํɺଟ͍ͱࢥ͍·͢ɻͦ͜Ͱɺ೔ৗͷ͓खೖΕํ๏͔ Β͓ચ୕ʹ͍ͭͯɺͪΐͬͱͨ͠ϫϯϙΠϯτͳͲΛ·ͱΊͯ͝঺հ ͍ͨ͠ͱࢥ͍·͢ɻࢀߟʹͳ͍ͬͯͩ͘͞͞ɻ /( 0,
26. 5)"/,
    :06