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
Railsアプリケーション開発者のためのブックガイド
takahashim
13
5.3k
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.6k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
310
AWSのProductのLifecycleについて
stknohg
PRO
0
300
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
150
What is BigQuery?
aizack_harks
0
120
タスクって今どうなってるの?3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
jrfk
1
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
BirdCLEF+2025 Noir 5位解法紹介
myso
0
170
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
410
Trust as Infrastructure
bcantrill
0
230
20250929_QaaS_vol20
mura_shin
0
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cost Of JavaScript in 2023
addyosmani
53
9k
GitHub's CSS Performance
jonrohan
1032
460k
Done Done
chrislema
185
16k
The Language of Interfaces
destraynor
162
25k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Facilitating Awesome Meetings
lara
56
6.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building an army of robots
kneath
306
46k
For a Future-Friendly Web
brad_frost
180
9.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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; }
ํ๏#ɿμϒϧϑϩʔτ
ํ๏#ɿμϒϧϑϩʔτ ‣ Α͏ͬͨ͘ϨΠΞτͷϖʔδ͕ग़དྷͨ ‣ ͜ͷํ๏͕ஈͷجຊ ‣ ͋ͱɺ͜ͷ߹ͤ