見å‡ŗ恗ē”»åƒ

šŸ“ć”悃悓ćØä½æć„åˆ†ć‘ć¦ć‚‹ļ¼ŸCSS恮px, em, rem, %, vwå˜ä½ć®é•ć„

HTML悄CSSć‚’å­¦ć³ćŸć¦ć®é ƒćÆćØ悊恂恈恚pxå˜ä½ć§ęŒ‡å®šć™ć‚‹ć“ćØćŒå¤šć„ćØę€ć„ć¾ć™ć€‚ćć®å¾Œć€em悄remćŖć©ć„ć‚ć‚“ćŖå˜ä½ćŒå‡ŗć¦ćć¦ę··ä¹±ć™ć‚‹ć“ćØć‚‚ć‚ć‚‹ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ć€‚

ćć‚Œćžć‚Œć®å˜ä½ć«ćÆ惔ćƒŖ惃惈ćØćƒ‡ćƒ”ćƒŖ惃惈恌恂悊态ćŖćœćć®å˜ä½ć‚’ä½æć†ć®ć‹ć‚’ć—ć£ć‹ć‚ŠćØē†č§£ć—恦ä½æć„åˆ†ć‘ć‚‹åæ…č¦ćŒć‚ć‚Šć¾ć™ć€‚

å˜ä½ć®å®šē¾©

CSS恫ćÆå¤šćć®å˜ä½ćŒå­˜åœØć—ć¾ć™ć€‚ć“ć“ć§ćÆć€å®Ÿéš›ć«ä½æ恆恓ćØć®å¤šć„å˜ä½ć«ć¤ć„ć¦č©³ć—ććæć¦ć„ćć¾ć™ć€‚

px単位

ćƒ‡ćƒć‚¤ć‚¹ć®1惉惃惈悒č”Ø恙ēµ¶åƾēš„ćŖå€¤ć§ć™ć€‚ćŸć ć—ć€ćƒ—ćƒŖćƒ³ć‚æćƒ¼ć‚„ć‚¹ćƒžćƒ›ćŖć©ć®é«˜č§£åƒåŗ¦ćƒ‡ćƒć‚¤ć‚¹ć§ćÆ1pxå†…ć«č¤‡ę•°ć®ćƒ‰ćƒƒćƒˆć‚’å«ć‚€å “åˆćŒć‚ć‚Šć¾ć™ć€‚

ē¾åœØć€ć»ć¼ć™ć¹ć¦ć®ćƒ–ćƒ©ć‚¦ć‚¶ć§å°ę•°ē‚¹px悒č”Ø恙恓ćØćŒć§ćć¾ć™ćŒć€borderćŖ恩äø€éƒØćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć§ćÆå°ę•°ē‚¹px悒čØ±å®¹ć—ćŖć„ä»•ę§˜ć‚‚ć‚ć‚Šć¾ć™ć€‚

em単位

ćć®č¦ē“ č‡Ŗčŗ«ć®font-sizeå€¤ć‚’åŸŗęŗ–ćØ恗恦ē›øåƾēš„ćŖ値ćØćŖć‚Šć¾ć™ć€‚ćŸćØ恈恰态paddingćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«ęŒ‡å®šć—ćŸå “åˆć‚’č€ƒćˆć¦ćæć¾ć—ć‚‡ć†ć€‚

<html>
<body>

<div class="parent">
  <div class="child">...</div>
</div>

</body>
</html>
.parent {
  padding: 2em;
}
.child {
  padding: .5em;
}

ć¾ćšć€.parent要ē“ ć®font-sizeå€¤ć‚’ę±‚ć‚ć¾ć™ćŒć€.parent要ē“ ć«ćÆfont-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ćŖ恄恮恧态恕悉恫äøŠä½ć®body要ē“ ć‚’見恦ćæć¾ć™ć€‚ć—ć‹ć—ć€body要ē“ ć«ć‚‚font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ćŖ恄恟悁态ēµęžœēš„恫html要ē“ ć®font-sizeå€¤ćŒåŸŗęŗ–ćØćŖć‚Šć¾ć™ć€‚

ć¤ć¾ć‚Šć€em単位ćÆćć®č¦ē“ č‡Ŗčŗ«ćØč¦Ŗ要ē“ ć‚’ć•ć‹ć®ć¼ć£ć¦font-sizeå€¤ć‚’ē¶™ę‰æ恙悋ćØ恄恆恓ćØ恧恙恭怂

html要ē“ ć®font-size値ćÆćƒ‡ćƒ•ć‚©ćƒ«ćƒˆć§ćÆ16px恧恙怂恔ćŖćæć«ć€ćƒ¦ćƒ¼ć‚¶ćƒ¼ćÆćƒ–ćƒ©ć‚¦ć‚¶ć®čØ­å®šć‹ć‚‰ę–‡å­—ć‚µć‚¤ć‚ŗć‚’ć„ć¤ć§ć‚‚å¤‰ę›“ć§ćć¾ć™ć€‚ćƒ‡ćƒ•ć‚©ćƒ«ćƒˆć®ēŠ¶ę…‹ć®å “åˆć€.parent要ē“ ćÆ16px悒åŸŗęŗ–ćØ恗恦恄悋恮恧态

16 Ɨ 2 = 32px

恌padding値ćØćŖć‚Šć¾ć™ć€‚

åŒć˜ć‚ˆć†ć«.child要ē“ ć‚‚ć•ć‹ć®ć¼ć£ć¦ć„ććØ态html要ē“ ć¾ć§font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ćŖ恄恮恧态html要ē“ ć®16px恌åŸŗęŗ–値ćØćŖć‚Šć¾ć™ć€‚ć‚ˆć£ć¦ć€

16 Ɨ 0.5 = 8px

恌.child要ē“ ć®paddingå€¤ć«ćŖć‚Šć¾ć™ć€‚

ć“ć“ć¾ć§ćÆ态ęÆ”č¼ƒēš„ć‚ć‹ć‚Šć‚„ć™ć„ć§ć™ćŒć€ćć®č¦ē“ č‡Ŗčŗ«ć«font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ć‚‹ćØ複雑恫ćŖć£ć¦ćć¾ć™ć€‚

body {
  font-size: 1.125em;
}
.parent {
  padding: 2em;
  font-size: 1.5em;
}
.child {
  padding: .5em;
}

åŒć˜ć‚ˆć†ć«.parent要ē“ ć‹ć‚‰č€ƒćˆć¦ćæć¾ć—ć‚‡ć†ć€‚ä»Šå›žćÆ.parent要ē“ č‡Ŗčŗ«ć«font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćØ恗恦1.5emćŒęŒ‡å®šć•ć‚Œć¦ć„ć¾ć™ć€‚1.5emč‡Ŗä½“ć‚‚ē›øåƾēš„ćŖå€¤ć®ćŸć‚ć€ć‚ˆć‚ŠäøŠä½ć®č¦ē“ ć‹ć‚‰ē¶™ę‰æć•ć‚Œć¦ć„ć‚‹åÆčƒ½ę€§ćŒć‚ć‚Šć¾ć™ć€‚

恝恓恧态äøŠä½ć®body要ē“ ć‚’ćæ恦ćæ悋ćØ态font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«1.125emćŒęŒ‡å®šć•ć‚Œć¦ć„ć¾ć™ć€‚ć“ć‚Œć‚ˆć‚ŠäøŠä½ć®č¦ē“ ćÆhtml要ē“ ćŖć®ć§ćƒ–ćƒ©ć‚¦ć‚¶ć®ćƒ‡ćƒ•ć‚©ćƒ«ćƒˆę–‡å­—ć‚µć‚¤ć‚ŗ恧恂悋16px恌åŸŗęŗ–ćØćŖć‚Šć¾ć™ć€‚

ć‚ˆć£ć¦ć€.parent要ē“ ć®font-sizećÆ态

16 Ɨ 1.125 Ɨ 1.5 = 27px

ćØćŖć‚Šć¾ć™ć€‚ćŖ恮恧态

27 Ɨ 2 = ā€‹54px

恌paddingćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć®2em恮č؈ē®—値ćØćŖć‚Šć¾ć™ć€‚

ćć—ć¦ć€.child要ē“ č‡Ŗčŗ«ć«ćÆfont-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ćŖ恄恮恧态č¦Ŗ恮.parent要ē“ ć®font-sizeå€¤ćŒåŸŗęŗ–ćØćŖć‚Šć¾ć™ć€‚.parent要ē“ ć®font-size値ćÆå…ˆć»ć©ę±‚ć‚ćŸ27px恧恙怂

27 Ɨ 0.5 = 13.5px

ć‚ˆć£ć¦ć€13.5px恌.child要ē“ ć®padding値ćØćŖć‚Šć¾ć™ć€‚

ćÆ恘悁ćÆęˆøęƒ‘ć†ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ćŒć€ę…£ć‚Œć¦ć—ć¾ćˆć°ć“ć®ę€§č³ŖćŒé€†ć«ć‚ć‚ŠćŒćŸć„ć‚‚ć®ćØćŖć£ć¦ć„ćć¾ć™ć€‚

rem単位

ćƒ«ćƒ¼ćƒˆč¦ē“ ļ¼ˆé€šåøøćÆhtml要ē“ ļ¼‰ć®font-sizeå€¤ć‚’åŸŗęŗ–ćØ恗恦ē›øåƾēš„ćŖ値ćØćŖć‚Šć¾ć™ć€‚

body {
  font-size: 1.125em;
}
.parent {
  padding: 2rem;
  font-size: 1.5em;
}
.child {
  padding: .5rem;
}

ćƒ–ćƒ©ć‚¦ć‚¶ć®ćƒ‡ćƒ•ć‚©ćƒ«ćƒˆę–‡å­—ć‚µć‚¤ć‚ŗćÆ16pxćŖ恮恧.parent要ē“ ć®padding値ćÆ态

16 Ɨ 2 = 32px

恧态.child要ē“ ć®padding値ćÆ态

16 Ɨ 0.5 = 8px

ćØćŖć‚Šć¾ć™ć€‚font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŒęŒ‡å®šć•ć‚Œć¦ć„ć‚‹ć‹ć©ć†ć‹ćÆć¾ć£ćŸćå½±éŸæć—ć¾ć›ć‚“ć€‚ć¤ć¾ć‚Šć€rem単位ćÆåøø恫html要ē“ ć®font-sizeå€¤ć‚’åŸŗęŗ–ćØ恙悋恟悁态emå˜ä½ć®ć‚ˆć†ć«č¦ē“ ćŒå…„ć‚Œå­ć«ćŖć£ć¦ć„ć¦ć‚‚é–¢äæ‚ć‚ć‚Šć¾ć›ć‚“ć€‚

%単位

ē›øåƾēš„ćŖ値ćØćŖć‚Šć¾ć™ćŒć€ćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«ć‚ˆć£ć¦ä½•ćŒåŸŗęŗ–恫ćŖć‚‹ć‹ćŒå¤‰ć‚ć£ć¦ćć¾ć™ć€‚

恟ćØ恈恰态width悄margin态paddingćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŖ悉č¦Ŗ要ē“ ć®ęØŖå¹…ć«åÆ¾ć™ć‚‹å‰²åˆć€heightćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŖ悉č¦Ŗ要ē“ ć®é«˜ć•ć«åÆ¾ć™ć‚‹å‰²åˆć€font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŖ悉č¦Ŗ要ē“ ć®ę–‡å­—悵悤ć‚ŗ恫åÆ¾ć™ć‚‹å‰²åˆćØćŖć‚Šć¾ć™ć€‚

font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«é–¢ć—ć¦ćÆem単位ćØåŒć˜ć§ć™ć­ć€‚

ćŖ恮恧态%å˜ä½ć‚’ä½æć†å “åˆćÆä½•ć‚’åŸŗęŗ–ćØć—ć¦ć„ć‚‹ć‹ć‚’ćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć”ćØ恫ē¢ŗčŖć—ć¦ćŠććØ安åæƒć§ć™ć€‚

vw単位

ćƒ–ćƒ©ć‚¦ć‚¶ć®ęØŖå¹…ć«åÆ¾ć™ć‚‹ē›øåƾēš„ćŖ値ćØćŖ悊态1vwćÆćƒ–ćƒ©ć‚¦ć‚¶ć®ęØŖå¹…ć®1%恫ē›øå½“ć—ć¾ć™ć€‚

恟ćØćˆć°ć€ćƒ–ćƒ©ć‚¦ć‚¶å¹…ćŒ1200px恮ćØ恍1vwćÆ12pxć€ćƒ–ćƒ©ć‚¦ć‚¶å¹…ćŒ768px恮ćØ恍1vwćÆ7.68px悒č”Ø恙恓ćØ恫ćŖć‚Šć¾ć™ć€‚

恟恠态å…Ø体ēš„ćŖćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆćŖ恩恫vwå˜ä½ć‚’ä½æ恆ćØę„å›³ć—ćŖć„ä½™ē™½ćŒē”Ÿć¾ć‚Œć‚‹ć“ćØćŒć‚ć‚Šć¾ć™ć€‚vw単位ćÆć‚¹ć‚Æćƒ­ćƒ¼ćƒ«ćƒćƒ¼ć®å¹…ć‚’å«ć‚€ä»•ę§˜ć®ćŸć‚ć€width: 100vw;ć‚’ęŒ‡å®šć™ć‚‹ćØć‚¹ć‚Æćƒ­ćƒ¼ćƒ«ćƒćƒ¼ć®å¹…åˆ†ć€ęØŖć‚¹ć‚Æćƒ­ćƒ¼ćƒ«ćŒē™ŗē”Ÿć—ć¾ć™ć€‚

ćŖ恮恧态å…Ø体ēš„ćŖćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć«ćÆ%å˜ä½ć®ć»ć†ćŒé©ć—ć¦ć„ć‚‹ćØć„ćˆć¾ć™ć€‚

恗恋恗态%単位ćÆåøø恫č¦Ŗ要ē“ ć«ä¾å­˜ć™ć‚‹ćŸć‚ć€ćƒ–ćƒ©ć‚¦ć‚¶å¹…ć‚’åŸŗęŗ–ćØć—ćŸć„å “åˆć«ćÆä½æ恈ćŖć„ć®ć§ć€ćć®ē‚¹ä¾æåˆ©ć§ć™ć­ć€‚

ć¤ć¾ć‚Šć€vw単位ćØ%単位ćÆ态rem単位ćØemå˜ä½ć®é–¢äæ‚ꀧćØć»ć¼åŒć˜ć§ć™ć€‚

å˜ä½ć®ä½æć„åˆ†ć‘

č‰²ć€…ćŖWebć‚µć‚¤ćƒˆć‚’čŖæęŸ»ć—ćŸēµęžœć€å¤§ććåˆ†ć‘恦仄äø‹ć®3ć¤ć«åˆ†ć‘ć‚‰ć‚Œć‚‹ćØč€ƒćˆć¾ć—ćŸć€‚ćŸć ć—ć€%悄vw単位ćÆć©ć®ę“¾ć§ć‚‚ćƒ¬ć‚¹ćƒćƒ³ć‚·ćƒ–åƾåæœć§ć‚ˆćä½æć†ć®ć§é™¤å¤–ć—ć¦ć„ć¾ć™ć€‚

pxå˜ä½ć‚’ē”Øć„ć‚‹ę“¾

ć™ć¹ć¦ć®CSS悒pxå˜ä½ć§ęŒ‡å®šć™ć‚‹å “åˆć§ć™ć€‚

ć™ć¹ć¦pxå˜ä½ć§ęŒ‡å®šć™ć‚‹ćØćƒ–ćƒ©ć‚¦ć‚¶ć®čØ­å®šć‹ć‚‰ę–‡å­—ć‚µć‚¤ć‚ŗć‚’å¤‰ę›“ć—ć¦ć‚‚äø€åˆ‡åę˜ ć•ć‚ŒćŖ恄恓ćØ恫ćŖć£ć¦ć—ć¾ć„ć¾ć™ć€‚

åƒ•ć‚‚ē”Ÿć¾ć‚Œć¤ćē›®ćŒć‚ˆććÆćŖć„ć®ć§ć™ćŒć€ę™®ę®µmacOS悒ä½æć£ć¦ć„ć‚‹ćŸć‚ć€å­—ćŒč¦‹ć„ć‚‰ć„ćŖćØę€ć£ćŸć‚‰2ęœ¬ęŒ‡ć§ć‚ŗćƒ¼ćƒ ć™ć‚Œć°å„½ććŖéƒØåˆ†ć‚’ę‹”å¤§ć§ćć¾ć™ć€‚

ē”»åƒ4

ć“ć®ćŠć‹ć’ć§ćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć‚’å¤‰ćˆć‚‹ć“ćØćÆćŖć„ć®ć§ć™ćŒć€Windows恫ćÆć“ć®ę©Ÿčƒ½ćŒćŖ恄恮恧态悂恗Windows悒ꙮꮵä½æć„ć—ć¦ć„ćŸć‚‰ćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć§ćƒ™ćƒ¼ć‚¹ć®ę–‡å­—ć‚µć‚¤ć‚ŗć‚’å¤§ććć—ć¤ć¤ć€ę‹”å¤§ēŽ‡ć§Webć‚µć‚¤ćƒˆć«ć‚ˆć£ć¦å¾®čŖæꕓ恙悋ćØę€ć„ć¾ć™ć€‚

恔ćŖćæ恫Windowsć«ć‚‚ę‹”å¤§é”ćØć„ć†ę©Ÿčƒ½ćŒć‚ć£ć¦ä½æć£ć¦ćæćŸć®ć§ć™ćŒć€ä½æć„ć„ć‚‰ćć¦ä½æ恆갗恫ćŖć‚Šć¾ć›ć‚“ć§ć—ćŸć€‚ć‚„ćÆć‚Šć€ćƒˆćƒ©ćƒƒć‚Æćƒ‘ćƒƒćƒ‰ć®ć‚øć‚§ć‚¹ćƒćƒ£ć«ćÆę•µć„ć¾ć›ć‚“ć€‚

ćŖ恮恧态pxå˜ä½ć‚’ć™ć¹ć¦ć«ē”Ø恄悋ćØć‚¢ć‚Æć‚»ć‚·ćƒ“ćƒŖćƒ†ć‚£ć‚’ē„”č¦–ć—ć¦ć—ć¾ć†åÆčƒ½ę€§ćŒć‚ć‚Šć¾ć™ć€‚

äø€éƒØem悄remå˜ä½ć‚’ē”Øć„ć‚‹ę“¾

äø»ć«ć€font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«em悄rem単位ćØć„ć£ćŸē›øåƾēš„ćŖå€¤ć‚’ęŒ‡å®šć™ć‚‹å “åˆć§ć™ć€‚

font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«ē›øåƾēš„ćŖå€¤ć‚’ęŒ‡å®šć—ć¦ćŠććØć€ćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šćŒå¤‰ę›“ć•ć‚ŒćŸéš›ć«ć”ć‚ƒć‚“ćØåę˜ ć•ć‚Œć¾ć™ć€‚

恟ćØ恈恰态font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ä»„å¤–ćÆć™ć¹ć¦pxå˜ä½ć§ęŒ‡å®šć™ć‚‹å “åˆć‚’č€ƒćˆć¦ćæć¾ć—ć‚‡ć†ć€‚

ē”»åƒ1

ćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć§ę–‡å­—ć‚’å¤§ććć™ć‚‹ćØ态ē›øåƾēš„ćŖå€¤ć§ęŒ‡å®šć•ć‚ŒćŸfont-sizeć ć‘å¤§ćććŖ悊态ēµ¶åƾēš„ćŖå€¤ć§ęŒ‡å®šć•ć‚ŒćŸćć®ä»–ć®č¦ē“ ćÆćć®ć¾ć¾ć«ćŖć‚Šć¾ć™ć€‚

ć¤ć¾ć‚Šć€å…Ø体ēš„ćŖćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆćÆćć®ć¾ć¾ć§ć€č¦ē“ å†…ć®ę–‡å­—ć‚µć‚¤ć‚ŗć ć‘å¤§ćććŖć‚Šć¾ć™ć€‚

em悄remå˜ä½ć‚’ē”Øć„ć‚‹ę“¾

ꬔ恫态border-widthćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ćŖć©ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šćŒå¤‰ć‚ć£ć¦ć‚‚å¤‰åŒ–ć•ć›ćŸććŖ恄悂恮恫ćÆpxå˜ä½ć‚’ä½æć„ć€ćć‚Œä»„å¤–ćÆem悄rem単位ćŖ恩恮ē›øåƾēš„ćŖå€¤ć‚’ä½æć†å “åˆć‚’č€ƒćˆć¦ćæć¾ć—ć‚‡ć†ć€‚

ē”»åƒ2

å…ˆć»ć©ć®ä¾‹ćØ違恆ē‚¹ćÆć€ę–‡å­—ć‚µć‚¤ć‚ŗćØć„ć£ć—ć‚‡ć«ä½™ē™½ć‚‚ęÆ”ä¾‹ć—ć¦åŗƒćŒć£ć¦ć„ć‚‹ćØ恓悍恧恙怂

å…Ø体ēš„ćŖćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆćØćƒ‡ć‚¶ć‚¤ćƒ³ć®ęƔēŽ‡ć‚’ē¶­ęŒć—ć¤ć¤ć€ę–‡å­—ć‚µć‚¤ć‚ŗć‚’å¤‰åŒ–ć•ć›ć‚‰ć‚Œć¾ć™ć€‚

ćƒ”ćƒ‡ć‚£ć‚¢ć‚Æć‚ØćƒŖć®å˜ä½ć«ć‚‚ē›øåƾēš„ćŖå€¤ć‚’ä½æć£ć¦ć„ć‚Œć°ć€ę–‡å­—ć‚µć‚¤ć‚ŗćŒå¤§ćććŖ悌恰ćŖć‚‹ć»ć©ć€ć‚¹ćƒžćƒ›ć®ćƒ‡ć‚¶ć‚¤ćƒ³ć«čæ‘ć„ć„ć¦ć„ćć¾ć™ć€‚ć“ć‚ŒćÆć€ćƒ–ćƒ©ć‚¦ć‚¶ć®ę‹”å¤§ēŽ‡ć‚’ć‚ć’ć‚‹å “合ćØåŒć˜ęŒ™å‹•ć«ćŖć‚Šć¾ć™ć€‚

ć“ć®ć‚ˆć†ć«ć€ēµ¶åƾēš„ćŖ値ćØē›øåƾēš„ćŖå€¤ć‚’ć©ć“ć«ä½æć†ć‹ć§å¤§ććęŒ™å‹•ćŒå¤‰ć‚ć£ć¦ćć¾ć™ć€‚

個äŗŗēš„ćŖč¦‹č§£

åƒ•ć®ę„č¦‹ć§ć™ćŒć€ć€Œpxå˜ä½ć‚’ē”Øć„ć‚‹ę“¾ć€ćÆć‚¢ć‚Æć‚»ć‚·ćƒ“ćƒŖćƒ†ć‚£ć®č¦³ē‚¹ć‹ć‚‰ć¾ćšćŖ恄ćØę€ć£ć¦ć„ć¾ć™ć€‚

ćć—ć¦ć€ć€Œäø€éƒØem悄remå˜ä½ć‚’ä½æć†ę“¾ć€ćØ怌em悄remå˜ä½ć‚’ä½æć†ę“¾ć€ć«ć¤ć„ć¦ćÆ開ē™ŗč€…ć®ę„å›³ć‚„ćƒ¦ćƒ¼ć‚¶å±¤ć«ć‚ˆć£ć¦å¤‰ć‚ć‚‹ćŸć‚ć€ć©ć”ć‚‰ć‚’ęŽØå„Øć™ć‚‹ć‹ć¾ć§ćÆčØ€ć„åˆ‡ć‚Œć¾ć›ć‚“ć€‚

恟恠态怌em悄remå˜ä½ć‚’ä½æć†ę“¾ć€ćÆę‹”å¤§ēŽ‡ć‚’ę‹”大ēø®å°ć—ćŸå “合ćØę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć‚’å¤‰ę›“ć—ćŸå “åˆć§å‹•ä½œćŒć¾ć£ćŸćåŒć˜ć«ćŖć‚Šć¾ć™ć€‚ć“ć‚Œć§ćÆ态2ć¤ć®ę©Ÿčƒ½ć‚’å·®åˆ„åŒ–ć™ć‚‹ć“ćØćÆć§ćć¾ć›ć‚“ć€‚

äø€ę–¹ć§ć€ę–‡å­—悵悤ć‚ŗčح定ćÆé »ē¹ć«å¤‰ę›“恙悋悂恮恧ćÆćŖćć€ć‚ćć¾ć§ćƒ™ćƒ¼ć‚¹ćØćŖć‚‹ę–‡å­—ć‚µć‚¤ć‚ŗ悒čØ­å®šć—ć¦ćŠććŸć‚ć®ć‚‚ć®ć ćØć‚‚č€ƒćˆć‚‰ć‚Œć¾ć™ć€‚

ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć®å¤‰ę›“ćÆę‹”å¤§ēŽ‡ć®ć‚ˆć†ć«ę‰‹č»½ć«å¤‰ę›“ć§ćć‚‹ć‚ˆć†ć«ćÆćŖć£ć¦ć„ćŖ恄恟悁恧恙怂

恙悋ćØć€ć™ć§ć«ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć‚’å¤‰ę›“ć—ć¦ć„ć‚‹äŗŗć‹ć‚‰ć™ć‚Œć°ć€åˆć‚ć¦čØŖå•ć—ćŸćØććŒćć®Webć‚µć‚¤ćƒˆęœ¬ę„ć®å§æćØćŖć‚Šć¾ć™ć€‚ćć†ć„ć£ćŸå “åˆćÆé€†ć«ć€ćƒ¬ć‚¹ćƒćƒ³ć‚·ćƒ–ć®ć‚¹ćƒžćƒ›ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć«čæ‘ć„ć„ć¦ć„ć£ćŸę–¹ćŒę–‡å­—ć‚µć‚¤ć‚ŗćØćØć‚‚ć«ä½™ē™½ć‚„ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆćŒčŖæę•“ć•ć‚Œć¦č¦‹ć‚„ć™ć„ćØę€ć‚ć‚Œć¾ć™ć€‚

余ē™½ć‚‚åÆčŖ­ę€§ć«å°‘ćŖć‹ć‚‰ćšé–¢ć‚ć£ć¦ć„ć‚‹ćØ考恈悉悌悋恋悉恧恙怂

仄äøŠć‚’ćµć¾ćˆć€åƒ•ćŖć‚Šć®č€ƒćˆćØ恗恦ćÆ态

ćƒ”ćƒ‡ć‚£ć‚¢ć‚Æć‚ØćƒŖ ā†’ em
font-size ā†’ em / rem
borderćŖ恩åøøć«č¦‹ćŸē›®ćŒå¤‰ć‚ć‚‰ćŖ恄 ā†’ px
ćć‚Œä»„å¤– ā†’ em / rem

ćØćŖć‚Šć¾ć™ć€‚

åƒ•ć‚‚ä»„å‰ćÆ怌äø€éƒØem悄remå˜ä½ć‚’ä½æć†ę“¾ć€ć ć£ćŸć®ć§ć™ćŒć€ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć«ć‚ˆć£ć¦ćÆč¦‹ć„ć‚‰ććŖ悋恓ćØćŒć‚ć£ć¦ē¾åœØćÆ怌em悄remå˜ä½ć‚’ä½æć†ę“¾ć€ć§ć™ć€‚

ē”»åƒ4

äø€ä¾‹ćØ恗恦态3åˆ†å‰²ć•ć‚ŒćŸćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć§ę–‡å­—ć‚µć‚¤ć‚ŗć ć‘ćŒå¤§ćććŖ悋ćØ态1č”Œć‚ćŸć‚Šć®ę–‡å­—ę•°ćŒęø›ć‚Šć€ēø¦ć«é•·ććŖć£ć¦ć—ć¾ć„ć¾ć™ć€‚

emćØremå˜ä½ć®ä½æć„åˆ†ć‘ć«é–¢ć—ć¦ćÆē¾åœØ恮要ē“ ć‚„ē„–å…ˆč¦ē“ ć®font-sizeęŒ‡å®šć«ć‚ˆć£ć¦å½±éŸæ恕悌恟恏ćŖ恄悂恮恫ćÆremå˜ä½ć€ćć‚Œä»„å¤–ćÆem単位ćØ恙悌恰悈恄恧恙怂

恟ćØ恈恰态惜ć‚æćƒ³å‘Øć‚Šć®ä½™ē™½ćÆę–‡å­—ć‚µć‚¤ć‚ŗ恫åæœć˜ć¦å¤‰åŒ–恗恦恻恗恄恮恧emå˜ä½ć€ć‚µć‚¤ćƒˆå…Øä½“ć®ęØŖå¹…ć‚’ę±ŗć‚ć‚‹ć‚³ćƒ³ćƒ†ćƒŠć§ćÆrem単位ćØć„ć£ćŸć‚ˆć†ć«ä½æć„åˆ†ć‘ć¾ć™ć€‚

ć‚ćć¾ć§ā€å€‹äŗŗēš„ę„č¦‹ā€ćŖć®ć§ć€ć©ć®ć‚ˆć†ć«ä½æć„åˆ†ć‘ć‚‹ć‹ćÆč‡Ŗē”±ć§ć™ć€‚

恕恄恔恫态font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«vwå˜ä½ć‚’ē”Ø恄悋恮ćÆć‚„ć‚ćŸć»ć†ćŒć‚ˆć„ć§ć™ć€‚vw単位ćÆåøøć«ćƒ–ćƒ©ć‚¦ć‚¶ć®ęØŖå¹…ć‚’åŸŗęŗ–ćØć—ć€ćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčØ­å®šć‚’å¤‰ćˆć¦ć‚‚åę˜ ć•ć‚ŒćŖ恄恟悁恧恙怂

font-sizećƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«vwå˜ä½ć‚’ä½æć†å “åˆćÆ态calc()é–¢ę•°ć‚’ä½æć£ć¦em悄rem単位ćŖ恩恮ē›øåƾēš„ćŖ値ćØēµ„ćæåˆć‚ć›ć¾ć™ć€‚

恓悌恧态ē›“ę„Ÿć«åć—ć¦ć—ć¾ć†ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ćŒć€äø€åæœćƒ–ćƒ©ć‚¦ć‚¶ć®ę–‡å­—ć‚µć‚¤ć‚ŗčح定ćÆåę˜ ć§ćć¾ć™ć€‚

ä»Šć™ćć‚™å§‹ć‚ć‚‹CSSćƒ¬ć‚·ćƒ’ć‚šćƒ•ć‚™ćƒƒć‚Æ

恓恮čؘäŗ‹ćŒę°—ć«å…„ć£ćŸć‚‰ć€ć‚µćƒćƒ¼ćƒˆć‚’ć—ć¦ćæć¾ć›ć‚“ć‹ļ¼Ÿ
ę°—č»½ć«ć‚ÆćƒŖć‚Ø悤ć‚æćƒ¼ć®ę”Æę“ćØ态čؘäŗ‹ć®ć‚Ŗć‚¹ć‚¹ćƒ”ćŒć§ćć¾ć™ļ¼
66
惕ćƒŖćƒ¼ćƒ©ćƒ³ć‚¹ć§ę“»å‹•ć™ć‚‹ćƒ•ćƒ­ćƒ³ćƒˆć‚Øćƒ³ćƒ‰ć‚Øćƒ³ć‚øćƒ‹ć‚¢ć§ć™ć€‚ćŸć‚ć«ćŖć‚‹ć‚¹ćƒ‹ćƒšćƒƒćƒˆć‚’ę›øć„ć¦ć„ćć¾ć™ć€‚č‘—ę›øć€Žä»Šć™ćå§‹ć‚ć‚‹CSSćƒ¬ć‚·ćƒ”ćƒ–ćƒƒć‚Æ怏

ć“ć”ć‚‰ć§ć‚‚ćƒ”ćƒƒć‚Æć‚¢ćƒƒćƒ—ć•ć‚Œć¦ć„ć¾ć™

web-design
web-design
  • 9ęœ¬
ć‚³ćƒ”ćƒ³ćƒˆć‚’ęŠ•ēØæ恙悋恫ćÆ态 ćƒ­ć‚°ć‚¤ćƒ³ ć¾ćŸćÆ 会哔ē™»éŒ² 悒恙悋åæ…č¦ćŒć‚ć‚Šć¾ć™ć€‚