THE HAM MEDIA BLOG

•\Ž¦‚ª•ö‚ê‚Ä‚é!?‚»‚ñ‚ÈŽž‚ÌŒ´ˆö”­Œ©•û–@

Clip to Evernote ‚±‚̃Gƒ“ƒgƒŠ[‚ð‚͂ĂȃuƒbƒNƒ}[ƒN‚ɒljÁ
ƒJƒeƒSƒŠF
CSS
ƒ^ƒOF
CSS
Firebug
ƒoƒO

•\Ž¦‚ª•ö‚ê‚Ä‚é!?‚»‚ñ‚ÈŽž‚ÌŒ´ˆö”­Œ©•û–@

ƒuƒ‰ƒEƒU‚ÅŠm”F‚ð‚¹‚¸‚ɃR[ƒfƒBƒ“ƒO‚É–v“ª‚µ‚Ä‚¢‚é‚ƁA‚¢‚‚̊Ԃɂ©•ö‚ê‚Ä‚µ‚Ü‚Á‚Ä‚¢‚é‚È‚ñ‚Ä‚±‚Æ‚ªŒ‹\‘½‚­‚ ‚é‚Ì‚Å‚·‚ªA‚»‚ÌŒ´ˆö‚Æ‚È‚é•”•ª‚ðŒ©‚Â‚¯‚é‚̂́AŠµ‚ê‚é‚Ü‚Å‚Í‚©‚Ȃ莞ŠÔ‚ª‚©‚©‚Á‚Ä‚µ‚Ü‚¤BŽ©•ª‚àƒR[ƒfƒBƒ“ƒO‚ðŠo‚¦‚½‚Ä‚Ì‚±‚ë‚́A”ŽžŠÔ‚àŒ´ˆö‚Æ‚È‚é‰ÓŠ‚ðŒ©‚Â‚¯‚邱‚Æ‚É”Y‚ñ‚¾‚肵‚½ŽžŠú‚à‚ ‚è‚Ü‚µ‚½B

‰SŽÒ‚Ȃǂ́A–â‘è‚Æ‚È‚é‰ÓŠ‚ðŒ©‚Â‚¯‚é‚Ì‚É‹ê˜J‚µ‚½‚è‚·‚é‚ÆŽv‚¢‚Ü‚·B–â‘è‚ð‰ðŒˆ‚³‚¹‚邽‚߂ɁACSS‚ð‚Ç‚ñ‚Ç‚ñ‰Á‚¦‚Ä‚¢‚Á‚½‚èAimportant!‚ð‚‚¯‚½‚è‚È‚ñ‚Ä‚±‚Æ‚Å‰ðŒˆ‚³‚¹‚悤‚Æ‚·‚él‚à‚¢‚é‚ÆŽv‚¢‚Ü‚·‚ªA¡‰ñ‚Í‚»‚Ì–â‘è‚Æ‚È‚é‰ÓŠ‚ðŒ©‚Â‚¯‚邽‚߂ɁA‚µ‚Ä‚¨‚­‚Æ‚¢‚¢‚±‚Æ‚ðA‚¢‚­‚‚©Ð‰î‚µ‚Ü‚·B

‚Ü‚¸A‚ ‚í‚Ä‚È‚¢‚±‚Æ

•\Ž¦‚ª•ö‚ê‚Ä‚¢‚½‚è‚·‚é‚ƁA‚à‚Ì‚·‚²‚­‚ ‚¹‚Á‚Ä‚µ‚Ü‚Á‚½‚èA‰ðŒˆ‚µ‚È‚¢‚Æ‚·‚²‚­ƒCƒ‰ƒCƒ‰‚ª‚½‚Ü‚Á‚Ä‚µ‚Ü‚¤‚È‚ñ‚Ä‚±‚Æ‚ª‚ ‚é‚Ì‚Å‚·‚ªA‚Ü‚¸Å‰‚Í—Ž‚¿’…‚­‚±‚Æ‚Å‚·‚æ‚ˁB‚ ‚¹‚Á‚½‚èƒCƒ‰ƒCƒ‰‚·‚é‚ƁAŒ‹\ŠÈ’P‚È‚±‚Æ‚Å‚àŒ©—Ž‚Æ‚µ‚Ä‚µ‚Ü‚¢‚Ü‚·‚©‚çB•sŽv‹c‚Å‚·‚æ‚ˁB

Firebug‚ðŽg‚¤i’l•Îj

Firebug‚Í•K{‚Å‚·‚æ‚ˁB‚Ç‚±‚Å‚Ç‚ñ‚ÈŽw’肪‚³‚ê‚Ä‚¢‚é‚Ì‚©A‚ǂ̂悤‚ÉŽw’肪ˆø‚«Œp‚ª‚ê‚Ä‚¢‚é‚Ì‚©‚È‚Ç‚ÌŠm”F‚ð‚·‚é‚Ì‚É•Ö—˜‚Å‚·B

firebug

CSS‚ð‚¢‚­‚Â‚à‚¢‚ë‚ñ‚ȏꏊ‚ÉŽw’肵‚Ä‚¢‚½‚Æ‚µ‚Ä‚àA‚±‚±‚ðŒ©‚é‚Æ‚·‚®‚É‚í‚©‚è‚Ü‚·B•ö‚ê‚Ä‚µ‚Ü‚Á‚Ä‚¢‚éê‡AŒ´ˆö‚Æ‚È‚è‚»‚¤‚È‚Æ‚±‚ë‚ÌCSS‚ðƒ`ƒFƒbƒN‚Å‚·B

‚µ‚©‚µACSS‚ª‚½‚­‚³‚ñŽw’肳‚ê‚Ä‚¢‚½‚肵‚āAÅI“I‚É‚Ç‚Ì’l‚ªŽg‚í‚ê‚Ä‚¢‚é‚Ì‚©‚Á‚Ä‚í‚©‚è‚Â炢B‚»‚±‚ŁAFirebug‚̉E‚É‚ ‚éuƒIƒvƒVƒ‡ƒ“v‚ðƒNƒŠƒbƒN‚µ‚āuŽZ’肳‚ꂽƒXƒ^ƒCƒ‹‚ð•\Ž¦v‚Ƀ`ƒFƒbƒN‚ð“ü‚ê‚é

firebug

‚·‚é‚ƁA‘S‚Ä‚ÌCSS‚©‚瓱‚©‚ê‚āA“K‰ž‚³‚ê‚Ä‚¢‚é’l‚ð’m‚邱‚Æ‚ª‚Å‚«‚éBŽZ’肳‚ꂽ’l‚Å‚¨‚©‚µ‚­‚È‚Á‚Ä‚¢‚邱‚Æ‚É‹C‚­‚È‚ñ‚Ä‚±‚Æ‚à‚ ‚é‚̂ŁA‚±‚±‚à—vƒ`ƒFƒbƒNB

firebug

Firebug‚ðŽg‚¤iŽ‹Šo•Îj

‚»‚ê‚ƁAFirebug‚Ì‚à‚¤ˆê‚‚̎g‚¢•û‚̏ЉîB’ʏíAŒ©‚½‚¢‚Æ‚±‚ë‚ɃJ[ƒ\ƒ‹‚ð‡‚í‚¹‚Ä‚¢‚邾‚¯‚¾‚ƁA—v‘f‚ª˜g‚ň͂í‚ê‚邾‚¯‚È‚Ì‚¾‚ªAHTML’†‚́AŒ©‚½‚¢ƒ^ƒO‚ɃJ[ƒ\ƒ‹‚ð‡‚í‚¹‚é‚ƁA—v‘f‚ª”¼“§–¾‚̃ŒƒCƒ„[‚Å•¢‚í‚ê‚éBŽ‹Šo“I‚ɂǂ̂悤‚ÈŽw’è‚É‚È‚Á‚Ä‚¢‚é‚Ì‚©Aƒ`ƒFƒbƒN‚µ‚â‚·‚¢‚̂ŁA‚±‚ê‚àŽg‚¤‚ׂ«‹@”\‚̈ꂁB

firebug

”wŒiF‚ð‚‚¯‚Ä‚Ý‚é

Firefox‚ÅŠm”F‚·‚éê‡‚́A‚±‚ÌFirebug‚ª‚ ‚é‚©‚ç•Ö—˜‚¾‚µAIE‚Å‚àuInternet Explorer Developer Toolbarv‚¾‚Á‚½‚èAFirebug Lite‚È‚ñ‚©‚à‚ ‚é‚Ì‚Å‚·‚ªAƒVƒ“ƒvƒ‹‚É—v‘f‚Ì”wŒiF‚ð•Ï‚¦‚Ä‚µ‚Ü‚¤•û–@‚àAŒ´ˆö‚ðŒ©‚Â‚¯‚â‚·‚­‚µ‚Ä‚­‚ê‚Ü‚·B

background-color

’Pƒ‚ÉCSS‚É”wŒiF‚ð‰Á‚¦‚é‚©A‚Å‚à‚»‚ꂾ‚Æ–Ê“|‚Ȃ̂ŁAHTML‚ÌŒ©‚½‚¢ƒ^ƒO‚Ì‚Æ‚±‚ë‚ɁAstyle‚Åbackground-color‚ðŽw’è‚·‚é‚Ù‚¤‚ªŒ©‚‚¯‚â‚·‚­‚È‚è‚Ü‚·Bfloat‚Ì‰ðœ‚µ–Y‚ê‚âA‡Œv’l‚ª‘å‚«‚­‚È‚Á‚Ä‚¢‚é‚ȂǁA‚±‚Ì•û–@‚¾‚¯‚Å‚à‚©‚Ȃ茩‚‚¯‚â‚·‚­‚È‚é‚ÆŽv‚¢‚Ü‚·B

zoom:1;‚ð‚‚¯‚Ä‚Ý‚é

ã‹L‚Ì•û–@‚ŁAŒ´ˆö‰ÓŠ‚ðŒ©‚Â‚¯‚½‚Æ‚µ‚Ä‚àA‚Ç‚¤’l‚ð•Ï‰»‚³‚¹‚Ä‚à’¼‚ç‚È‚¢‚Æ‚«‚ª‚ ‚éB“Á‚ÉIEŠÖ˜A‚Å‚»‚¤‚¢‚¤ƒP[ƒX‚ª‘½‚¢‚̂ŁA‚»‚ñ‚ÈŽ–‘Ô‚É‚È‚Á‚½‚çA‹C‚É‚È‚é‰ÓŠ‚Ɂuzoom:1;v‚ÌŽw’è‚ð‚‚¯‚Ä‚Ý‚éB‚±‚ê‚́A–â‘è‚Æ‚È‚Á‚Ä‚¢‚é‰ÓŠ‚ŁAhasLayoutŠÖ˜A‚ªŒ´ˆö‚Å–â‘è‚Æ‚È‚Á‚Ä‚¢‚é‰Â”\«‚ª‚ ‚é‚̂ŁA‚Æ‚è‚ ‚¦‚¸‚±‚Ìzoom:1;‚ð‚‚¯‚Ä‚Ý‚éB‚»‚ê‚Å‰ðŒˆ‚µ‚½ê‡‚ŁAzoom:1;‚ðŽg‚¢‚½‚­‚È‚¢ê‡‚Ȃǂ́Aheight‚ð‚‚¯‚Ä‚Ý‚½‚肵‚āAhasLayput‚ðtrue‚É‚·‚邱‚Æ‚Å–â‘è‰ðŒˆ‚Å‚·B

CSS‚ðíœ‚µ‚Ä‚Ý‚é

Žž‚É‚Í‘å’_‚ɁACSS‚ð‚²‚Á‚»‚èíœ‚µ‚Ä‚Ý‚éB‚±‚ê‚ð‚·‚é‚Æ‚«‚̓oƒbƒNƒAƒbƒv‚ð–Y‚ꂸ‚ɁBíœ‚µ‚āA•ö‚ꂪ‚È‚¢ó‘Ô‚Ü‚Å‚à‚Ç‚µ‚Ă݂āA‚»‚±‚©‚烊ƒgƒ‰ƒC‚·‚é‚©AÁ‚µ‚½CSS‚Ì’l‚ðŒ³‚É–ß‚µ‚āAÁ‚µ‚½”͈͓à‚Ì•”•ª‚¾‚¯‚ðC³‚·‚邱‚ƂŁA‘Šú‰ðŒˆ‚³‚¹‚½‚è‚à‚Å‚«‚éB

•û–@‚ð‚¢‚­‚‚©‘‚«‚Ü‚µ‚½‚ªc

Œ´ˆö‚ðŒ©‚Â‚¯‚½‚è‚·‚é•û–@‚ðŠô‚‚©‘‚«‚Ü‚µ‚½‚ªAŒ‹‹Ç‚̓oƒO‚É‚È‚é‚悤‚È‚±‚Æ‚ð’m‚Á‚Ä‚¢‚é‚©‚É‚æ‚Á‚āAŒ©‚‚¯‚é‚Ü‚Å‚ÌŽžŠÔ’Zk‚É‚È‚é‚̂ŁAƒoƒO‚ðŒ©‚Â‚¯‚½‚çA‚Ç‚ñ‚ȏ󋵂łǂñ‚ȃoƒO‚¾‚Á‚½‚Ì‚©‚ðƒƒ‚‚µ‚½‚èAƒoƒbƒNƒAƒbƒv‚µ‚Ä‚¨‚­‚È‚Ç‚µ‚āA‚»‚̏󋵂ðŠo‚¦‚Ä‚¨‚­‚±‚Æ‚àd—v‚¾‚Á‚½‚肵‚Ü‚·BŒãX’mŽ¯‚ð‚‚¯‚Ä‚¢‚Á‚½Œã‚ÉŒ©’¼‚·‚ƁAˆÓŠO‚ÆŠÈ’P‚È–â‘肾‚Á‚½‚±‚Æ‚É‹C‚­‚©‚à‚µ‚ê‚È‚¢‚Å‚·B

‚½‚¾‚½‚¾AƒR[ƒfƒBƒ“ƒO‚µ‚Ä‚¢‚­‚¾‚¯‚¶‚á‚È‚­‚āA‚Ç‚ñ‚ȃoƒO‚ɂǂ̂悤‚ȏ󋵂ŏo‰ï‚Á‚½‚©AƒoƒO‚Æ‚©•ö‚ê‚ɏo‰ï‚í‚È‚¢‚½‚ß‚É‚Í‚Ç‚¤‚µ‚½‚ç‚¢‚¢‚Ì‚©‚ȂǁA‚Å‚«‚邾‚¯Šo‚¦‚Ä‚¨‚­‚±‚Æ‚ðA‚¨‚·‚·‚ß‚µ‚Ü‚·I‚»‚ꂪŽ©•ª‚ÌŒoŒ±‚Æ‚È‚Á‚Ä‚¢‚­‚Ì‚Å‚·I

‚±‚Ì‹LŽ–‚ւ̃Rƒƒ“ƒg
ƒRƒƒ“ƒg‚ð‘‚­
‚¨–¼‘O: [•K{“ü—Í]

ƒ[ƒ‹ƒAƒhƒŒƒX: [•K{“ü—Í]

ƒz[ƒ€ƒy[ƒWƒAƒhƒŒƒX:

ƒRƒƒ“ƒg: [•K{“ü—Í]

”FØƒR[ƒh: [•K{“ü—Í]


¦‰æ‘œ‚Ì’†‚Ì•¶Žš‚𔼊p‚Å“ü—Í‚µ‚Ä‚­‚¾‚³‚¢B

‚±‚Ì‹LŽ–‚ւ̃gƒ‰ƒbƒNƒoƒbƒN

ƒgƒbƒv‚É–ß‚é