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
20250929_QaaS_vol20
mura_shin
0
110
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
120
VCC 2025 Write-up
bata_24
0
140
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.4k
いまさら聞けない ABテスト入門
skmr2348
0
170
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
GopherCon Tour 概略
logica0419
2
160
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
0
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.3k
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
270
Windows で省エネ
murachiakira
0
140
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Statistics for Hackers
jakevdp
799
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Writing Fast Ruby
sferik
629
62k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Fireside Chat
paigeccino
40
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Power of CSS Pseudo Elements
geoffreycrofte
78
6k
Making Projects Easy
brettharned
118
6.4k
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; } Λ಄ʹॻ͍͓ͯ͘ɻ ηϨΫλʹ Λઃఆ͢Δͱɺͯ͢ͷཁૉʹରͯ͠ద༻͞ΕΔɻ