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

定例WordPress講座 - HTML&CSS編

Koji Kuno
February 05, 2018

定例WordPress講座 - HTML&CSS編

Koji Kuno

February 05, 2018
Tweet

More Decks by Koji Kuno

Other Decks in Programming

Transcript

  1. ఆྫ8PSE1SFTTߨ࠲
    ʙ)5.-$44ฤʙ

    View Slide

  2. ࠓճͷ໨త
    w 8PSE1SFTTΛॳาϨϕϧͰΧελϚΠζ͢ΔͨΊͷ஌ࣝ

    ˠΧελϜ$44ػೳͳͲͷར༻ऀΛ૝ఆ
    w )5.-ͱ$44ͷجຊதͷجຊʹ৮ΕΔͷΈ
    w ຊฤͷ಺༰Ҏ্ͷ΋ͷ͸ಠֶ΋͘͠͸ଞͷߨ࠲ͷར༻Λ
    ਪ঑

    View Slide

  3. υΩϡϝϯτΛࢀߟʹ͢Δʢແྉʣ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT-FBSO)5.-*OUSPEVDUJPO@UP@)5.-

    View Slide

  4. ॻ੶Λࢀߟʹ͢Δ

    View Slide

  5. ΞδΣϯμ
    w )5.-ͷجຊ
    w $44ͷجຊ
    w σϞʢDPEFQFOJPΛར༻ʣ
    w 8PSE1SFTTςʔϚͷύʔπΛ$44ͰΧελϚΠζͯ͠ΈΑ͏
    w ʲ൪֎ʳ୅දతͳΤσΟλͷ঺հ

    View Slide

  6. )5.-ͷجຊ

    View Slide

  7. )5.-ͱ͸
    )5.-ͱ͸)ZQFS5FYU .BSLVQ -BOHVBHFͷུͰ
    ϓϩάϥϛϯάݴޠͰ͸͋Γ·ͤΜɻ
    )5.-ݴޠ͸ɺ΢ΣϒαΠτ͕ͲͷΑ͏ʹߏ੒
    ͞Ε͍ͯΔ͔ϒϥ΢βʹରͯ͠఻͑ΔͨΊʹར
    ༻͞ΕΔϚʔΫΞοϓݴޠͷҰͭͰ͢ɻ

    View Slide

  8. )5.-ͷཁૉ

    View Slide

  9. ཁૉʹଐੑΛ௥ՃͰ͖Δ



    ϖʔδλΠτϧ



    ࢲ͸ͱͯ΋എ͕ߴ͍Ͱ͢


    IUNMλάʹMBOHଐੑΛ௥Ճ
    NFUBλάʹDIBSTFUଐੑΛ௥Ճ
    QλάʹDMBTTଐੑΛ௥Ճ

    View Slide

  10. MBOHଐੑ

    View Slide

  11. NFUBλάͷDIBSTFUଐੑ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-&MFNFOUNFUB

    View Slide

  12. DMBTTଐੑ

    View Slide

  13. JEଐੑ

    View Slide

  14. )5.-ͱ$44Λ࢖͏্Ͱ
    ઈରʹ஌͓ͬͯ͘΂͖͜ͱ
    w JEଐੑ͸ϖʔδ಺Ͱಉ໊͡લ͕ճ͔͠࢖͑ͳ͍
    w DMBTTଐੑ͸ϖʔδ಺Ͱಉ໊͡લ͕Կ౓Ͱ΋࢖͑Δ
    w $44ͷʮৄࡉ౓ʯʹ͸஫ҙ͠Α͏

    ˠ͋ͱͰσϞͰৄ͘͠

    View Slide


  15. ݟग़̍͠

    ݟग़͠ͷղઆจ
    ຊจ͕ೖΓ·͢ɻ
    ݟग़̍͠

    ݟग़͠ͷղઆจ
    ຊจ͕ೖΓ·͢ɻ

    View Slide

  16. Α͘࢖͏)5.-λά
    BBSUJDMFBTJEFCMPDLRVPUF
    EJWEMEUEEFNIS
    JNHMJPMQQSF
    TFDUJPOTQBOTUSPOHUBCMF
    UCPEZUEUIUIFBEUS
    VM

    View Slide

  17. $44ͷجຊ

    View Slide

  18. $44ͱ͸
    $44͸$BTDBEJOH4UZMF4IFFUͷུͰɺ΢Σϒϖʔδ
    ͷελΠϧΛઃఆ͢ΔίʔυͰ͢ɻ
    ϓϩάϥϛϯάݴޠͰ΋ͳ͘ɺ)5.-ͷΑ͏ͳϚʔ
    ΫΞοϓݴޠͰ΋ͳ͘ɺ$44͸ελΠϧγʔτݴޠ
    Ͱ͢ɻ

    View Slide

  19. $44ͷߏ଄
    p {
    color: red;
    }
    ηϨΫλ
    ϓϩύςΟ ϓϩύςΟ஋

    View Slide

  20. $44ͷॻ͖ํ͍Ζ͍Ζʙ̍ʙ
    w શশηϨΫλʢʣ
    w ཁૉܕηϨΫλʢQ EJW UBCMFʣ
    w ΫϥεηϨΫλʢDMBTTOBNFʣ
    w ଐੑηϨΫλʢMBOHʣ
    w ٖࣅηϨΫλʢpSTUDIJME CFGPSFʣ
    w *%ηϨΫλʢJEOBNFʣ
    w ΠϯϥΠϯελΠϧʢλάʹ௚઀ೖྗʣ

    View Slide

  21. $44ͷॻ͖ํ͍Ζ͍Ζʙ̎ʙ
    w ྡ઀ηϨΫλʢ"#ʣ
    w ҰൠܑఋηϨΫλʢ"_#ʣ
    w ࢠηϨΫλʢ"#ʣ
    w ࢠଙηϨΫλʢ"#ʣ
    ࢀরɿIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$443FGFSFODF4FMFDUPST

    View Slide

  22. $44ϓϩύςΟྫ
    w DPMPSˠจࣈͷ৭Λࢦఆ
    w UFYUEFDPSBUJPOˠจࣈʹԼઢΛೖΕͨΓ
    w GPOUTJ[FˠจࣈͷαΠζΛࢦఆ
    w GPOUXFJHIUˠจࣈͷଠ͞Λࢦఆ
    w CPSEFSˠܩઢͷઃఆ
    w QBEEJOHˠཁૉ಺ͷ༨നΛઃఆ
    w NBSHJOˠཁૉ֎ͷ༨നΛઃఆ
    ࢀরɿIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$443FGFSFODF

    View Slide

  23. $44Λ࣮ࡍʹॻ͍ͯΈΑ͏ʂ
    σϞ

    View Slide

  24. $44ͷৄࡉ౓
    શশηϨΫλ
    ཁૉܕηϨΫλʢλΠϓηϨΫλʣ
    ΫϥεηϨΫλ
    ଐੑηϨΫλ
    ٖࣅηϨΫλ
    *% ηϨΫλ
    ΠϯϥΠϯελΠϧ
    ڧ

    View Slide

  25. $44ͷৄࡉ౓Λମݧͯ͠ΈΑ͏ʂ
    σϞ

    View Slide

  26. 8PSE1SFTTςʔϚͷύʔπΛ
    $44ͰΧελϚΠζͯ͠ΈΑ͏

    View Slide

  27. ͦͷલʹʜ
    8PSE1SFTTςʔϚʹ$44Λ௥ه͢Δํ๏
    w ࢠςʔϚΛ࡞੒ͯ͠هड़͢Δ

    ˠΧελϚΠζฤͰৄ͘͠આ໌͠·͢
    w ΧελϜ$44ػೳʢ8PSE1SFTҎ߱ʹ౥ࡌʣΛར༻

    ˠࠓճ͸ͪ͜Βͷํ๏Ͱ
    ΧελϜ$44ʹ͍ͭͯɿIUUQTNBLFXPSEQSFTTPSHDPSFGFBUVSFQSPQPTBMCFUUFSUIFNFDVTUPNJ[BUJPOTWJBDVTUPNDTTXJUIMJWFQSFWJFXT

    View Slide

  28. JE΍DMBTTͷௐࠪʹ͸(PPHMF$ISPNF
    σϕϩούʔπʔϧΛ࢖͍·͢
    <.BD>ʲදࣔʳˠʲ։ൃ؅ཧʳˠʲσϕϩούʔπʔϧʳ·ͨ͸⌘ʴ0QUJPOʴ*ʗ<8JOEPXT>ʲ'ʳ

    View Slide

  29. खॱ
    σϕϩούʔπʔϧͰมߋ͍ͨ͠Օॴͷߏ଄Λ֬ೝ
    ࣮ࡍʹ&MFNFOUTͷ4UZMFT͔Β$44Λॻ͍ͯςετͯ͠ΈΔ
    ςετ͕͏·͍ͬͨ͘Βɺͦͷهड़Λίϐʔͯ͠௥Ճ͢Δ

    View Slide

  30. $ISPNFσϕϩούʔπʔϧ
    ͰΧελϚΠζͷͨΊͷௐࠪ
    σϞ

    View Slide

  31. ʲ൪֎ʳ
    ୅දతͳΤσΟλͷ঺հ

    View Slide

  32. "UPN

    View Slide

  33. #SBDLFUT

    View Slide

  34. %SFBNXFBWFS

    View Slide

  35. $PEB

    View Slide

  36. 1IQ4UPSN

    View Slide

  37. (6*ίϯύΠϥ1SFQSPT

    View Slide

  38. ·ͱΊ
    w )5.-΍$44ͳͲ͸Ұ໷ʹͯ͠੒Βͣ
    w ͍ͭ΋ίϐϖͰࡁ·͢ͱҰ޲ʹֶश͸ਐ·ͳ͍
    w ʮࢼ͢ʯˠʮ֬ೝ͢Δʯˠʮमਖ਼͢Δʯͷ܁Γฦ͠
    w ෼͔Βͳ͍͜ͱʹૺ۰ͨ͠Β࣭໰Ͱ͖Δ؀ڥΛࣗ෼Ͱ੔͑
    ͓ͯ͜͏

    ˠ΋͘΋͘ձʹࢀՃ͢Δ

    ˠॻ੶Ҏ֎ͷֶश΋ࢼͯ͠ΈΔ
    w )5.-΍$44͚ͩͰ΋ΧελϚΠζͷ෯͸ͱͯ΋޿͕Δʂ

    View Slide

  39. ͓ΘΓ

    View Slide