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
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.2k
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
150
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
1k
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
9
2.3k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
810
開発 × 生成AI × コミュニケーション:GENDAの開発現場で感じたコミュニケーションの変化 / GENDA Tech Talk #1
genda
0
250
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
380
リリース2ヶ月で収益化した話
kent_code3
1
300
生成AIによるデータサイエンスの変革
taka_aki
0
3k
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
840
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
590
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
1.1k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building Adaptive Systems
keathley
43
2.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
BBQ
matthewcrist
89
9.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Review Best Practice
trishagee
69
19k
How GitHub (no longer) Works
holman
314
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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; }
ํ๏#ɿμϒϧϑϩʔτ
ํ๏#ɿμϒϧϑϩʔτ ‣ Α͏ͬͨ͘ϨΠΞτͷϖʔδ͕ग़དྷͨ ‣ ͜ͷํ๏͕ஈͷجຊ ‣ ͋ͱɺ͜ͷ߹ͤ