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 - Liquid Layout
Search
Masateru YOSHIMURA
June 26, 2020
Technology
0
2k
CSS - Liquid Layout
Masateru YOSHIMURA
June 26, 2020
Tweet
Share
More Decks by Masateru YOSHIMURA
See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
370
Digital Design 2022-01
mathatelle
0
270
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
150
Multiple pages
mathatelle
0
700
How to design the individual page
mathatelle
1
100
CodePen: Making your portfolio 2021
mathatelle
0
150
single page
mathatelle
0
880
How to optimize images for Better Web Design
mathatelle
0
2.1k
Other Decks in Technology
See All in Technology
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
Operating Operator
shhnjk
1
590
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
ゼロからはじめる採用広報
yutadayo
3
960
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Producing Creativity
orderedlist
PRO
346
40k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Raft: Consensus for Rubyists
vanstee
140
7k
Become a Pro
speakerdeck
PRO
29
5.4k
Automating Front-end Workflow
addyosmani
1370
200k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Adaptive Systems
keathley
43
2.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Transcript
ͰϨΠΞτ͢Δ
෯ͷϘοΫεΛฒΔˠը໘෯ʹ߹ΘͤͨϨΠΞτͰ͖Δ ϘοΫεʹରͯ͠෯Λࢦఆ͢Δ ฒΔࢦఆΛ͢Δ ࠷ॳʹରͯ͠ͷ෯ʹͳ͍ͬͯΔ ʹରͯ͠෯Λʢʣʹઃఆ͔ͯ͠Β ฒΔͱɺߦ͋ͨΓͭͣͭฒͿɻ ͜ͷߟ͑ํΛԠ༻͢Εɺ ͭͭͣͭฒΔ͜ͱͰ͖ΔɻͬͯΈΑ͏ɻ w50p width
: 50%; tab w100p ͞Βʹը૾ʹ ͦͷʹରͯ͠ ͽͬͨΓʢʣͷ ෯ʹઃఆ͢Δ ࣈͷޙʹQΛ͚Δͱʹల։͞ΕΔ
)5.-ͷࢠͷؔΛཧղ͠Α͏ JNH͔ΒݟͯɺJUFNʹ͋ͨΔɻ ʮࢠΛแΉʯͱ֮͑Α͏ɻ .item img .item img width: 100%; ʹͽͬͨΓ߹ΘͤΔʹ
෯Λʹઃఆ͢Δɻ EJWDMBTTJUFN JNHTSDlIUUQT QOHzBMU EJW
ฒͨͷʹNBSHJOΛ͚ͭΔ ߹Θͤͯʹ͢Δͱ ϐολϦऩ·Δ .items width: 50%; .item .item width: 50%;
.items ༨നΛ ͚ͭΔ width: 48%; .item width: 48%; .item margin: 1%; 1 + 48 + 1 + 1 + 48 + 1 100 ༨നΛؚΊͯ߹ΘͤͯʹͳΔΑ͏ʹ͢Δ
ฒͨͷʹCPSEFSͱQBEEJOH༨നΛ͚ͭΔͱ͖ʹ͓ͬͯ͘͜ͱ box-sizing : content-box; box-sizing : border-box; σϑΥϧτͪ͜Β ͪ͜Βʹมߋ͢ΔͨΊͷઃఆΛ͢Δ .items
width: 50%; .item .items width: 50%; .item .item ίϯςϯπͷʹՃ͑ͯɺ QBEEJOHCPSEFSͷ͕૿͑ΔͨΊΈग़ͯ͠͠·͏ɻ width: 50%; .item QBEEJOHCPSEFSࠐͰʹͯ͘͠ΕΔΑ͏ʹͳΔɻ Έग़͢ͱ ஈམͪ͢Δɻ
ৗʹCPYTJ[JOHCPSEFSCPYΛઃఆ͓ͯ͜͠͏ * { box-sizing: border-box; } Λ಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺͯ͢ͷཁૉʹରͯ͠ద༻͞ΕΔɻ