CSSè«çããã¯ã¹ã¢ãã«ãæ¢æ±ãã倿§ãªæžåæ¹åãåœéçãªããã¹ãæ¹åã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããäœæããæ¹æ³ãåŠã³ãã°ããŒãã«ãªãŠãŒã¶ãŒäœéšãåäžãããŸãã
CSSè«çããã¯ã¹ã¢ãã«ïŒã°ããŒãã«ãªWebã®ããã®æžåæ¹åãæèããã¬ã€ã¢ãŠãã®æ§ç¯
ãŠã§ãã¯ã°ããŒãã«ãªãã©ãããã©ãŒã ã§ãããéçºè ãšããŠãç§ãã¡ã¯äžçäžã®ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹ããããçŽæçãªäœéšãåµé ãã責任ããããŸãããããéæããããã®éèŠãªåŽé¢ã¯ãCSSè«çããã¯ã¹ã¢ãã«ãçè§£ãæŽ»çšããããšã§ããããã«ãããç°ãªãæžåæ¹åãããã¹ãã®åãã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããæ§ç¯ã§ããŸãããã®ã¢ãããŒãã¯ãæ¬è³ªçã«æ¹åã«äŸåããç©ççãªããããã£ïŒtop, right, bottom, leftïŒã®ã¿ã«äŸåããããããã¯ããã«å ç¢ã§ãã
ç©çããããã£ãšè«çããããã£ã®çè§£
åŸæ¥ã®CSSã¯ç©çããããã£ã«äŸåããŠããŸããããã¯ãç©ççãªç»é¢ãããã€ã¹ã«åºã¥ããŠé
眮ããµã€ãžã³ã°ãå®çŸ©ããŸããäŸãã°ãmargin-leftã¯ããã¹ãã®æ¹åã«é¢ä¿ãªããèŠçŽ ã®å·ŠåŽã«ããŒãžã³ã远å ããŸãããã®ã¢ãããŒãã¯ãå·Šããå³ãžèªãèšèªã«ã¯ããŸãæ©èœããŸãããã¢ã©ãã¢èªãããã©ã€èªã®ãããªå³ããå·ŠïŒRTLïŒãžã®èšèªããæ±ã¢ãžã¢èšèªã§äžè¬çã«èŠããã瞊æžãã®æžåæ¹åãæ±ãéã«åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
äžæ¹ãè«çããã¯ã¹ã¢ãã«ã¯ãæžåæ¹åãšããã¹ãã®åãã«çžå¯Ÿçãªè«çããããã£ã䜿çšããŸããmargin-leftã®ä»£ããã«margin-inline-startã䜿çšããŸãããã©ãŠã¶ã¯ãçŸåšã®æžåæ¹åãšåãã«åºã¥ããŠãã®ããããã£ãèªåçã«æ£ããè§£éããŸããããã«ããã䜿çšãããŠããèšèªãã¹ã¯ãªããã«é¢ä¿ãªããããŒãžã³ãèŠçŽ ã®é©åãªåŽã«è¡šç€ºãããããšãä¿èšŒãããŸãã
äž»èŠãªæŠå¿µïŒæžåæ¹åãšããã¹ãã®åã
è«çããããã£ã®è©³çްã«å ¥ãåã«ãæžåæ¹åãšããã¹ãã®åãã®æŠå¿µãçè§£ããããšãéèŠã§ãã
æžåæ¹åïŒWriting ModesïŒ
writing-mode CSSããããã£ã¯ãããã¹ãã®è¡ãã¬ã€ã¢ãŠããããæ¹åãå®çŸ©ããŸããæãäžè¬çãªå€ã¯æ¬¡ã®ãšããã§ãïŒ
horizontal-tbïŒæšæºçãªæ°Žå¹³ãäžããäžãžã®æžåæ¹åïŒäŸïŒè±èªãã¹ãã€ã³èªïŒãvertical-rlïŒåçŽãå³ããå·Šãžã®æžåæ¹åïŒäŒçµ±çãªäžåœèªãæ¥æ¬èªã§äžè¬çïŒãvertical-lrïŒåçŽãå·Šããå³ãžã®æžåæ¹åã
ããã©ã«ãã§ã¯ãã»ãšãã©ã®ãã©ãŠã¶ã¯writing-mode: horizontal-tbãé©çšããŸãã
ããã¹ãã®åãïŒText DirectionïŒ
direction CSSããããã£ã¯ãã€ã³ã©ã€ã³ã³ã³ãã³ããæµããæ¹åãæå®ããŸããããã«ã¯2ã€ã®å€ããããŸãïŒ
ltrïŒå·Šããå³ãžïŒäŸïŒè±èªããã©ã³ã¹èªïŒããããããã©ã«ãã§ããrtlïŒå³ããå·ŠãžïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒã
directionããããã£ã¯ããã¹ããšã€ã³ã©ã€ã³èŠçŽ ã®*æ¹å*ã«ã®ã¿åœ±é¿ããã¬ã€ã¢ãŠãå
šäœã«ã¯åœ±é¿ããªãããšã«æ³šæããããšãéèŠã§ããã¬ã€ã¢ãŠãã®æ¹åãäž»ã«æ±ºå®ããã®ã¯writing-modeããããã£ã§ãã
è«çããããã£ïŒå æ¬çãªæŠèŠ
äž»èŠãªè«çããããã£ãšãããããç©ççãªå¯Ÿå¿ç©ãšã©ã®ããã«é¢é£ããŠããããèŠãŠãããŸãããïŒ
ããŒãžã³
margin-block-startïŒhorizontal-tbã§ã¯margin-topã«çžåœããåçŽæžåæ¹åã§ã¯margin-rightãŸãã¯margin-leftã®ããããã«çžåœããŸããmargin-block-endïŒhorizontal-tbã§ã¯margin-bottomã«çžåœããåçŽæžåæ¹åã§ã¯margin-rightãŸãã¯margin-leftã®ããããã«çžåœããŸããmargin-inline-startïŒltræ¹åã§ã¯margin-leftã«ãrtlæ¹åã§ã¯margin-rightã«çžåœããŸããmargin-inline-endïŒltræ¹åã§ã¯margin-rightã«ãrtlæ¹åã§ã¯margin-leftã«çžåœããŸãã
ããã£ã³ã°
padding-block-startïŒhorizontal-tbã§ã¯padding-topã«çžåœããåçŽæžåæ¹åã§ã¯padding-rightãŸãã¯padding-leftã®ããããã«çžåœããŸããpadding-block-endïŒhorizontal-tbã§ã¯padding-bottomã«çžåœããåçŽæžåæ¹åã§ã¯padding-rightãŸãã¯padding-leftã®ããããã«çžåœããŸããpadding-inline-startïŒltræ¹åã§ã¯padding-leftã«ãrtlæ¹åã§ã¯padding-rightã«çžåœããŸããpadding-inline-endïŒltræ¹åã§ã¯padding-rightã«ãrtlæ¹åã§ã¯padding-leftã«çžåœããŸãã
ããŒããŒ
border-block-start,border-block-start-width,border-block-start-style,border-block-start-colorïŒhorizontal-tbã§ã¯äžããŒããŒã«å¯Ÿå¿ããŸããborder-block-end,border-block-end-width,border-block-end-style,border-block-end-colorïŒhorizontal-tbã§ã¯äžããŒããŒã«å¯Ÿå¿ããŸããborder-inline-start,border-inline-start-width,border-inline-start-style,border-inline-start-colorïŒltrã§ã¯å·ŠããŒããŒã«ãrtlã§ã¯å³ããŒããŒã«å¯Ÿå¿ããŸããborder-inline-end,border-inline-end-width,border-inline-end-style,border-inline-end-colorïŒltrã§ã¯å³ããŒããŒã«ãrtlã§ã¯å·ŠããŒããŒã«å¯Ÿå¿ããŸãã
ãªãã»ããããããã£
inset-block-startïŒhorizontal-tbã§ã¯topã«çžåœããŸããinset-block-endïŒhorizontal-tbã§ã¯bottomã«çžåœããŸããinset-inline-startïŒltrã§ã¯leftã«ãrtlã§ã¯rightã«çžåœããŸããinset-inline-endïŒltrã§ã¯rightã«ãrtlã§ã¯leftã«çžåœããŸãã
å¹ ãšé«ã
block-sizeïŒhorizontal-tbã§ã¯åçŽæ¹åã®å¯žæ³ãåçŽæžåæ¹åã§ã¯æ°Žå¹³æ¹åã®å¯žæ³ã衚ããŸããinline-sizeïŒhorizontal-tbã§ã¯æ°Žå¹³æ¹åã®å¯žæ³ãåçŽæžåæ¹åã§ã¯åçŽæ¹åã®å¯žæ³ã衚ããŸããmin-block-size,max-block-sizeïŒblock-sizeã®æå°å€ãšæå€§å€ãmin-inline-size,max-inline-sizeïŒinline-sizeã®æå°å€ãšæå€§å€ã
å®è·µçãªäŸïŒè«çããããã£ã®å®è£
è«çããããã£ã䜿çšããŠæžåæ¹åãæèããã¬ã€ã¢ãŠããäœæããæ¹æ³ã«ã€ããŠãããã€ãã®å®è·µçãªäŸãèŠãŠã¿ãŸãããã
äŸ1ïŒã·ã³ãã«ãªããã²ãŒã·ã§ã³ããŒ
ããŽãå·ŠåŽã«ãããããã²ãŒã·ã§ã³ãªã³ã¯ãå³åŽã«ããããã²ãŒã·ã§ã³ããŒãèããŠã¿ãŸããããç©çããããã£ã䜿çšãããšãããŽã«margin-leftããããã²ãŒã·ã§ã³ãªã³ã¯ã«margin-rightã䜿çšããŠã¹ããŒã¹ãäœæãããããããŸãããããããããã¯RTLèšèªã§ã¯æ£ããæ©èœããŸããã
è«çããããã£ã䜿çšããŠåãã¬ã€ã¢ãŠããå®çŸããæ¹æ³ã¯æ¬¡ã®ãšããã§ãïŒ
```html ``` ```css nav { display: flex; justify-content: space-between; padding-inline-start: 1rem; /* è«çããããã£ãäœ¿çš */ padding-inline-end: 1rem; /* è«çããããã£ãäœ¿çš */ } .logo { margin-inline-end: auto; /* ããŽãéå§äœçœ®ã«ããªã³ã¯ãçµäºäœçœ®ã«æŒããã */ } ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } ```ãã®äŸã§ã¯ãããã²ãŒã·ã§ã³ã®ããã£ã³ã°ãšããŽã®èªåããŒãžã³ã«ãmargin-leftãšmargin-rightãmargin-inline-startãšmargin-inline-endã«çœ®ãæããŸãããããŽã®margin-inline-endã«autoå€ã䜿çšãããšãLTRã§ã¯å·ŠåŽãRTLã§ã¯å³åŽã®ã¹ããŒã¹ãåããããšã«ãªãã广çã«ããã²ãŒã·ã§ã³ãæ«å°Ÿã«æŒããããŸãã
ããã«ãããããã¹ãã®æ¹åã«é¢ä¿ãªããããŽã¯åžžã«ããã²ãŒã·ã§ã³ããŒã®éå§åŽã«è¡šç€ºãããããã²ãŒã·ã§ã³ãªã³ã¯ã¯çµäºåŽã«è¡šç€ºãããããšãä¿èšŒãããŸãã
äŸ2ïŒã«ãŒãã³ã³ããŒãã³ãã®ã¹ã¿ã€ãªã³ã°
ã¿ã€ãã«ã説æãç»åãæã€ã«ãŒãã³ã³ããŒãã³ãããããšããŸããã³ã³ãã³ãã®åšãã«ããã£ã³ã°ã远å ããé©åãªèŸºã«ããŒããŒã远å ããããšããŸãã
```html
Card Title
ããã¯ã«ãŒãã³ã³ãã³ãã®ç°¡åãªèª¬æã§ãã
ããã§ã¯ãpadding-block-startãpadding-block-endãpadding-inline-startãããã³padding-inline-endã䜿çšããŠãã«ãŒãã³ã³ãã³ãã®åšãã«ããã£ã³ã°ã远å ããŸãããããã«ãããLTRãšRTLã®äž¡æ¹ã®ã¬ã€ã¢ãŠãã§ããã£ã³ã°ãæ£ããé©çšãããããšãä¿èšŒãããŸãã
äŸ3ïŒçžŠæžãæžåæ¹åã®åŠç
äŒçµ±çãªæ¥æ¬èªãäžåœã®æžéã®ããã«ãããã¹ãã瞊ã«è¡šç€ºããå¿ èŠãããã·ããªãªãèããŠã¿ãŸããããã¬ã€ã¢ãŠãã¯ããããã®ç¹å®ã®æžåæ¹åã«å¯Ÿå¿ããå¿ èŠããããŸãã
```htmlãã®ããã¹ãã¯çžŠã«è¡šç€ºãããŸãã
ãã®äŸã§ã¯ãwriting-modeãvertical-rlã«èšå®ããŸãããããã«ãããããã¹ãã¯å³ããå·ŠãžçžŠã«ã¬ã³ããªã³ã°ãããŸããblock-sizeã䜿çšããŠå
šäœã®é«ããå®çŸ©ããŸããè«çããããã£ã䜿çšããŠããŒããŒãšããã£ã³ã°ãé©çšããŸããããããã¯åçŽã³ã³ããã¹ãã§åãããã³ã°ãããŸããvertical-rlã§ã¯ãborder-inline-startã¯äžããŒããŒãborder-inline-endã¯äžããŒããŒãpadding-block-startã¯å·Šããã£ã³ã°ãpadding-block-endã¯å³ããã£ã³ã°ã«ãªããŸãã
FlexboxãšGridã¬ã€ã¢ãŠãã§ã®äœæ¥
CSSè«çããã¯ã¹ã¢ãã«ã¯ãFlexboxãGridã®ãããªçŸä»£çãªã¬ã€ã¢ãŠãæè¡ãšã·ãŒã ã¬ã¹ã«çµ±åãããŸãããããã®ã¬ã€ã¢ãŠãæ¹æ³ã䜿çšããå Žåãã¬ã€ã¢ãŠããç°ãªãæžåæ¹åãããã¹ãã®åãã«æ£ããé©å¿ããããã«ãé 眮ããµã€ãžã³ã°ãã¹ããŒã·ã³ã°ã«è«çããããã£ã䜿çšããå¿ èŠããããŸãã
Flexbox
Flexboxã§ã¯ãjustify-contentãalign-itemsãgapã®ãããªããããã£ããããŒãžã³ãããã£ã³ã°ã®è«çããããã£ãšçµã¿åãããŠäœ¿çšããæè»ã§æžåæ¹åãæèããã¬ã€ã¢ãŠããäœæããå¿
èŠããããŸããç¹ã«flex-direction: row | row-reverse;ã䜿çšããå Žåãstartãšendããããã£ã¯ã³ã³ããã¹ããæèãããã®ãšãªããäžè¬çã«leftãrightããã奜ãŸããã§ãã
äŸãã°ãFlexboxã³ã³ããå
ã®äžé£ã®ã¢ã€ãã ãèããŠã¿ãŸããããã¢ã€ãã ãåçã«é
眮ããã«ã¯ãjustify-content: space-betweenã䜿çšã§ããŸããRTLã¬ã€ã¢ãŠãã§ã¯ãã¢ã€ãã ã¯åŒãç¶ãåçã«é
眮ãããŸãããã¢ã€ãã ã®é åºã¯éã«ãªããŸãã
Gridã¬ã€ã¢ãŠã
Gridã¬ã€ã¢ãŠãã¯ãè€éãªã¬ã€ã¢ãŠããäœæããããã®ããã«åŒ·åãªããŒã«ãæäŸããŸããè«çããããã£ã¯ãååä»ãã°ãªããã©ã€ã³ãšçµã¿åããããšç¹ã«äŸ¿å©ã§ããã°ãªããã©ã€ã³ãçªå·ã§åç §ãã代ããã«ããstartãããendãã®ãããªè«ççãªçšèªã§ååãä»ããæžåæ¹åã«å¿ããŠãã®ç©ççãªé 眮ãå®çŸ©ã§ããŸãã
äŸãã°ããinline-startãããinline-endãããblock-startãããblock-endãã®ãããªååä»ãã©ã€ã³ãæã€ã°ãªãããå®çŸ©ãããããã®ååã䜿çšããŠã°ãªããå ã«èŠçŽ ãé 眮ã§ããŸããããã«ãããç°ãªãæžåæ¹åãããã¹ãã®åãã«é©å¿ããã¬ã€ã¢ãŠããç°¡åã«äœæã§ããŸãã
è«çããã¯ã¹ã¢ãã«ã䜿çšããã¡ãªãã
CSSè«çããã¯ã¹ã¢ãã«ãæ¡çšããããšã«ã¯ãããã€ãã®éèŠãªã¡ãªããããããŸãïŒ
- åœéåïŒi18nïŒã®åäžïŒå€æ§ãªèšèªãã¹ã¯ãªããã«å¯ŸããŠãããå ç¢ã§é©å¿æ§ã®é«ãã¬ã€ã¢ãŠããäœæããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åŒ·åïŒãŠãŒã¶ãŒã®èšèªãæåçèæ¯ã«é¢ä¿ãªããäžè²«æ§ã®ããçŽæçãªãŠãŒã¶ãŒäœéšãä¿èšŒããŸãã
- ã³ãŒãã®è€éãã®è»œæžïŒç°ãªãããã¹ãã®åããåŠçããããã®è€éãªã¡ãã£ã¢ã¯ãšãªãæ¡ä»¶ä»ãããžãã¯ã®å¿ èŠæ§ããªãããCSSã³ãŒããç°¡çŽ åããŸãã
- ä¿å®æ§ã®åäžïŒã¬ã€ã¢ãŠããžã®å€æŽãèªåçã«ç°ãªãæžåæ¹åã«é©å¿ãããããã³ãŒãã®ä¿å®ãšæŽæ°ã容æã«ãªããŸãã
- å°æ¥ãžã®åãïŒçŸåšãµããŒãããŠããªãå¯èœæ§ã®ããå°æ¥ã®èšèªãæžåã·ã¹ãã ã«å¯ŸããŠããŠã§ããµã€ããæºåããŸãã
èæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
è«çããã¯ã¹ã¢ãã«ã¯å€ãã®å©ç¹ãæäŸããŸããããããå®è£ ããéã«ã¯æ¬¡ã®ç¹ãèæ ®ããããšãäžå¯æ¬ ã§ãïŒ
- ãã©ãŠã¶ã®äºææ§ïŒäœ¿çšããŠããè«çããããã£ãã¿ãŒã²ãããã©ãŠã¶ã§ãµããŒããããŠããããšã確èªããŠãã ãããã»ãšãã©ã®çŸä»£çãªãã©ãŠã¶ã¯åªãããµããŒããæäŸããŠããŸãããå€ããã©ãŠã¶ã§ã¯ããªãã£ã«ããã©ãŒã«ããã¯ãœãªã¥ãŒã·ã§ã³ãå¿ èŠã«ãªãå ŽåããããŸãã
- ãã¹ãïŒç°ãªãæžåæ¹åãããã¹ãã®åãã§ã¬ã€ã¢ãŠãã培åºçã«ãã¹ãããæ£ããã¬ã³ããªã³ã°ãããããšã確èªããŠãã ããããã©ãŠã¶ã®éçºè ã³ã³ãœãŒã«ã®ãããªããŒã«ã¯ãç°ãªãèšèªç°å¢ãã·ãã¥ã¬ãŒãããã®ã«åœ¹ç«ã¡ãŸãã
- äžè²«æ§ïŒã³ãŒãããŒã¹å šäœã§è«çããããã£ã®äœ¿çšã«äžè²«æ§ãä¿ã£ãŠãã ãããããã«ãããã³ãŒããçè§£ãããããä¿å®ãããããªããŸãã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒè«çããããã£ãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããšããŠäœ¿çšãããããããµããŒãããŠããªãå€ããã©ãŠã¶ã«ã¯ãã©ãŒã«ããã¯ã¹ã¿ã€ã«ãæäŸããŸãã
- æ¢åã®ã³ãŒãããŒã¹ã®èæ ®ïŒå€§èŠæš¡ã§ç¢ºç«ãããã³ãŒãããŒã¹ãè«çããããã£ã䜿çšããããã«å€æããã®ã¯ã倧ããªäœæ¥ã«ãªãå¯èœæ§ããããŸããç§»è¡ãæ éã«èšç»ããå€æãæ¯æŽããããã®èªååããŒã«ã®äœ¿çšãæ€èšããŠãã ããã
ããŒã«ãšãªãœãŒã¹
CSSè«çããã¯ã¹ã¢ãã«ã«ã€ããŠããã«åŠã¶ããã®åœ¹ç«ã€ããŒã«ãšãªãœãŒã¹ãããã€ã玹ä»ããŸãïŒ
- MDN Web DocsïŒMozilla Developer NetworkïŒMDNïŒã¯ãCSSè«çããããã£ã«é¢ããå æ¬çãªããã¥ã¡ã³ããæäŸããŠããŸãïŒ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
- CSS Writing ModesïŒCSS Writing Modes仿§ã¯ã
writing-modeãšdirectionããããã£ãå®çŸ©ããŠããŸãïŒ https://www.w3.org/TR/css-writing-modes-3/ - RTLCSSïŒRTLèšèªåãã«CSSã¹ã¿ã€ã«ã·ãŒãã倿ããããã»ã¹ãèªååããããŒã«ïŒ https://rtlcss.com/
- ãã©ãŠã¶éçºè ããŒã«ïŒãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠãç°ãªãæžåæ¹åãããã¹ãã®åãã§ã®ã¬ã€ã¢ãŠããæ€æ»ããã³ãããã°ããŸãã
çµè«
CSSè«çããã¯ã¹ã¢ãã«ã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«ã¢ã¯ã»ã¹ããããå æ¬çãªWebäœéšãæ§ç¯ããããã®åŒ·åãªããŒã«ã§ããè«çããããã£ãçè§£ãæŽ»çšããããšã§ãç°ãªãæžåæ¹åãããã¹ãã®åãã«ã·ãŒã ã¬ã¹ã«é©å¿ããã¬ã€ã¢ãŠããäœæããèšèªãæåçèæ¯ã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠäœ¿ãããããŠã§ããµã€ããä¿èšŒã§ããŸããè«çããã¯ã¹ã¢ãã«ãåãå ¥ããããšã¯ããã¹ãŠã®äººã ãã¢ã¯ã»ã¹ã§ããçã«ã°ããŒãã«ãªãŠã§ããåµé ããããã®éèŠãªäžæ©ã§ãã