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
430
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
420
Processing.jsによるデータの可視化と生成的表現
tado
1
1.7k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
340
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.3k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.5k
TumblrでWebサイトを作成
tado
0
690
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2.1k
Other Decks in Technology
See All in Technology
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
強いチームと開発生産性
onk
PRO
35
11k
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
420
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
200
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
150
日経電子版のStoreKit2フルリニューアル
shimastripe
1
140
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
BBQ
matthewcrist
85
9.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Become a Pro
speakerdeck
PRO
25
5k
Optimizing for Happiness
mojombo
376
70k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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; }
ํ๏#ɿμϒϧϑϩʔτ
ํ๏#ɿμϒϧϑϩʔτ ‣ Α͏ͬͨ͘ϨΠΞτͷϖʔδ͕ग़དྷͨ ‣ ͜ͷํ๏͕ஈͷجຊ ‣ ͋ͱɺ͜ͷ߹ͤ