かるくCalc()

CSS Calc() なににつかえんの？っていうのを調べてまとめ

Demo
01 https://thleap.github.io/test/css-calc/demo01.html
02 https://thleap.github.io/test/css-calc/demo02.html
03 https://thleap.github.io/test/css-calc/demo03.html
04 https://thleap.github.io/test/css-calc/demo04.html
05 https://thleap.github.io/test/css-calc/demo05.html

Transcript

1. ͔Δ͘$BMD $44
   ͷ࿩
2. .container { width: 800px; } .container > .banner { width: calc(100% - 80px); /* 720px */ … }
3. ͔ͭ͏ͱศར
4. .demo01-content { overflow: auto; height: calc(100vh - 3em); /* <- */ … } .demo01-footer { height: 3em; … } Մม͢Δཁૉ
   
   ݻఆ͞Εͨཁૉᶃ %FNP
5. Մม͢Δཁૉ
   
   ݻఆ͞Εͨཁૉᶄ .demo02-content-main { float: left; width: calc((100% - 10em) - 1em); /* <- */ } .demo02-content-sidebar { float: right; width: 10em; } %FNP
6. എܠը૾ͷࡉ͔ͳҐஔௐ੔ .demo03-content { padding-left: calc(50% + 1.2em); background-position: calc(50% - 1.6em) calc(50% - 1em); /* <- */ … } %FNP
7. ཁૉͷத৺Λج఺ʹ࠲ඪࢦఆ .demo04-content { position: absolute; top: calc(50% - 5em); /* <- */ left: calc(50% - 5em); /* <- */ … } %FNP
8. ߦؒΛߟ͑ͨ༨ന .demo05-content { font-size: 1em; line-height: 1.5; padding: calc(2em - (1em * 1.5 - 1em) / 2) 2em; /* <- */ … } %FNP
9. ·ͱΊ
10. ܭࢉ͕ࣜ࢒ΔͷͰɺ஋ͷҙਤ͕Θ͔Γ΍͍͢
 ex) li { width: calc(100%/3); }
    ਺ϐΫηϧ୯ҐͰͷࡉ͔ͳσβΠϯௐ੔͕Ͱ͖Δ
 ex) div { background-position: calc(50% - 2em) center; }