ブロガー勉強会〜HTML+CSSの超基礎編〜

ブロガーのためのHTML+CSSの勉強会資料

Transcript

1. ϒϩΨʔษڧձ
   ʙ)5.-$44ͷ௒جૅฤʙ
   
   

   View Slide

2. ࣗݾ঺հ
   ✤PLVUBOJ
   
   wࡀ
   wϒϩάWEFFQӡӦ
   w࢓ࣄͰ)5.-ͱ͔1)1ͱ͔
   wझຯ͸٢঵ࣉ८Γ
   

   View Slide

3. ࠓ೔ͷͳ͕Ε
   ᶃ8FCαΠτͷ͘͠Έ
   ᶄ)5.-ʜ$44ʜ ͬͯͳʹ
   ᶅϒϩάαΠτΛͭͬͯ͘ΈΑ͏
   

   View Slide

4. ΞΠεϒϨΠΫ͍ͨΉʂ
   

   View Slide

5. ΞΠεϒϨΠΫ ෼͙Β͍
   
   ᶃ͔ΜͨΜͳࣗݾ঺հ
   ᶄ͜Μͳϒϩά΍ͬͯΔ PS΍Γ͍ͨ
   
   ᶅ࠷ۙ͏Ε͔ͬͨ͠ɾͨͷ͔ͬͨ͜͠ͱ
   

   View Slide

6. ᶃ WebαΠτͷ͘͠Έ
   

   View Slide

7. 8FCαΠτ͕ݟ͑Δ͘͠Έ
   

   View Slide

8. 8FCαΠτ͕ݟ͑Δ͘͠Έ
   8FCαΠτΛ࡞Δ
   

   View Slide

9. 8FCαΠτ͕ݟ͑Δ͘͠Έ
   

   View Slide

10. 8FCαΠτ͕ݟ͑Δ͘͠Έ
    Πϯλʔωοτ্΁
    Ξοϓϩʔυ
    

    View Slide

11. 8FCαΠτ͕ݟ͑Δ͘͠Έ
    Πϯλʔωοτ্΁
    Ξοϓϩʔυ
    αʔόʔ
    

    View Slide

12. 8FCαΠτ͕ݟ͑Δ͘͠Έ
    

    View Slide

13. 8FCαΠτ͕ݟ͑Δ͘͠Έ
    8FCαΠτ͕ΈΕΔ
    ͓ΘΓ
    

    View Slide

14. ᶄ HTMLͱCSS
    

    View Slide

15. )5.-
    ✴)ZQFS5FYU.BSLVQ-BOHVBHF
    ✴8FCαΠτͷʰߏ଄ʱΛද͢
    ✴ίϯϐϡʔλ͕ཧղͰ͖Δ
    ✴จࣈͱ͔ը૾ͱ͔Ϧετͱ͔ʜ
    

    View Slide

16. )5.-
    ✴)ZQFS5FYU.BSLVQ-BOHVBHF
    ✴8FCαΠτͷʰߏ଄ʱΛද͢
    ✴ίϯϐϡʔλ͕ཧղͰ͖Δ
    ✴จࣈͱ͔ը૾ͱ͔Ϧετͱ͔ʜ
    ࠓ೔΍Δͷ͸
    )5.-
    

    View Slide

17. $44
    ✴$BTDBEJOH4UZMF4IFFUT
    ✴8FCαΠτͷʰݟͨ໨ʱΛܾΊΔ
    ✴จࣈͷ৭ɺӨΛ͚ͭͨΓʜ
    

    View Slide

18. $44
    ✴$BTDBEJOH4UZMF4IFFUT
    ✴8FCαΠτͷʰݟͨ໨ʱΛܾΊΔ
    ✴จࣈͷ৭ɺӨΛ͚ͭͨΓʜ
    ࠓ೔΍Δͷ͸
    $44
    

    View Slide

19. ͨͱ͑͹
    

    View Slide

20. )5.-ͱ$44
    

    View Slide

21. CSS͕ແ͍ͱ…ʁ
    

    View Slide

22. )5.-ͱ$44
    

    View Slide

23. )5.-ͱ$44
    

    View Slide

24. )5.-ͱ$44
    ݟͨ໨่͕Εͯ͠·͏
    

    View Slide

25. ٯʹɺࠓ࢒ͬͨͷ͕
    ʮHTMLʯͱ͍͏͜ͱ
    (+JavaScriptͳͲ)
    

    View Slide

26. ΋͏͢͜͠ৄ͍͠આ໌
    ↓
    ษڧձ༻ࢿྉ+ϚχϡΞϧ
    

    View Slide

27. ᶅ ϒϩάαΠτΛͭͬͯ͘ΈΑ͏
    

    View Slide

28. ϩοΫΫϥΠϛϯά͸
    

    View Slide

29. ΍͔ͬͯΒ
    ֮͑Δ΄͏͕
    ֮͑΍͍͢
    

    View Slide

30. Կࣄ΋΍ͬͯΈΔ
    (ཧղ͸͋ͱͰOK)
    

    View Slide

31. ϒϩάαΠτ࡞੒
    ͜ͷαΠτΛ
    ͔Βͭͬͯ͘Έ·͠ΐ͏
    

    View Slide

32. αϯϓϧαΠτΛ֬ೝ ษڧձ༻ࢿྉࢀর
    
    

    View Slide

33. JOEFYIUNMΛΤσΟλͰ։͍ͯ࡞ۀʂ
    

    View Slide

34. ଓ͖͸WebߨٛͰ
    

    View Slide

35. WordPressͰHTMLΛ
    ॻ͘ʹ͸…
    ↓
    DEMO
    

    View Slide

36. Կ͔͋Γ·ͨ͠ΒWebͰʂ
    ຊ೔͸͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide