定例WordPress講座 - HTML&CSS編

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

ࠓճͷ໨త w 8PSE1SFTTΛॳาϨϕϧͰΧελϚΠζ͢ΔͨΊͷ஌ࣝ  ˠΧελϜ$44ػೳͳͲͷར༻ऀΛ૝ఆ w )5.-ͱ$44ͷجຊதͷجຊʹ৮ΕΔͷΈ w ຊฤͷ಺༰Ҏ্ͷ΋ͷ͸ಠֶ΋͘͠͸ଞͷߨ࠲ͷར༻Λ ਪ঑

υΩϡϝϯτΛࢀߟʹ͢Δʢແྉʣ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT-FBSO)5.-*[email protected]@)5.-

ॻ੶Λࢀߟʹ͢Δ

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

)5.-ͷجຊ

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

)5.-ͷཁૉ

ཁૉʹଐੑΛ௥ՃͰ͖Δ <!doctype html> <html lang="ja"> <head> <title>ϖʔδλΠτϧ</title> <meta charset="utf-8"> </head>
<body> <p class="paragraph">ࢲ͸ͱͯ΋എ͕ߴ͍Ͱ͢</p> </body> </html> IUNMλάʹMBOHଐੑΛ௥Ճ NFUBλάʹDIBSTFUଐੑΛ௥Ճ QλάʹDMBTTଐੑΛ௥Ճ

MBOHଐੑ

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

DMBTTଐੑ

JEଐੑ

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

ྫ <h2 id=“header-2”>ݟग़̍͠</h2> <img class=“image-border” src=“**” alt=“alt-text"> <p class=“header-desc”>ݟग़͠ͷղઆจ</p> <p
class=“paragraph”>ຊจ͕ೖΓ·͢ɻ</p> <h2 id=“header-2”>ݟग़̍͠</h2> <img class=“image-border” src=“**” alt=“alt-text”> <p class=“header-desc”>ݟग़͠ͷղઆจ</p> <p class=“paragraph”>ຊจ͕ೖΓ·͢ɻ</p>

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

$44ͷجຊ

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

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

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

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

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

$44Λ࣮ࡍʹॻ͍ͯΈΑ͏ʂ σϞ

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

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

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

ͦͷલʹʜ 8PSE1SFTTςʔϚʹ$44Λ௥ه͢Δํ๏ w ࢠςʔϚΛ࡞੒ͯ͠هड़͢Δ  ˠΧελϚΠζฤͰৄ͘͠આ໌͠·͢ w ΧελϜ$44ػೳʢ8PSE1SFTҎ߱ʹ౥ࡌʣΛར༻  ˠࠓճ͸ͪ͜Βͷํ๏Ͱ ΧελϜ$44ʹ͍ͭͯɿIUUQTNBLFXPSEQSFTTPSHDPSFGFBUVSFQSPQPTBMCFUUFSUIFNFDVTUPNJ[BUJPOTWJBDVTUPNDTTXJUIMJWFQSFWJFXT

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

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

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

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

#SBDLFUT

%SFBNXFBWFS

1IQ4UPSN

(6*ίϯύΠϥ1SFQSPT

·ͱΊ w )5.-΍$44ͳͲ͸Ұ໷ʹͯ͠੒Βͣ w ͍ͭ΋ίϐϖͰࡁ·͢ͱҰ޲ʹֶश͸ਐ·ͳ͍ w ʮࢼ͢ʯˠʮ֬ೝ͢Δʯˠʮमਖ਼͢Δʯͷ܁Γฦ͠ w ෼͔Βͳ͍͜ͱʹૺ۰ͨ͠Β࣭໰Ͱ͖Δ؀ڥΛࣗ෼Ͱ੔͑ ͓ͯ͜͏ 
ˠ΋͘΋͘ձʹࢀՃ͢Δ  ˠॻ੶Ҏ֎ͷֶश΋ࢼͯ͠ΈΔ w )5.-΍$44͚ͩͰ΋ΧελϚΠζͷ෯͸ͱͯ΋޿͕Δʂ

͓ΘΓ

定例WordPress講座 - HTML&CSS編

定例WordPress講座 - HTML&CSS編

More Decks by Koji Kuno

Other Decks in Programming

Featured

Transcript