CSSレイアウト

ܳज़৘ใԋशσβΠϯ 8FC ୈ̓ճɿ$44ϨΠΞ΢τ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

ຊ೔ͷ಺༰ ‣ ϘοΫεϞσϧʹ͍ͭͯ ෮श ! ‣ $44Ͱஈ૊ϨΠΞ΢τΛ͢Δ ‣ $44ͰϖʔδͷϑϨʔϜϫʔΫΛ࡞੒͢Δ
‣ ·ͣ͸γϯϓϧͳஈ૊ϨΠΞ΢τʹ௅ઓ ‣ ϔομʔ ‣ ίϯςϯτ ‣ αΠυόʔ ‣ ϑολʔ ‣ ϙϐϡϥʔͳͭͷํ๏ ‣ qPBU ‣ QPTJUJPO

ϘοΫεϞσϧ ‣ $44Ͱ͸શͯͷཁૉΛ௕ํܗͷϘοΫεΛ୯Ґͱͯ͠ߟ͑Δ ‣ ϒϥ΢βͷը໘ͷதͰੵΈ໦Λ͍ͯ͠Δײ֮ ‣ ͍··ͰֶΜͰ͖ͨ)5.-ͷ΄ͱΜͲཁૉ ϒϩοΫϨϕϧཁૉ ͸ͦͷपғʹݟ͑ͳ ͍௕ํܗͷϘοΫεΛ͍࣋ͬͯͨ
‣ ϘοΫεͷपғͷ༨നɺ࿮ઢɺഎܠʹ༷ʑͳϓϩύςΟΛ༩͑Δ͜ͱͰ༷ʑͳελΠ ϧΛ࣮ݱ͢Δ

ϘοΫεϞσϧ ‣ ίϯςϯτ ‣ ཁૉͷ಺༰ͦͷ΋ͷ ! ‣ CPSEFS ‣ ཁૉΛऔΓғΉ࿮ઢ
! ‣ QBEEJOH ‣ ίϯςϯτͱϘʔμʔ·Ͱͷ༨ന ! ‣ NBHJO ‣ ྡ઀͢ΔଞͷϘοΫεཁૉͱϘʔμʔ·Ͱͷ༨ന

ཁૉͷ಺༰ ίϯςϯτ NBSHJO QBEEJOH CPSEFS ྡ઀͢ΔϘοΫεͱͷڥք ϘοΫεϞσϧ

ϘοΫεϞσϧ ‣ NBSHJOͱQBEEJOHͷ஋ͷઃఆ ‣ ༨നͷ஋͸ҰൠαΠζ FN QU QY ͳͲ Ͱࢦఆ͢Δ
‣ ෳ਺ͷ஋ΛεϖʔεͰ۠੾ͬͯ·ͱΊͯهड़Ͱ͖Δ ‣ ஋ͷهड़਺ ‣ ɿ্ԼࠨӈΛ·ͱΊͯઃఆ ‣ ɿ্Լɺࠨӈͷॱʹઃఆ ‣ ɿ্ɺࠨӈɺԼ ‣ ɿ্ɺӈɺԼɺࠨͷॱͰઃఆɻ ্͔Β࣌ܭ·ΘΓ

ϘοΫεϞσϧ ‣ CPSEFSͷϓϩύςΟ ‣ ͭͷϓϩύςΟΛ࣋ͭ ‣ CPSEFSXJEUIɿ࿮ઢͷ෯ ‣ CPSEFSDPMPSɿ࿮ઢͷ৭ ‣
CPSEFSTUZMFɿ࿮ઢͷछྨ ‣ OPOFɺTPMJEɺEPVCMFɺEPUUFEɺEBTIFEɺHSPPWFɺJOTFUɺPVUTFUɺSJEHF

ηϨΫλৄࡉ

ηϨΫλৄࡉ ‣ ηϨΫλ͸ɺ୯ʹཁૉ໊Λࢦఆ͢Δ͚ͩͰͳ͘ɺ༷ʑͳࢦఆͷํ๏͕ଘࡏ͢Δ ‣ ࠷ॳ͔Βશ෦ΛهԱ͢Δͷ͸େมͰ͕͢ɺͪΐͬͱͣͭ਎ʹ͚͍͖ͭͯ·͠ΐ͏

DMBTTͱJE ‣ DMBTTଐੑ ‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮDMBTTIPHFʯͱ͍͏ଐੑͰࢦఆ͞ΕΔ ! ‣ JEଐੑ
‣ ཁૉ໊ͷޙΖʹΛ͚ͭͯɺͦͷޙͷΫϥε໊Λ͚ͭΔ ‣ Ϋϥεଐੑ͸)5.-ͷλάʹʮJEIPHFʯͱ͍͏ଐੑͰࢦఆ͞ΕΔ ‣ ಉ͡JEଐੑ͸ͻͱͭͷ)5.-ϑΝΠϧͷதͰճͷΈ࢖༻Մ

EJWͱTQBO ‣ EJWͱTQBOͰબ୒ൣғΛ·ͱΊΔ ‣ EJWཁૉ΍TQBOཁૉͰෳ਺ͷཁૉΛғΉ͜ͱʹΑͬͯɺҰఆͷൣғʹ·ͱΊͯελΠ ϧΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ ‣ EJW΍TQBOཁૉ͸ɺDMBTT΍JEʹΑͬͯ$44͔Βࣝผ͢Δ <div class=”myclass”>
... </div> <div id=”myid”> ... </div> .myclass { ... } ! #myid { ... }

EJWͱTQBO ‣ EJWཁૉߴ౓ͳελΠϧࢦఆͷجຊͱͳΔ ! ‣ ϖʔδ಺ͷػೳͷԠͯ͡)5.-Λ۠෼෼͚͢Δ ‣ ϔομ ‣ ϑολ
‣ ϝχϡʔόʔ ‣ αΠυόʔFUD ! ‣ ஈ૊ʹԠ༻

$44ϨΠΞ΢τ

$44ϨΠΞ΢τ ‣ ΑΓߴ౓ͳ$44ͷ׆༻ ‣ $44Λར༻ͨ͠ϖʔδશମͷϨΠΞ΢τ ‣ ͍͔ͭ͘ͷํ๏Λ঺հ

ϕʔεͱͳΔ)5.-ͷ࡞੒ ‣ ϕʔεͱͳΔ)5.-ϑΝΠϧΛԼه͔Βμ΢ϯϩʔυ͠·͢ ‣ ࠷௿ݶͷ)5.-ͱ$44ͷઃఆ͕͋Β͔͡ΊߦΘΕ͍ͯ·͢ ! ‣ μ΢ϯϩʔυઌ ‣ http://goo.gl/jWOzk

ϕʔεͱͳΔ)5.-ͷ࡞੒ <!DOCTYPE HTML> <html> <head> <title>CSSϨΠΞ΢τͷςϯϓϨʔτ</title> <meta charset="UTF-8" /> <link
href="css/style.css" rel="stylesheet" media="all" /> </head> <body> <div id="header"> ... </div> <div id="sidebar"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> </body> </html>

໨ඪͱ͢ΔϨΠΞ΢τͷϫΠϠʔϑϨʔϜ ‣ ໨ඪͱ͢ΔϨΠΞ΢τ )FBEFS $POUFOU 4JEFCBS 'PPUFS

ํ๏"ɿαΠυόʔͷුಈԽ ‣ $44ͷqPBUϓϩύςΟΛར༻ͯ͠ɺஈ૊Λ࡞੒͢Δํ๏ ! ‣ ֤ϨΠΞ΢τͷηάϝϯτ͝ͱʹɺϒϩοΫΛ࡞੒ ‣ EJWཁૉΛ࢖༻͢Δ ‣ EJWʹғ·Εͨ಺༰Λͻͱͭͷ·ͱ·Γͱͯ͠ѻ͏
! ‣ ͭͷϒϩοΫʹ෼͚ͯɺͦΕͧΕʹJEଐੑΛࢦఆ͢Δ ‣ IFBEFS ‣ TJEFCBS ‣ DPOUFOU ‣ GPPUFS

ํ๏"ɿαΠυόʔͷුಈԽ ‣ CPEZཁૉͷத਎ΛͭͷJEཁૉʹ෼͚Δ ....(ུ).... <body> <div id="header"> <p>ϔομʔ</p> </div> <div
id="sidebar"> <p>αΠυόʔ</p> </div> <div id="content"> <p>ϝΠϯίϯςϯπ</p> </div> <div id="footer"> <p>ϑολʔ</p> </div> </body> ....(ུ)....

ํ๏"ɿαΠυόʔͷුಈԽ ‣ ελΠϧγʔτΛ࡞੒ ‣ ·ͣϔομʔͱϑολʔͷελΠϧΛఆٛ͢Δ

ํ๏"ɿαΠυόʔͷුಈԽ ‣ IFBEFSͱGPPUFSʹɺελΠϧΛઃఆ #header { padding: 20px; background: #ccc; }
! #footer { padding: 20px; background: #ccc; }

ํ๏"ɿαΠυόʔͷුಈԽ ‣ αΠυόʔΛුಈԽ͢Δ ‣ qPBUϓϩύςΟΛ࢖༻ ‣ ࠨӈͲͪΒ͔ʹαΠυόʔΛ഑ஔ͢Δ ‣ )5.-ϑΝΠϧ಺Ͱ͸ɺTJEFCBSཁૉ͸ඞͣDPOUFOUཁૉͷલʹͳͯ͘͸ͳΒͳ͍

ํ๏"ɿαΠυόʔͷුಈԽ ‣ TJEFCBSΛුಈԽ͢Δ #header { padding: 20px; background: #ccc; }
! #sidebar { float: right; width: 30%; background: #999; } ! #footer { padding: 20px; background: #ccc; }

ํ๏"ɿαΠυόʔͷුಈԽ

ํ๏"ɿαΠυόʔͷුಈԽ ‣ ·ͩͪΐͬͱม ! ‣ ϝΠϯίϯςϯπ͕αΠυόʔͷԼʹճΓࠐΜͰ͠·͍ͬͯΔ ! ‣ DPOUFOUͷӈଆʹϚʔδϯΛࢦఆ͢Δ͜ͱͰղܾͰ͖Δ ‣
αΠυόʔͷ෯ΑΓ͔ᷮʹ޿͘DPOUFOUӈͷϚʔδϯΛͱΔ͜ͱͰɺίϥϜͷؒʹ༨ നΛੜ੒͢Δ

ํ๏"ɿαΠυόʔͷුಈԽ ‣ ϚʔδϯΛ௥Ճ #header { padding: 20px; background: #ccc; }
! #sidebar { float: right; width: 30%; background: #999; } ! #content{ margin-right: 32%; } ! #footer { padding: 20px; background: #ccc; }

ํ๏"ɿαΠυόʔͷුಈԽ

ํ๏#ɿμϒϧϑϩʔτ ‣ ํ๏"ͷܽ఺ ! ‣ αΠυόʔΛුಈԽ͢Δࡍʹ͸ɺඞͣ)5.-ϑΝΠϧ্Ͱ͸ɺίϯςϯπΑΓલʹه ड़͢Δඞཁ͕͋Δ෦෼ ‣ $44͕࢖༻Ͱ͖ͳ͍؀ڥ ܞଳɺಡΈ্͛ιϑτͷ࢖༻ͳͲ
ͷ৔߹ɺίϯςϯπΑΓ ઌʹϝχϡʔ͕དྷͯ͠·͏ ‣ จॻߏ଄ͱͯ͋͠·Γྑ͘ͳ͍

ํ๏#ɿμϒϧϑϩʔτ ‣ qPBUΛ༻͍ͯɺ͜ͷ໰୊Λղܾ͢Δํ๏ ! ‣ μϒϧϑϩʔτ ‣ ஈ૊ͷࠨӈΛ྆ํͱ΋qPBUଐੑͰුಈԽͤ͞Δ ‣ )5.-ͷॱ൪ʹӨڹ͞Εͣɺࠨӈͷ഑ஔΛίϯτϩʔϧͰ͖Δ

ํ๏#ɿμϒϧϑϩʔτ ‣ αΠυόʔͱϝΠϯίϯςϯπΛೖΕସ͑Δ ....(ུ).... <body> <div id="header"> <p>ϔομʔ</p> </div> <div
id="content"> <p>ϝΠϯίϯςϯπ</p> </div> <div id="sidebar"> <p>αΠυόʔ</p> </div> <div id="footer"> <p>ϑολʔ</p> </div> </body> ....(ུ)....

ํ๏#ɿμϒϧϑϩʔτ ‣ $44ͷมߋ ! ‣ DPOUFOUͷqPBUଐੑΛઃఆɿӈ SJHIU ʹ ‣ DPOUFOUͷ෯Λઃఆ
‣ TJEFCBSͷqPBUଐੑΛઃఆɿӈ SJHIU ʹ ‣ TJEFCBSͷ෯Λઃఆ ‣ GPPUFSͷखલͰίϥϜઃఆΛΫϦΞ͢Δඞཁ͕͋Δ ‣ GPUUFSͷDMFBSଐੑΛઃఆɿCPUI

ํ๏#ɿμϒϧϑϩʔτ #header { padding: 2%; background: #ccc; } ! #content{
float: right; width: 70%; } ! #sidebar { float: right; width: 30%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }

ํ๏#ɿμϒϧϑϩʔτ

ํ๏#ɿμϒϧϑϩʔτ ‣ ͞ΒʹCPEZͷNBSHJOΛʹ͢Δ body { margin:0; } ! #header {
padding: 2%; background: #ccc; } ! #content{ float: right; width: 70%; } ! #sidebar { float: right; width: 30%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }

ํ๏#ɿμϒϧϑϩʔτ ‣ ֤ཁૉͷ༨ന NBSHJO QBEEJOH Λඍௐ੔ body { margin:0; }
! #header { padding: 2%; background: #ccc; } ! #content{ float: right; width: 66%; padding:2%; } ! #sidebar { float: right; width: 26%; padding: 2%; background: #999; } ! #footer { clear: both; padding: 2%; background: #ccc; }

ํ๏#ɿμϒϧϑϩʔτ ‣ Α͏΍͘੔ͬͨϨΠΞ΢τͷϖʔδ͕ग़དྷͨ ‣ ͜ͷํ๏͕ஈ૊ͷجຊ ‣ ͋ͱ͸ɺ͜ͷ૊߹ͤ

CSSレイアウト

CSSレイアウト

More Decks by Atsushi Tadokoro

Other Decks in Technology

Featured

Transcript