Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSレイアウト
Search
Atsushi Tadokoro
May 21, 2014
Technology
0
440
CSSレイアウト
Atsushi Tadokoro
May 21, 2014
Tweet
Share
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.7k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
450
Processing.jsによるデータの可視化と生成的表現
tado
1
1.8k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
370
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.3k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.6k
TumblrでWebサイトを作成
tado
0
720
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.2k
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
440
Windows で省エネ
murachiakira
0
150
AI×Data×SaaS×Operation
sansantech
PRO
0
110
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
580
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
130
API提供者のためのMCPサーバー設計ガイド / MCP Server Design Guide for API Providers
yokawasa
0
240
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
190
Railsアプリケーション開発者のためのブックガイド
takahashim
13
5.3k
PyCon JP 2025 DAY1 「Hello, satellite data! ~Pythonではじめる衛星データ解析~」
ra0kley
0
830
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
670
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
14k
Goを使ってTDDを体験しよう!
chiroruxx
1
240
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
It's Worth the Effort
3n
187
28k
Docker and Python
trallard
46
3.6k
How to Ace a Technical Interview
jacobian
280
23k
Transcript
ܳज़ใԋशσβΠϯ 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ཁૉͰෳͷཁૉΛғΉ͜ͱʹΑͬͯɺҰఆͷൣғʹ·ͱΊͯελΠ ϧΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ ‣ EJWTQBOཁૉɺDMBTTJEʹΑͬͯ$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; }
ํ๏#ɿμϒϧϑϩʔτ
ํ๏#ɿμϒϧϑϩʔτ ‣ Α͏ͬͨ͘ϨΠΞτͷϖʔδ͕ग़དྷͨ ‣ ͜ͷํ๏͕ஈͷجຊ ‣ ͋ͱɺ͜ͷ߹ͤ