Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web班番外編 jQuery

Web班番外編 jQuery

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

シュプレ

October 29, 2014
Tweet

More Decks by シュプレ

Other Decks in Technology

Transcript

  1. Follow me Twitter @spre55 ブラウザ間の差異 6 1.Webք۾ͷ࿩ Webϒϥ΢β ϨϯμϦϯάΤϯδϯ Internet

    Explorer Trident FireFox Gecko Safari Webkit Google Chrome Blink Opera Blink ֤ϒϥ΢βͷϨϯμϦϯάΤϯδϯ(2014೥1݄࣌఺)
  2. Follow me Twitter @spre55 世界初のWebサイト 7 1.Webք۾ͷ࿩ )5.-ͷੜΈͷ਌ ςΟϜɾόʔφʔζɾϦʔ ౰࣌$&3/ࡏ੶

     888ͷ࢓૊ΈΛ࡞ͬͨਓ ೥݄೔ʹઃཱɿੈքॳͷ8FCαΠτ IUUQJOGPDFSODIIZQFSUFYU8885IF1SPKFDUIUNM wikipediaΑΓ
  3. Follow me Twitter @spre55 参考サイト 9 1.Webք۾ͷ࿩ )551ͱ͸ ʜ IUUQWJSBMDPNNVOJUZDPNPUIFSJUIUUQ

    ϒϥ΢βͷ࢓૊Έ IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL 4VCMJNF5FYUΛΠϯετʔϧͨ͠Βʜ IUUQLFJESVOUVNCMSDPNQPTUUJQTTVCMJNFUFYUTVCMJNFUFYU αʔόαΠυ+BWB4DSJQUͷຊ໋ʮ/PEFKTʯʜ IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
  4. Follow me Twitter @spre55 HTMLひな形 11 2.HTMLͷ࿩ %0$5:1&IUNM IUNM IFBE

     UJUMFλΠτϧUJUMF IFBE CPEZ  ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM
  5. 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.-ͷจॻͩΑ ͱએݴ͢Δ
  6. Follow me Twitter @spre55 HTMLひな形 13 2.HTMLͷ࿩ %0$5:1&IUNM IUNM IFBE

     UJUMFλΠτϧUJUMF IFBE CPEZ  ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM )5.-λάɿ )5.-ͷൣғΛࣔ͢
  7. Follow me Twitter @spre55 HTMLひな形 14 2.HTMLͷ࿩ %0$5:1&IUNM IUNM IFBE

     UJUMFλΠτϧUJUMF IFBE CPEZ  ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM )&"%λάɿ )5.-จॻશମͷ৘ใ
  8. Follow me Twitter @spre55 HTMLひな形 15 2.HTMLͷ࿩ %0$5:1&IUNM IUNM IFBE

     UJUMFλΠτϧUJUMF IFBE CPEZ  ͜Ε͸)5.-Ͱهड़͞ΕͨϑΝΠϧͰ͢ɽCS CPEZ IUNM #0%:λάɿ )5.-จॻͷ಺༰
  9. Follow me Twitter @spre55 文章の区別・改行 1 26 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ

    λά ໾ׂ هड़ྫ <a> ϋΠύʔϦϯΫ௥Ճ BISFGB͜͜B ΛΫϦοΫ <h1>~<h6> ݟग़͠ Iݟग़͠I <p> ஈམ QҰͭͷύϥάϥϑQ <br> վߦ վߦCS͢ΔΑ
  10. 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
  11. Follow me Twitter @spre55 文章などをまとめる 28 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά

    ໾ׂ هड़ྫ <div> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ͕ೖΔ ϒϩοΫཁૉ จষEJWจষEJWจ ষ <span> ίϯςϯπͷ·ͱ·ΓΛ ද͢ɽཁૉͷલޙʹվߦ ͸ೖΒͳ͍ ΠϯϥΠϯ ཁૉ จষTQBOจষTQBO จষ
  12. Follow me Twitter @spre55 画像を表示させる 29 2.HTMLͷ࿩ - جຊతͳλάͷ঺հ λά

    ໾ׂ هड़ྫ <img> ը૾ͷදࣔɽ TSDଐੑͰը૾ϑΝΠϧ 1/(ɼ(*'ɼ+1&( Λࢦఆɽ BMUଐੑͰը૾ͷ୅ΘΓʹද ࣔ͞ΕΔจࣈྻΛࢦఆɽ JNHTSDTBNQMFKQH BMUαϯϓϧࣸਅ 
  13. Follow me Twitter @spre55 CSSとは 34 3.CSSͷ࿩ $44 $BTDBEJOH4UZMF4IFFU 

    ˠσβΠϯ΍ϨΠΞ΢τͳͲɼ ɹจॻͷݟӫ͑ ελΠϧ Λࢦఆ͢Δ
  14. Follow me Twitter @spre55 id属性とclass属性 41 3.CSSͷ࿩ - ཁૉͷࢦఆ άϩʔόϧଐੑ

    ˠ΄΅͢΂ͯͷཁૉʹࢦఆͰ͖Δଐੑ  ↓ id属性とclass属性
  15. Follow me Twitter @spre55 id属性とclass属性 42 3.CSSͷ࿩ - ཁૉͷࢦఆ JEଐੑɹࣝผࢠ

    JE Λࢦఆɽͭͷ υΩϡϝϯτ಺ʹಉ໊͡લͷJEଐੑ͸ ͭͷΈ   ɹྫ    EJWJEOBNF_EJW
  16. Follow me Twitter @spre55 id属性とclass属性 43 3.CSSͷ࿩ - ཁૉͷࢦఆ DMBTTଐੑΫϥε໊Λࢦఆɽͭͷ

    υΩϡϝϯτ಺ʹෳ਺ͷಉҰΫϥεΛ ࢦఆՄೳ  ྫ EJWDMBTTOBNF_EJW
  17. Follow me Twitter @spre55 適用先の指定 45 3.CSSͷ࿩ - ηϨΫλ ํ๏

    ॻࣜ ηϨΫλ λάͰࢦఆ λά໊\^ λάͱΫϥε໊Ͱࢦఆ λά໊Ϋϥε໊\^ Ϋϥε໊Ͱࢦఆ Ϋϥε໊\^ JEͰࢦఆ JE໊\^ ෳ਺ͷཁૉʹࢦఆ λά໊ λά໊\^ ͢΂ͯͷཁૉʹద༻ \^
  18. Follow me Twitter @spre55 色を変える 46 3.CSSͷ࿩ - ηϨΫλ NZDPMPS\

     DPMPSGG  CBDLHSPVOEDPMPS ^ DTTϑΝΠϧ
  19. Follow me Twitter @spre55 色を変える 47 3.CSSͷ࿩ - ηϨΫλ NZDPMPS\

     DPMPSGG  CBDLHSPVOEDPMPS ^ ηϨΫλ
  20. Follow me Twitter @spre55 色を変える 48 3.CSSͷ࿩ - ηϨΫλ NZDPMPS\

     DPMPSGG  CBDLHSPVOEDPMPS ^ ϓϩύςΟ
  21. Follow me Twitter @spre55 色を変える 49 3.CSSͷ࿩ - ηϨΫλ NZDPMPS\

     DPMPSGG  CBDLHSPVOEDPMPS ^ ϓϩύςΟͷ஋
  22. Follow me Twitter @spre55 色を変える 51 3.CSSͷ࿩ - ηϨΫλ ৭ͷࢦఆ

    ৭໊ SFE rgb()ͱ%஋ SHC    rgb()ͱ10ਐ਺ͷ஋ SHC    # ͱ16ਐ਺ͷ஋ GG
  23. Follow me Twitter @spre55 色を変える 52 3.CSSͷ࿩ - ηϨΫλ ΧϥʔίʔυҰཡ

    )5.- $44Χϥʔίʔυ IUUQXXXOFUZBTVODPNIPNFDPMPSIUNM