Web班番外編 jQuery

jQueryについての講義です. ロールオーバーまでいきたかった

Transcript

1. Follow me Twitter @spre55 Web班　番外編 
   4BJUB
   5BUTVZB 1
2. Follow me Twitter @spre55 本日のMENU 8FCք۾ͷ࿩ɹ
   1
   
   )5.-ͷ࿩ɹɹ
   1
   $44ͷ࿩ɹ
   
   
   
   
   1 2 ຊ೔ͷMENU
3. Follow me Twitter @spre55 1.Web界隈の話 3 1.Webք۾ͷ࿩
4. Follow me Twitter @spre55 クライアントサイドとサーバサイド 4 1.Webք۾ͷ࿩ ϒϥ΢βͰಈ࡞ αʔόͰಈ࡞ HTTP HTML CSS JavaScript (αʔόαΠυͰ΋࢖͑Δ) PHP Ruby Python…
5. Follow me Twitter @spre55 ブラウザ間の差異 5 1.Webք۾ͷ࿩ ϨϯμϦϯάΤϯδϯ
   
   ˠσʔλΛɼ৚݅΍ϧʔϧʹ͕ͨͬͯ͠
   ɹɹద੾ͳܗʹ࠶ߏ੒͢ΔΤϯδϯ ↓ ֤ϒϥ΢βͰҧ͏΋ͷΛ࢖͍ͬͯΔ
6. Follow me Twitter @spre55 ブラウザ間の差異 6 1.Webք۾ͷ࿩ Webϒϥ΢β ϨϯμϦϯάΤϯδϯ Internet Explorer Trident FireFox Gecko Safari Webkit Google Chrome Blink Opera Blink ֤ϒϥ΢βͷϨϯμϦϯάΤϯδϯ(2014೥1݄࣌఺)
7. Follow me Twitter @spre55 世界初のWebサイト 7 1.Webք۾ͷ࿩ )5.-ͷੜΈͷ਌
   ςΟϜɾόʔφʔζɾϦʔ
   ౰࣌$&3/ࡏ੶
   888ͷ࢓૊ΈΛ࡞ͬͨਓ
   ೥݄೔ʹઃཱɿੈքॳͷ8FCαΠτ
   IUUQJOGPDFSODIIZQFSUFYU8885IF1SPKFDUIUNM wikipediaΑΓ
8. Follow me Twitter @spre55 SublimeTextに恋しよう！ 8 1.Webք۾ͷ࿩ ࢖͍΍͘͢͢Δʹ͸ʜ
   ઃఆϑΝΠϧΛ͍͡Δ
   ϓϥάΠϯΛೖΕΔ
   
   1BDLBHF
   $POUSPM
   
   IUUQTTVCMJNFXCPOEOFUJOTUBMMBUJPO
9. Follow me Twitter @spre55 参考サイト 9 1.Webք۾ͷ࿩ )551ͱ͸ ʜ
   IUUQWJSBMDPNNVOJUZDPNPUIFSJUIUUQ
   ϒϥ΢βͷ࢓૊Έ
   IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
   4VCMJNF5FYUΛΠϯετʔϧͨ͠Βʜ
   IUUQLFJESVOUVNCMSDPNQPTUUJQTTVCMJNFUFYUTVCMJNFUFYU
   αʔόαΠυ+BWB4DSJQUͷຊ໋ʮ/PEFKTʯʜ
   IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
10. Follow me Twitter @spre55 2.HTMLの話 10 2.HTMLͷ࿩
11. Follow me Twitter @spre55 HTMLひな形 11 2.HTMLͷ࿩ %0$5:1&
    IUNM
    IUNM
    IFBE
    
    UJUMFλΠτϧUJUMF
    IFBE
    CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS
    CPEZ
    IUNM
12. Follow me Twitter @spre55 HTMLひな形 12 2.HTMLͷ࿩ %0$5:1&
    IUNM
    IUNM
    IFBE
    
    UJUMFλΠτϧUJUMF
    IFBE
    CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS
    CPEZ
    IUNM %0$5:1&એݴɿ
    )5.-ͷจॻͩΑ
    ͱએݴ͢Δ
13. Follow me Twitter @spre55 HTMLひな形 13 2.HTMLͷ࿩ %0$5:1&
    IUNM
    IUNM
    IFBE
    
    UJUMFλΠτϧUJUMF
    IFBE
    CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS
    CPEZ
    IUNM )5.-λάɿ
    )5.-ͷൣғΛࣔ͢
14. Follow me Twitter @spre55 HTMLひな形 14 2.HTMLͷ࿩ %0$5:1&
    IUNM
    IUNM
    IFBE
    
    UJUMFλΠτϧUJUMF
    IFBE
    CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS
    CPEZ
    IUNM )&"%λάɿ
    )5.-จॻશମͷ৘ใ
15. Follow me Twitter @spre55 HTMLひな形 15 2.HTMLͷ࿩ %0$5:1&
    IUNM
    IUNM
    IFBE
    
    UJUMFλΠτϧUJUMF
    IFBE
    CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS
    CPEZ
    IUNM #0%:λάɿ
    )5.-จॻͷ಺༰
16. Follow me Twitter @spre55 開始タグと終了タグ 16 2.HTMLͷ࿩ CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
    CPEZ
17. Follow me Twitter @spre55 開始タグと終了タグ 17 2.HTMLͷ࿩ CPEZ
    ˡ։࢝λά
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
    CPEZɹˡऴྃλά ˠλάͷద༻ൣғΛ͍ࣔͯ͠Δ
18. Follow me Twitter @spre55 単独タグ 18 2.HTMLͷ࿩ CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
    CPEZ
19. Follow me Twitter @spre55 単独タグ 19 2.HTMLͷ࿩ CPEZ
    
    ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢CS
    CPEZ ୯ಠλά
20. Follow me Twitter @spre55 単独タグ 20 2.HTMLͷ࿩ CS
    PS
    CS
    
    
    ˠͲͬͪͰ΋͚͑͑Ͳɼ
    ɹɹɹɹɹ౷Ұͯ͠࢖͓͏
21. Follow me Twitter @spre55 文字化け対策 21 2.HTMLͷ࿩ ҎԼΛIFBEλά಺ʹ௥Ճ͢Δɽ
    NFUB
    IUUQFRVJW$POUFOU5ZQF
    DPOUFOUUFYUIUNMDIBSTFUVUG ɹɹɹ
    
    ɹˣ)5.-Ͱ͸୹͘ग़དྷΔʂʂ
    NFUB
    DIBSTFUVUG
22. Follow me Twitter @spre55 文字化け対策 22 2.HTMLͷ࿩ ͦΕͰ΋จࣈԽ͚ͨ͠Β
    ϒϥ΢βͷઃఆΛ
    ม͍͑ͯͩ͘͞
23. Follow me Twitter @spre55 タグ(要素)と属性 23 2.HTMLͷ࿩ λάͷதʹ͸ଐੑΛࢦఆͯ͠ɼ໾ׂ΍৘ใ Λ࣋ͨͤΔ͜ͱ͕ग़དྷΔɽ
    ྫ
    B
    ISFGIUUQXXXYNMQSPPSH
    9.-1SPެࣜαΠτB hrefଐੑͰϦϯΫઌΛ͍ࣔͯ͠Δ
24. Follow me Twitter @spre55 タグ(要素)と属性 24 2.HTMLͷ࿩ λάͷதʹ͸ଐੑΛࢦఆͯ͠ɼ໾ׂ΍৘ใ Λ࣋ͨͤΔ͜ͱ͕ग़དྷΔɽ
    ྫ
    B
    ISFGIUUQXXXYNMQSPPSH
    9.-1SPެࣜαΠτB λάͰғ·Εͨ෦෼ = ཁૉ
25. Follow me Twitter @spre55 基本的なタグの紹介 25 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ
26. Follow me Twitter @spre55 文章の区別・改行 1 26 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά ໾ׂ هड़ྫ <a> ϋΠύʔϦϯΫ௥Ճ B
    ISFGB͜͜B
    ΛΫϦοΫ <h1>~<h6> ݟग़͠ Iݟग़͠I <p> ஈམ QҰͭͷύϥάϥϑQ <br> վߦ վߦCS͢ΔΑ
27. Follow me Twitter @spre55 文章の区別・改行 2 27 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά ໾ׂ هड़ྫ <ul> Օ৚ॻ͖ൣғ
    MJλάͰ߲໨Λࢦఆ VM
    ɹMJ߲໨MJ
    ɹMJ߲໨MJ
    ɹMJ߲໨MJ
    VM <ol> ൪߸෇͖Օ৚ॻ͖ൣғ
    MJλάͰ߲໨Λࢦఆ PM
    ɹMJ߲໨MJ
    ɹMJ߲໨MJ
    ɹMJ߲໨MJ
    PM
28. Follow me Twitter @spre55 文章などをまとめる 28 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά ໾ׂ هड़ྫ <div> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ͕ೖΔ ϒϩοΫཁૉ จষEJWจষEJWจ ষ <span> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ͸ೖΒͳ͍ ΠϯϥΠϯ ཁૉ จষTQBOจষTQBO จষ
29. Follow me Twitter @spre55 画像を表示させる 29 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά ໾ׂ هड़ྫ <img> ը૾ͷදࣔɽ
    TSDଐੑͰը૾ϑΝΠϧ 1/(ɼ(*'ɼ+1&( Λࢦఆɽ
    BMUଐੑͰը૾ͷ୅ΘΓʹද ࣔ͞ΕΔจࣈྻΛࢦఆɽ JNH
    TSDTBNQMFKQH
    
    BMUαϯϓϧࣸਅ
    
30. Follow me Twitter @spre55 HTMLにおけるコメント 30 
    ͜͜ʹίϝϯτΛॻ͖·͢
    
    ίϝϯτ͸8FCϖʔδʹදࣔ͞Εͳ͍ 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ ͜ΕͰғΉ
31. Follow me Twitter @spre55 やってみよう！part.1 31 ʮYQXFC@ʯϑΥϧμΛ࡞੒͠ɼͦͷதʹ ʮJOEFYIUNMʯΛ࡞Δ΂͠ʂ
    ʮJOEFYIUNMʯΛ͍ͬͯࣗ͡෼ͷࣗݾ঺հϖʔδ Λ޷͖ͳΑ͏ʹ࡞Δ΂͠ʂʂ
    ͳΜͰ΋͍͍͔Βը૾ΛຕҎ্࢖͏͜ͱ 2.HTMLͷ࿩
32. Follow me Twitter @spre55 参考サイト 32 2.HTMLͷ࿩ )5.-
    ΫΠοΫɾϦϑΝϨϯε
    IUUQXXXIUNRDPN
    $BO
    *
    VTF
    ʜ
    
    IUUQDBOJVTFDPN
    8$όϦσʔλ
    IUUQWBMJEBUPSXPSH
33. Follow me Twitter @spre55 3.CSSの話 33 3.CSSͷ࿩
34. Follow me Twitter @spre55 CSSとは 34 3.CSSͷ࿩ $44 $BTDBEJOH
    4UZMF
    4IFFU
    ˠσβΠϯ΍ϨΠΞ΢τͳͲɼ
    ɹจॻͷݟӫ͑ ελΠϧ Λࢦఆ͢Δ
35. Follow me Twitter @spre55 Webページの構成 35 3.CSSͷ࿩ .html .css .js .css .js image other
36. Follow me Twitter @spre55 CSSの置き場所 36 3.CSSͷ࿩ ɾTUZMFଐੑͰࢦఆ
    ɾTUZMFཁૉͰࢦఆ
    ɾ֎෦ϑΝΠϧ͔ΒಡΈࠐΉ
37. Follow me Twitter @spre55 CSSの置き場所 37 3.CSSͷ࿩ ɾTUZMFଐੑͰࢦఆ
    ɾTUZMFཁૉͰࢦఆ
    ɾ֎෦ϑΝΠϧ͔ΒಡΈࠐΉˡ
38. Follow me Twitter @spre55 38 3.CSSͷ࿩ CSSの使い方 $44ϑΝΠϧΛ࡞੒ޙɼ)5.-ϑΝΠϧͷ
    IFBEλά಺ʹԼهΛهೖ͢Δɽ
    MJOL
    SFMTUZMFTIFFU
    ISFGTUZMFTDTT ͜͜ʹࣗ෼Ͱ࡞੒ͨ͠
    $44ϑΝΠϧͷ৔ॴΛهࡌ
39. Follow me Twitter @spre55 39 3.CSSͷ࿩ やってみよう！part.2 ̍ɽQBSUͰ࡞ͬͨࣗݾ঺հϖʔδͱಉ͡ ৔ॴʹۭͷʮTUZMFTDTTʯΛ࡞Δ΂͠ʂ
    ̎ɽࣗݾ঺հϖʔδͷIFBEλά಺ʹɼ ʮTUZMFTDTTʯͱͷϦϯΫΛॻ͘΂͠ʂ
40. Follow me Twitter @spre55 要素の指定 40 )5.-ͷλά ཁૉ ʹ͸ଐੑΛࢦఆ͠ ͯ৘ใΛ࣋ͨͤΔ͜ͱ͕ग़དྷΔ ˞1_ 3.CSSͷ࿩ - ཁૉͷࢦఆ
41. Follow me Twitter @spre55 id属性とclass属性 41 3.CSSͷ࿩ - ཁૉͷࢦఆ άϩʔόϧଐੑ
    ˠ΄΅͢΂ͯͷཁૉʹࢦఆͰ͖Δଐੑ
    
    ↓ id属性とclass属性
42. Follow me Twitter @spre55 id属性とclass属性 42 3.CSSͷ࿩ - ཁૉͷࢦఆ JEଐੑɹ
    ࣝผࢠ JE Λࢦఆɽͭͷ υΩϡϝϯτ಺ʹಉ໊͡લͷJEଐੑ͸ ͭͷΈ
    
    
    ɹྫ
    
    
    
    EJW
    JEOBNF_EJW
43. Follow me Twitter @spre55 id属性とclass属性 43 3.CSSͷ࿩ - ཁૉͷࢦఆ DMBTTଐੑΫϥε໊Λࢦఆɽͭͷ υΩϡϝϯτ಺ʹෳ਺ͷಉҰΫϥεΛ ࢦఆՄೳ
    
    ྫ
    EJW
    DMBTTOBNF_EJW
44. Follow me Twitter @spre55 セレクタ 44 3.CSSͷ࿩ - ηϨΫλ
45. Follow me Twitter @spre55 適用先の指定 45 3.CSSͷ࿩ - ηϨΫλ ํ๏ ॻࣜ ηϨΫλ λάͰࢦఆ λά໊
    \
    ^ λάͱΫϥε໊Ͱࢦఆ λά໊Ϋϥε໊
    \^ Ϋϥε໊Ͱࢦఆ Ϋϥε໊
    \^ JEͰࢦఆ JE໊
    \^ ෳ਺ͷཁૉʹࢦఆ λά໊
    λά໊
    \^ ͢΂ͯͷཁૉʹద༻
    \^
46. Follow me Twitter @spre55 色を変える 46 3.CSSͷ࿩ - ηϨΫλ NZDPMPS
    \
    
    DPMPS
    GG
    
    CBDLHSPVOEDPMPS
    
    ^
    DTTϑΝΠϧ
47. Follow me Twitter @spre55 色を変える 47 3.CSSͷ࿩ - ηϨΫλ NZDPMPS
    \
    
    DPMPS
    GG
    
    CBDLHSPVOEDPMPS
    
    ^ ηϨΫλ
48. Follow me Twitter @spre55 色を変える 48 3.CSSͷ࿩ - ηϨΫλ NZDPMPS
    \
    
    DPMPS
    GG
    
    CBDLHSPVOEDPMPS
    
    ^ ϓϩύςΟ
49. Follow me Twitter @spre55 色を変える 49 3.CSSͷ࿩ - ηϨΫλ NZDPMPS
    \
    
    DPMPS
    GG
    
    CBDLHSPVOEDPMPS
    
    ^ ϓϩύςΟͷ஋
50. Follow me Twitter @spre55 色を変える 50 3.CSSͷ࿩ - ηϨΫλ DPMPSจࣈ৭Λࢦఆ
    CBDLHSPVOEDPMPSഎܠ৭Λࢦఆ
51. Follow me Twitter @spre55 色を変える 51 3.CSSͷ࿩ - ηϨΫλ ৭ͷࢦఆ ৭໊ SFE rgb()ͱ%஋ SHC    rgb()ͱ10ਐ਺ͷ஋ SHC    # ͱ16ਐ਺ͷ஋ GG
52. Follow me Twitter @spre55 色を変える 52 3.CSSͷ࿩ - ηϨΫλ ΧϥʔίʔυҰཡ
    )5.- $44
    Χϥʔίʔυ
    IUUQXXXOFUZBTVODPNIPNFDPMPSIUNM
53. Follow me Twitter @spre55 53 3.CSSͷ࿩ やってみよう！part.3 ̍ɽࣗݾ঺հϖʔδΛDTTͰ૷০͢΂͠ʂ