CSSãã¹ãã£ã³ã°ã®åãè§£ãæŸã¡ãæŽçããèªã¿ãããã¹ã¿ã€ã«ã·ãŒããšæ£ç¢ºãªè©³çŽ°åºŠå¶åŸ¡ãå®çŸããŸããã¢ãã³CSSéçºã®ãã¹ããã©ã¯ãã£ã¹ã«é¢ããã°ããŒãã«ã¬ã€ãã
CSSãã¹ãã£ã³ã°ã®ç¿åŸïŒæ§æã®åçåãšè©³çŽ°åºŠã®çè§£
ãŠã§ãéçºã®äžçã¯çµ¶ããé²åããŠãããç§ãã¡ã®ä»äºãããå¹ççã«ããã³ãŒããããå ç¢ã«ããããã®æ°ããããŒã«ãæè¡ãèšèªæ©èœãç»å ŽããŠããŸããCSS仿§ãžã®æãæåŸ ãããå€é©çãªè¿œå æ©èœã®äžã€ãCSSãã¹ãã£ã³ã°ã¢ãžã¥ãŒã«ã§ããé·å¹Žã«ããããéçºè ã¯SassãLessãStylusã®ãããªããªããã»ããµã«é Œã£ãŠãã¹ãã£ã³ã°ã®å©ç¹ãå®çŸããŠããŸããããä»ããã®åŒ·åãªæ§ææ©èœãCSSã§ãã€ãã£ãã«å©çšå¯èœã«ãªããŸããããã®å æ¬çãªã¬ã€ãã§ã¯ãCSSãã¹ãã«ãŒã«ã®è€éããæãäžããã¹ã¿ã€ã«ã·ãŒãã®æ§æãå¯èªæ§ããããŠæ±ºå®çã«éèŠãªCSSã®è©³çŽ°åºŠãšã®çžäºäœçšã«ã€ããŠæ¢ããŸãã
çµéšè±å¯ãªããã³ããšã³ããšã³ãžãã¢ã§ããããŠã§ãéçºã®æ ãå§ããã°ããã§ããããã€ãã£ãCSSãã¹ãã£ã³ã°ãçè§£ããããšã¯ãä¿å®å¯èœã§ã¹ã±ãŒã©ãã«ãªã¢ãã³ãªã¹ã¿ã€ã«ã·ãŒããæžãäžã§äžå¯æ¬ ã§ãããã®æ§æãå®è·µçãªå¿çšããã¹ããã©ã¯ãã£ã¹ããããŠå€æ§ãªã°ããŒãã«éçºç°å¢ã§ã®æ¡çšã«é¢ããèæ ®äºé ãæ¢ã£ãŠãããŸãã
ãã€ãã£ãCSSãã¹ãã£ã³ã°ã®å€æãïŒãã©ãã€ã ã·ãã
CSSãã¹ãã£ã³ã°ãšã¯ïŒ
CSSãã¹ãã£ã³ã°ã®æ žå¿ã¯ãããã¹ã¿ã€ã«ã«ãŒã«ãå¥ã®ã¹ã¿ã€ã«ã«ãŒã«ã®äžã«æžãããšãå¯èœã«ããå åŽã®ã«ãŒã«ãå€åŽã®ã«ãŒã«ã®ã»ã¬ã¯ã¿ã®åå«ãŸãã¯é¢é£ããèŠçŽ ã«é©çšãããããšã§ããããã¯HTMLã®éå±€æ§é ãåæ ããŠãããCSSãããçŽæçã§è¿œããããããŸãã
åŸæ¥ãã«ãŒãã®ãããªç¹å®ã®ã³ã³ããŒãã³ãå ã®èŠçŽ ãã¹ã¿ã€ã«èšå®ãããå Žåãåéšåã«å¯ŸããŠåå¥ã®ã«ãŒã«ãèšè¿°ããŠããŸããïŒ
.card {
border: 1px solid #eee;
padding: 1rem;
}
.card h3 {
color: #333;
margin-bottom: 0.5rem;
}
.card p {
font-size: 0.9em;
}
.card a {
color: #007bff;
text-decoration: none;
}
CSSãã¹ãã£ã³ã°ã䜿çšãããšãããã¯å€§å¹ ã«ã³ã³ãã¯ãã§èªã¿ããããªããŸãïŒ
.card {
border: 1px solid #eee;
padding: 1rem;
h3 {
color: #333;
margin-bottom: 0.5rem;
}
p {
font-size: 0.9em;
a {
color: #007bff;
text-decoration: none;
}
}
}
çŽæ¥çãªå©ç¹ã¯æããã§ãïŒèŠªã»ã¬ã¯ã¿ã®ç¹°ãè¿ãã®åæžãè«ççãªã°ã«ãŒãåã«ããå¯èªæ§ã®åäžããããŠããã³ã³ããŒãã³ãæåã®ã¹ã¿ã€ãªã³ã°ã¢ãããŒãã§ãã
ããªããïŒã°ããŒãã«éçºã«ããããã¹ãã£ã³ã°ã®å©ç¹
ãã€ãã£ãCSSãã¹ãã£ã³ã°ã®å°å ¥ã¯ãäžçäžã®éçºè ã«é¿ãå€ãã®å©ç¹ããããããŸãïŒ
- å¯èªæ§ãšä¿å®æ§ã®åäžïŒ ã¹ã¿ã€ã«ãè«ççã«ã°ã«ãŒãåãããHTMLã®æ§é ãåæ ããŸããããã«ãããéçºè ã¯æ¯åœèªãæåçèæ¯ã«é¢ããããã©ã®ã¹ã¿ã€ã«ãã³ã³ããŒãã³ãå ã®ã©ã®èŠçŽ ã«é©çšãããããè¿ éã«çè§£ã§ããŸãããããã°ãã¹ã¿ã€ã«ã®ä¿®æ£ã«ãããæéãççž®ãããŸãã
- ç¹°ãè¿ãã®åæžïŒDRYååïŒïŒ ãã¹ãã£ã³ã°ã¯èŠªã»ã¬ã¯ã¿ãç¹°ãè¿ãå ¥åããå¿ èŠæ§ããªããããDon't Repeat YourselfãïŒDRYïŒååã«åŸããŸããããã«ãããã³ãŒãããŒã¹ã¯ããå°ãããã¯ãªãŒã³ã«ãªãããšã©ãŒãçºçãã«ãããªããŸãã
- æ§æã®æ¹åïŒ CSSã«å¯Ÿããããã¢ãžã¥ãŒã«åãããã³ã³ããŒãã³ãããŒã¹ã®ã¢ãããŒããä¿é²ããŸããããã²ãŒã·ã§ã³ããŒãã¢ãŒãã«ãã€ã¢ãã°ãååãªã¹ããªã©ãç¹å®ã®UIã³ã³ããŒãã³ãã«é¢é£ããã¹ã¿ã€ã«ããåäžã®ãã¹ãããããããã¯å ã«å®å šã«å«ããããšãã§ããŸããããã¯ãç°ãªãããŒã ãå°åã«ãŸãããå€§èŠæš¡ãªå ±åãããžã§ã¯ãã§ç¹ã«æçã§ãã
- éçºãµã€ã¯ã«ã®ççž®ïŒ ã¹ã¿ã€ã«ã·ãŒãã®èšè¿°ãèªã¿åãã管çã容æã«ããããšã§ããã¹ãã£ã³ã°ã¯éçºãµã€ã¯ã«ã®ççž®ã«è²¢ç®ã§ããŸããéçºè ã¯è€éãªCSSãã¡ã€ã«ãããã²ãŒãããæéãæžãããæ©èœæ§ç¯ã«ããå€ãã®æéãè²»ããããšãã§ããŸãã
- ããªããã»ããµããã®æ©æž¡ãïŒ Sassã®ãããªããªããã»ããµãããã¹ãã£ã³ã°ã«ãã§ã«æ £ããŠããäžçäžã®å€§å€æ°ã®ããã³ããšã³ãéçºè ã«ãšã£ãŠããã®ãã€ãã£ãæ©èœã¯ããã¹ã ãŒãºãªç§»è¡ãæäŸããäžéšã®ãããžã§ã¯ãã§ã¯ãã«ãããŒã«ã®è€éãã軜æžããå¯èœæ§ããããŸãã
æŽå²çèæ¯ïŒããªããã»ããµ vs. ãã€ãã£ãCSSãã¹ãã£ã³ã°
10幎以äžã«ããããCSSããªããã»ããµã¯ã倿°ãããã¯ã¹ã€ã³ã颿°ããããŠæ±ºå®çã«éèŠãªãã¹ãã£ã³ã°ãªã©ã®æ©èœãæäŸããããšã§ããã€ãã£ãCSSã®æ¬ ããŠããéšåãåããŠããŸãããSassïŒSyntactically Awesome Style SheetsïŒã¯ããã«æ¥çæšæºãšãªããéçºè ã¯ããåçã§æŽçãããCSSãæžãããšãã§ããããã«ãªããŸãããLessãStylusãåæ§ã®æ©èœãæäŸããŠããŸããã
éåžžã«è²Žéã§ããäžæ¹ãããªããã»ããµã«äŸåããããšã¯è¿œå ã®ãã«ãã¹ããããå°å ¥ãããã©ãŠã¶ã§äœ¿çšããåã«ããªããã»ããµã³ãŒããæšæºCSSã«ã³ã³ãã€ã«ããå¿ èŠããããŸãããã€ãã£ãCSSãã¹ãã£ã³ã°ã¯ãã®ã¹ããããæé€ãããã©ãŠã¶ããã¹ããããã«ãŒã«ãçŽæ¥è§£éã§ããããã«ããŸããããã«ãããéçºããã»ã¹ãåçåãããè€éãªããŒã«ãžã®äŸåãæžããããã·ã³ãã«ãªã»ããã¢ããã®ãããžã§ã¯ããçŽç²ãªCSSã¢ãããŒããç®æããããžã§ã¯ãã§å®¹æã«ãªããŸãã
ãã€ãã£ãCSSãã¹ãã£ã³ã°ãããªããã»ããµã®å®å šãªä»£æ¿åã§ã¯ãªãããšã«æ³šæããããšãéèŠã§ããããªããã»ããµã¯ããŸã ãã€ãã£ãCSSã§ã¯å©çšã§ããªããããåºç¯ãªæ©èœïŒã«ãŒããæ¡ä»¶åå²ãé«åºŠãªé¢æ°ãªã©ïŒãæäŸããŠããŸããããããå€ãã®äžè¬çãªãŠãŒã¹ã±ãŒã¹ã§ã¯ãç¹ã«ãã©ãŠã¶ã®ãµããŒããåºãŸãã«ã€ããŠããã€ãã£ããã¹ãã£ã³ã°ã¯é åçãªä»£æ¿ææ®µãæäŸããŸãã
å®è·µã«ãããCSSãã¹ãã«ãŒã«ïŒæ§æãšäœ¿çšæ³
CSSãã¹ãã£ã³ã°ã®æ§æã¯çŽæçã§ãæ¢åã®CSSç¥èãåºã«ããŠããŸããéèŠãªæŠå¿µã¯ããã¹ããããã«ãŒã«ã®ã»ã¬ã¯ã¿ããã®èŠªã®ã»ã¬ã¯ã¿ãšæé»çã«çµåãããããšã§ãã`&`èšå·ã¯ã芪ã»ã¬ã¯ã¿ãæç€ºçã«åç §ããäžã§éèŠãªåœ¹å²ãæãããŸãã
åºæ¬æ§æïŒæé»çããã³æç€ºçãªãã¹ãã£ã³ã°
åçŽãªã»ã¬ã¯ã¿ïŒèŠçŽ åãã¯ã©ã¹ãIDãªã©ïŒãå¥ã®ã»ã¬ã¯ã¿ã®äžã«ãã¹ããããšãããã¯æé»çã«èŠªã»ã¬ã¯ã¿ã®åå«ãåç §ããŸãïŒ
.component {
background-color: lightblue;
h2 { /* .component å
ã® h2 ãã¿ãŒã²ãã */
color: darkblue;
}
button { /* .component å
ã® button ãã¿ãŒã²ãã */
padding: 0.5rem 1rem;
border: none;
}
}
`&`ïŒã¢ã³ããµã³ãïŒèšå·ã¯ã芪ã»ã¬ã¯ã¿èªäœãåç §ããå¿ èŠãããå Žåããã»ã¬ã¯ã¿ã®é£çµãå åŒã»ã¬ã¯ã¿ããŸãã¯èŠªã®ä¿®é£Ÿãªã©ãããè€éãªé¢ä¿ãäœæãããå Žåã«äœ¿çšãããŸããããã¯æç€ºçã«èŠªã»ã¬ã¯ã¿ã衚ããŸãã
.button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border-radius: 4px;
&:hover { /* .button:hover ãã¿ãŒã²ãã */
background-color: #0056b3;
}
&.primary { /* .button.primary ãã¿ãŒã²ãã */
font-weight: bold;
}
& + & { /* å¥ã® .button ã®çŽåŸã«ãã .button ãã¿ãŒã²ãã */
margin-left: 10px;
}
}
ãã€`&`ãæç€ºçã«äœ¿çšãããã€æé»çãªåå«éžæã«äŸåããããçè§£ããããšãã广çãªãã¹ããããCSSãæžãéµã§ãã
èŠçŽ ã®ãã¹ãã£ã³ã°
èŠçŽ ã®ãã¹ãã£ã³ã°ã¯ãããããæãäžè¬çãªãŠãŒã¹ã±ãŒã¹ã§ãããã³ã³ããŒãã³ãããŒã¹ã®ã¹ã¿ã€ã«ã®å¯èªæ§ãå€§å¹ ã«åäžãããŸãïŒ
.navigation {
ul {
list-style: none;
padding: 0;
margin: 0;
li {
display: inline-block;
margin-right: 15px;
a {
text-decoration: none;
color: #333;
&:hover {
color: #007bff;
}
}
}
}
}
ãã®æ§é ã¯ã`ul`ã`li`ãããã³`a`èŠçŽ ã`.navigation`å ã§ç¹å¥ã«ã¹ã¿ã€ã«èšå®ãããŠããããšãæç¢ºã«ç€ºããã¹ã¿ã€ã«ãæŒæŽ©ããŠããŒãžäžã®ä»ã®åæ§ã®èŠçŽ ã«åœ±é¿ãäžããã®ãé²ããŸãã
ã¯ã©ã¹ãšIDã®ãã¹ãã£ã³ã°
ã¯ã©ã¹ãšIDããã¹ãããããšã§ãã³ã³ããŒãã³ãã®ç¹å®ã®ç¶æ ãããªãšãŒã·ã§ã³ã«é¢é£ããéåžžã«å ·äœçãªã¹ã¿ã€ãªã³ã°ãå¯èœã«ãªããŸãïŒ
.product-card {
border: 1px solid #ccc;
padding: 1rem;
&.out-of-stock {
opacity: 0.6;
filter: grayscale(100%);
cursor: not-allowed;
}
#price-tag {
font-size: 1.2em;
font-weight: bold;
color: #e44d26;
}
}
ããã§ã¯ã`.product-card.out-of-stock`ãç°ãªãã¹ã¿ã€ã«ã«èšå®ãããã«ãŒãå ã®äžæã®`price-tag` IDãç¹å®ã®ã¹ã¿ã€ãªã³ã°ãåããŸããIDã¯ãã¹ãã§ããŸãããã»ãšãã©ã®ã¢ãã³ãªCSSã¢ãŒããã¯ãã£ã§ã¯ãåå©çšæ§ãšä¿å®æ§ãé«ããããã«ã¯ã©ã¹ãåªå ããããšãäžè¬çã«æšå¥šãããŸãã
æ¬äŒŒã¯ã©ã¹ãšæ¬äŒŒèŠçŽ ã®ãã¹ãã£ã³ã°
æ¬äŒŒã¯ã©ã¹ïŒ`:hover`ã`:focus`ã`:active`ã`:nth-child()`ãªã©ïŒããã³æ¬äŒŒèŠçŽ ïŒ`::before`ã`::after`ã`::first-line`ãªã©ïŒã¯ãã€ã³ã¿ã©ã¯ãã£ããŸãã¯æ§é çãªã¹ã¿ã€ãªã³ã°ã«é »ç¹ã«äœ¿çšãããŸãã`&`ã§ãããããã¹ããããšã芪ã»ã¬ã¯ã¿ãšã®é¢ä¿ãæç€ºçãã€æç¢ºã«ãªããŸãïŒ
.link {
color: blue;
text-decoration: underline;
&:hover {
color: darkblue;
text-decoration: none;
}
&:focus {
outline: 2px solid lightblue;
}
&::before {
content: "â¡ïž ";
margin-right: 5px;
}
}
ãã®ãã¿ãŒã³ã¯ãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã®ã¹ã¿ã€ãªã³ã°ããHTMLãä¹±éã«ããããšãªãè£ é£Ÿçãªã³ã³ãã³ãã远å ããã®ã«éåžžã«è²Žéã§ãã
ã¡ãã£ã¢ã¯ãšãªãš`@supports`ã®ãã¹ãã£ã³ã°
CSSãã¹ãã£ã³ã°ã®æã匷åãªæ©èœã®1ã€ã¯ã`@media`ããã³`@supports`ã«ãŒã«ãã»ã¬ã¯ã¿å ã«çŽæ¥ãã¹ãã§ããããšã§ããããã«ãããã¬ã¹ãã³ã·ãããã³æ©èœäŸåã®ã¹ã¿ã€ã«ãããããã圱é¿ãäžããã³ã³ããŒãã³ããšè«ççã«ã°ã«ãŒãåãããŸãïŒ
.header {
background-color: #f8f8f8;
padding: 1rem 2rem;
@media (max-width: 768px) {
padding: 1rem;
text-align: center;
h1 {
font-size: 1.5rem;
}
}
@supports (display: grid) {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
}
ããã«ããã`.header`ã³ã³ããŒãã³ãã«é¢é£ãããã¹ãŠã®ã¹ã¿ã€ã«ïŒã¬ã¹ãã³ã·ããªããªãšãŒã·ã§ã³ãå«ãïŒã1ãæã«ãŸãšãŸããŸããããã¯ãç¹ã«è€éã§é©å¿æ§ã®ãããã¶ã€ã³ã«ãããŠãä¿å®æ§ãå€§å¹ ã«åäžãããŸãã
ã¡ãã£ã¢ã¯ãšãªããã¹ããããŠããå Žåããã®ã«ãŒã«ã¯*ãã®ã¡ãã£ã¢æ¡ä»¶äžã§*芪ã»ã¬ã¯ã¿ã«é©çšãããŸããã¡ãã£ã¢ã¯ãšãªãã«ãŒãã«ããããã¹ã¿ã€ã«ã«ãŒã«å ã«ããå Žåãããèªäœããã¹ããããã»ã¬ã¯ã¿ãå«ãããšãã§ããŸãïŒ
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
.sidebar {
width: 300px;
}
}
}
ãã®æè»æ§ã¯ãè€éãªã°ããŒãã«ã¹ã¿ã€ã«ã·ãŒããæ§ç¯ããç°ãªãå°åã®å€æ§ãªç»é¢ãµã€ãºããã©ãŠã¶æ©èœã«å¯Ÿå¿ããäžã§å€§ããªåãçºæ®ããŸãã
ã»ã¬ã¯ã¿ãªã¹ãã®ãã¹ãã£ã³ã°
ã»ã¬ã¯ã¿ãªã¹ãããã¹ãããããšãã§ããŸããããšãã°ãå ±éã®ãã¹ããããã¹ã¿ã€ã«ãå ±æããè€æ°ã®èŠçŽ ãããå ŽåïŒ
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
margin-bottom: 1em;
+ p { /* h1, h2, ãŸã㯠h3 ã®çŽåŸã«ããæ®µèœãã¿ãŒã²ãã */
margin-top: -0.5em;
font-style: italic;
}
}
ããã§ã`+ p`ã«ãŒã«ã¯ã`h1`ã`h2`ããŸãã¯`h3`èŠçŽ ã®çŽåŸã«ããä»»æã®`p`èŠçŽ ã«é©çšãããŸãã
`&`ã®éèŠæ§ãšäœ¿çšå Žé¢
`&`èšå·ã¯ãé«åºŠãªCSSãã¹ãã£ã³ã°ã®ç€ã§ããããã¯*芪ã»ã¬ã¯ã¿å šäœ*ãæååãšããŠè¡šããŸããããã¯ä»¥äžã®ç¹ã§äžå¯æ¬ ã§ãïŒ
- èªå·±åç §ïŒ `:hover`ã`&.is-active`ã®äŸã®ããã«ã
- è€åã»ã¬ã¯ã¿ïŒ 芪ãã¹ããŒã¹ãªãã§å¥ã®ã»ã¬ã¯ã¿ãšçµã¿åãããå ŽåïŒäŸïŒ`&.modifier`ïŒã
- åå«ä»¥å€ã®çµååïŒ é£æ¥å åŒïŒ`+`ïŒãäžè¬å åŒïŒ`~`ïŒãåïŒ`>`ïŒãããã«ã¯åçµååãªã©ã
- ã¢ããã«ãŒã«ã®ãã¹ãã£ã³ã°ïŒ `@media`ã`@supports`ã«ãŒã«ã¯`&`ã®æç¡ã«ããããããã¹ãã§ããŸãã`&`ãçç¥ãããšããã¹ããããã»ã¬ã¯ã¿ã¯æé»çã«åå«ã«ãªããŸãã`&`ãååšããå Žåãã¢ããã«ãŒã«å ã§èŠªãæç€ºçã«ã¿ãŒã²ããã«ããŸãã
éããèããŠã¿ãŸãããïŒ
.parent {
.child { /* ãã㯠.parent .child ã«ã³ã³ãã€ã«ããã */
color: blue;
}
&.modifier { /* ãã㯠.parent.modifier ã«ã³ã³ãã€ã«ããã */
font-weight: bold;
}
> .direct-child { /* ãã㯠.parent > .direct-child ã«ã³ã³ãã€ã«ããã */
border-left: 2px solid red;
}
}
çµéšåãšããŠïŒèŠªã®åå«ãã¿ãŒã²ããã«ããå Žåã¯ã`&`ãçç¥ã§ããŸãã芪èªäœãæ¬äŒŒã¯ã©ã¹ãæ¬äŒŒèŠçŽ ã屿§ã»ã¬ã¯ã¿ã§ã¿ãŒã²ããã«ããããå¥ã®ã¯ã©ã¹/IDãšçµã¿åãããå Žåã¯ã`&`ãäžå¯æ¬ ã§ãã
CSSãã¹ãã£ã³ã°ã«ããã詳现床ã®çè§£
詳现床ã¯CSSã®åºæ¬æŠå¿µã§ãããè€æ°ã®ã«ãŒã«ãæœåšçã«èŠçŽ ãã¿ãŒã²ããã«ããå¯èœæ§ãããå Žåã«ãã©ã®ã¹ã¿ã€ã«å®£èšãé©çšãããããæ±ºå®ããŸããããã¯ãã°ãã°ã¹ã³ã¢ãªã³ã°ã·ã¹ãã ãšããŠèª¬æãããããŸããŸãªã¿ã€ãã®ã»ã¬ã¯ã¿ã«ãã€ã³ããå²ãåœãŠãããŸãïŒ
- ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ïŒ 1000ãã€ã³ã
- IDïŒ 100ãã€ã³ã
- ã¯ã©ã¹ã屿§ãæ¬äŒŒã¯ã©ã¹ïŒ 10ãã€ã³ã
- èŠçŽ ãæ¬äŒŒèŠçŽ ïŒ 1ãã€ã³ã
- ãŠãããŒãµã«ã»ã¬ã¯ã¿ïŒ`*`ïŒãçµååïŒ`+`, `~`, `>`ïŒãåŠå®æ¬äŒŒã¯ã©ã¹ïŒ`:not()`ïŒïŒ 0ãã€ã³ã
詳现床ã¹ã³ã¢ãæãé«ãã«ãŒã«ãåã¡ãŸããã¹ã³ã¢ãçããå Žåã¯ãæåŸã«å®£èšãããã«ãŒã«ãåªå ãããŸãã
ãã¹ãã£ã³ã°ã詳现床ã«äžãã圱é¿ïŒ`&`ã®éèŠãªåœ¹å²
ããã§ããã€ãã£ãCSSãã¹ãã£ã³ã°ã¯åŸ®åŠãªãããéèŠãªãã¥ã¢ã³ã¹ãå°å ¥ããŸãããã¹ããããã»ã¬ã¯ã¿ã®è©³çŽ°åºŠã¯ãããããã©ãããªã»ã¬ã¯ã¿ã«ã©ã®ããã«è§£æ±ºããããã«åºã¥ããŠèšç®ãããŸãã`&`èšå·ã®æç¡ãããã®èšç®ã«å€§ãã圱é¿ããŸãã
ãã¹ãã£ã³ã°ãšæé»çãªè©³çŽ°åºŠïŒ`&`ãçç¥ãããå ŽåïŒ
`&`ãæç€ºçã«äœ¿çšããã«ã»ã¬ã¯ã¿ããã¹ããããšãããã¯æé»çã«åå«çµååãšããŠæ±ãããŸãããã¹ããããã«ãŒã«ã®è©³çŽ°åºŠã¯ã芪ã®è©³çŽ°åºŠãšãã¹ããããã»ã¬ã¯ã¿ã®è©³çŽ°åºŠã®åèšã«ãªããŸãã
äŸïŒ
.container { /* 詳现床: (0,1,0) */
color: black;
p { /* .container p ã«è§£æ±º */
color: blue; /* 詳现床: (0,1,0) + (0,0,1) = (0,1,1) */
}
.text-highlight { /* .container .text-highlight ã«è§£æ±º */
background-color: yellow; /* 詳现床: (0,1,0) + (0,1,0) = (0,2,0) */
}
}
ãã®å Žåããã¹ããããã«ãŒã«ã¯èŠªã®è©³çŽ°åºŠã«èªèº«ã®è©³çŽ°åºŠã远å ããŸããããã¯ãåŸæ¥ã®CSSã®çµåã»ã¬ã¯ã¿ã®åäœãšãŸã£ããåãã§ããããã«é©ãã¯ãããŸããã
ãã¹ãã£ã³ã°ãšæç€ºçãªè©³çŽ°åºŠïŒ`&`ã䜿çšãããå ŽåïŒ
`&`ã䜿çšãããšãããã¯èŠªã»ã¬ã¯ã¿æååå šäœãæç€ºçã«è¡šããŸããããã¯éèŠã§ãããªããªãããã¹ããããã»ã¬ã¯ã¿ã®è©³çŽ°åºŠã¯ã*解決ããã芪ã»ã¬ã¯ã¿å šäœ*ãšãã¹ããããéšåãèšè¿°ããå Žåã®ããã«èšç®ãããããã§ãã
äŸïŒ
.btn { /* 詳现床: (0,1,0) */
padding: 10px;
&:hover { /* .btn:hover ã«è§£æ±º */
background-color: lightgrey; /* 詳现床: (0,1,0) + (0,1,0) = (0,2,0) */
}
&.active { /* .btn.active ã«è§£æ±º */
border: 2px solid blue; /* 詳现床: (0,1,0) + (0,1,0) = (0,2,0) */
}
}
ããã¯æåŸ ã©ããã«åäœããŸãïŒã¯ã©ã¹`.btn`ãæ¬äŒŒã¯ã©ã¹`:hover`ãå¥ã®ã¯ã©ã¹`.active`ãšçµã¿åãããããšãåœç¶ãªãã詳现床ãé«ããªããŸãã
埮åŠãªéãã¯ãè€éãªèŠªã»ã¬ã¯ã¿ã§çããŸãã`&`èšå·ã¯ã芪ã®å®å šãªè©³çŽ°åºŠã广çã«åŒãç¶ããŸããããã¯åŒ·åãªæ©èœã§ãããæ³šææ·±ã管çããªããšäºæãã¬è©³çŽ°åºŠã®åé¡ã®åå ã«ããªãåŸãŸãã
èæ ®ããŠãã ããïŒ
#app .main-content .post-article { /* 詳现床: (1,2,1) */
font-family: sans-serif;
& p {
/* ãã㯠(#app .main-content .post-article p) ã§ã¯ãªã */
/* ãã㯠(#app .main-content .post-article) p ã§ãã */
/* 詳现床: (1,2,1) + (0,0,1) = (1,2,2) */
line-height: 1.6;
}
}
ããã§ã®`p`ã®åã«ãã`&`ã¯ã`p`ãæé»çã«`.post-article`å ã®`p`ãã¿ãŒã²ããã«ãããããéåžžã¯çç¥ãããŸããããããæç€ºçã«äœ¿çšãããå Žåã`& p`ã¯ã`&`ãå®å šãªèŠªã»ã¬ã¯ã¿æååã衚ãããšã瀺ã以äžã«ãåå«ã»ã¬ã¯ã¿ã®åºç€ãšãªãåäœã詳现床èšç®ãææçŸ©ãªæ¹æ³ã§å€æŽããŸãããäžå¿çãªã«ãŒã«ã¯å€ãããŸããïŒãã¹ããããã»ã¬ã¯ã¿ãçµååã§åºåãããåå«ã§*ãªã*å Žåã`&`ã䜿çšããããã®è©³çŽ°åºŠã¯*解決ããã*芪ã®è©³çŽ°åºŠã«å ç®ãããŸãã
`&`ã®æåã«é¢ããéèŠãªãã€ã³ãïŒW3C仿§ããïŒïŒ ãã¹ããããã»ã¬ã¯ã¿ã§`&`ã䜿çšããããšãããã¯*芪ã»ã¬ã¯ã¿*ã«çœ®ãæããããŸããããã¯ã詳现床ã芪ã»ã¬ã¯ã¿æååãæžãããã®åŸã«ãã¹ããããéšåãä»ãå ãããã®ããã«èšç®ãããããšãæå³ããŸããããã¯ã`&`ã詳现床èšç®ã®ããã«èŠªã»ã¬ã¯ã¿ã®*æåŸã®éšå*ã®ã¿ã衚ãããšãå€ãã£ãããªããã»ããµã®æåãšã¯æ ¹æ¬çã«ç°ãªããŸãïŒäŸïŒSassã®`.foo &`ã®è§£éãããã§èŠªã`.foo .bar`ã®å Žåã`&`ã¯`.bar`ã«è§£æ±ºãããå¯èœæ§ãããïŒããã€ãã£ãCSSãã¹ãã£ã³ã°ã®`&`ã¯åžžã«*å®å šãª*芪ã»ã¬ã¯ã¿ã衚ããŸããããã¯ãããªããã»ããµããç§»è¡ããéçºè ã«ãšã£ãŠéèŠãªéãã§ãã
æç¢ºã«ããããã®äŸïŒ
.component-wrapper .my-component { /* 芪ã®è©³çŽ°åºŠ: (0,2,0) */
background-color: lavender;
.item { /* .component-wrapper .my-component .item ã«è§£æ±ºã詳现床: (0,3,0) */
padding: 10px;
}
&.highlighted { /* .component-wrapper .my-component.highlighted ã«è§£æ±ºã詳现床: (0,3,0) */
border: 2px solid purple;
}
> .inner-item { /* .component-wrapper .my-component > .inner-item ã«è§£æ±ºã詳现床: (0,3,0) */
color: indigo;
}
}
ãã¹ãŠã®å Žåã«ãããŠããã¹ããããã»ã¬ã¯ã¿ã®è©³çŽ°åºŠã¯ããã©ãããªæ§é ã§æžãããå Žåãšåæ§ã«ã解決ãããã³ã³ããŒãã³ããã环ç©ãããŸãããã¹ãã£ã³ã°ã®äž»ãªäŸ¡å€ã¯*æ§æ*ã§ãããæšæºCSSãçµåã»ã¬ã¯ã¿ãéããŠãã§ã«èš±å¯ããŠããç¯å²ãè¶ ããŠè©³çŽ°åºŠã¹ã³ã¢ãæäœããæ°ããæ¹æ³ã§ã¯ãããŸããã
äžè¬çãªèœãšã穎ãšãã®åé¿æ¹æ³
- éå°ãªãã¹ãã£ã³ã°ïŒ ãã¹ãã£ã³ã°ã¯æ§æãæ¹åããŸãããéåºŠã«æ·±ããã¹ãã£ã³ã°ïŒäŸïŒ5ã¬ãã«ä»¥äžïŒã¯éåžžã«é«ã詳现床ã«ã€ãªãããåŸã§ã¹ã¿ã€ã«ãäžæžãããã®ãå°é£ã«ãªãå¯èœæ§ããããŸããããã¯ããªããã»ããµã§ãäžè¬çãªåé¡ã§ãããã¹ãã£ã³ã°ã®ã¬ãã«ã¯æå°éã«æããã»ãšãã©ã®ã³ã³ããŒãã³ãã§çæ³çã«ã¯2ã3ã¬ãã«ã®æ·±ãã«ããŠãã ããã
- 詳现床æŠäºïŒ é«ã詳现床ã¯ããå ·äœçãªã»ã¬ã¯ã¿ã«ã€ãªããããããäžæžãããã«ã¯ããã«é«ã詳现床ãå¿ èŠã«ãªããŸããããã¯ã詳现床æŠäºãã«çºå±ããå¯èœæ§ããããéçºè ã¯`!important`ãé床ã«è€éãªã»ã¬ã¯ã¿ã«é Œãããã«ãªããã¹ã¿ã€ã«ã·ãŒããè匱ã§ç¶æãã«ãããªããŸãã誀çšãããšããã¹ãã£ã³ã°ã¯ãã®åé¡ãæªåãããå¯èœæ§ããããŸãã
- æå³ããªã詳现床ã®å¢å ïŒ åžžã«èŠªã»ã¬ã¯ã¿ã®è©³çŽ°åºŠãæèããŠãã ããããã¹ããããšãæ¬è³ªçã«ããå ·äœçãªã»ã¬ã¯ã¿ãäœæããŠããããšã«ãªããŸãã芪ããã§ã«éåžžã«å ·äœçã§ããå ŽåïŒäŸïŒIDïŒããã¹ããããã«ãŒã«ã¯ãã®é«ã詳现床ãç¶æ¿ããä»ã®å Žæã§ããäžè¬çãªã¹ã¿ã€ã«ãé©çšããããšãããšãã«åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
- ããªããã»ããµã®æåãšã®æ··åïŒ ããªããã»ããµã®ãã¹ãã£ã³ã°ã«æ £ããŠããéçºè ã¯ã`&`ãåãããã«åäœãããšæ³å®ãããããããŸãããåè¿°ã®ããã«ããã€ãã£ãCSSã®`&`ã¯åžžã«*å®å šãª*芪ã»ã¬ã¯ã¿ã衚ããããã¯äžéšã®ããªããã»ããµã®è§£éãšæ¯èŒããŠè©³çŽ°åºŠãã©ã®ããã«èªèãããããšããç¹ã§éèŠãªéãã«ãªãå¯èœæ§ããããŸãã
ãããã®èœãšã穎ãé¿ããããã«ãåžžã«ã»ã¬ã¯ã¿ã®è©³çŽ°åºŠãèæ ®ããŠãã ããã詳现床ãåæããããŒã«ã䜿çšããã³ã³ããŒãã³ãã«ã¯IDãããã¯ã©ã¹ããŒã¹ã®ã»ã¬ã¯ã¿ãåªå ããŠãã ãããæåãã詳现床ã管çããããã«CSSã¢ãŒããã¯ãã£ãèšç»ããBEMïŒBlock, Element, ModifierïŒããŠãŒãã£ãªãã£ãã¡ãŒã¹ãCSSã®ãããªæ¹æ³è«ã䜿çšããããšãèããããŸãããããã¯ãã¹ãã£ã³ã°ãšå¹æçã«çµã¿åãããããšãã§ããŸãã
广çãªCSSãã¹ãã£ã³ã°ã®ããã®ãã¹ããã©ã¯ãã£ã¹
CSSãã¹ãã£ã³ã°ã®åãçã«æŽ»çšããããã«ã¯ãã°ããŒãã«ãªéçºããŒã éã§ã®ä¿å®æ§ãã¹ã±ãŒã©ããªãã£ãã³ã©ãã¬ãŒã·ã§ã³ãä¿é²ããäžé£ã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãããšãäžå¯æ¬ ã§ãã
- éå°ã«ãã¹ãããªãïŒé©åãªãã©ã³ã¹ãåãïŒ é åçã§ããã3ã4ã¬ãã«ä»¥äžã®ãã¹ãã¯é¿ããŠãã ããããããè¶ ãããšãå¯èªæ§ãäœäžããè©³çŽ°åºŠãæ±ãã«ãããªãå¯èœæ§ããããŸãããã¹ãã£ã³ã°ã¯ãã³ã³ããŒãã³ãã«é¢é£ããã¹ã¿ã€ã«ãã°ã«ãŒãåããæ¹æ³ãšããŠèããDOMæ§é å šäœãå®å šã«åæ ããããã®ã§ã¯ãªããšèããŠãã ãããéåžžã«æ·±ãDOMæ§é ã®å Žåã¯ãã³ã³ããŒãã³ããåå²ããããããã©ãŒãã³ã¹ãšä¿å®æ§ã®ããã«çŽæ¥ã¯ã©ã¹ã»ã¬ã¯ã¿ã䜿çšããããšãæ€èšããŠãã ããã
- å¯èªæ§ãåªå ããïŒã¯ãªãŒã³ã«ä¿ã€ïŒ ãã¹ãã£ã³ã°ã®äž»ãªç®æšã¯ãå¯èªæ§ãåäžãããããšã§ãããã¹ãããããããã¯ãæç¢ºã«ã€ã³ãã³ããããè«ççã«ã°ã«ãŒãåãããŠããããšã確èªããŠãã ãããè€éãªãã¹ãæ§é ãç¹å®ã®æå³ã説æããããã«ãå¿ èŠã«å¿ããŠã³ã¡ã³ãã远å ããŠãã ããã
- è«ççãªã°ã«ãŒãåïŒé¢é£ããã¹ã¿ã€ã«ããã¹ãããïŒ èŠªã³ã³ããŒãã³ããŸãã¯ãã®çŽäžã®åã«çŽæ¥é¢é£ããã«ãŒã«ã®ã¿ããã¹ãããŠãã ãããå šãç¡é¢ä¿ãªèŠçŽ ã®ã¹ã¿ã€ã«ã¯ãã¹ãããã«æ®ãã¹ãã§ããããšãã°ããã¿ã³ã®ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ããªç¶æ ïŒ`:hover`ã`:focus`ïŒã¯ããã¿ã³ã®ã¡ã€ã³ã«ãŒã«å ã«ãã¹ããããã¹ãã§ãã
- äžè²«ããã€ã³ãã³ãïŒæçæ§ã®åäžïŒ ãã¹ããããã«ãŒã«ã«ã¯äžè²«ããã€ã³ãã³ãã¹ã¿ã€ã«ïŒäŸïŒ2ã¹ããŒã¹ãŸãã¯4ã¹ããŒã¹ïŒãæ¡çšããŠãã ããããã®èŠèŠçãªéå±€ã¯ãã»ã¬ã¯ã¿éã®é¢ä¿ãè¿ éã«çè§£ããããã«äžå¯æ¬ ã§ããããã¯ãç°ãªãåäººãæ§ã ãªã³ãŒãã£ã³ã°ã¹ã¿ã€ã«ã®å¥œã¿ãæã€å¯èœæ§ãããã°ããŒãã«ã«åæ£ããããŒã ã§ç¹ã«éèŠã§ããçµ±äžãããã¹ã¿ã€ã«ã¬ã€ãã圹ç«ã¡ãŸãã
-
ã¢ãžã¥ã©ãŒãã¶ã€ã³ïŒã³ã³ããŒãã³ãã§ãã¹ãã£ã³ã°ã䜿çšããïŒ CSSãã¹ãã£ã³ã°ã¯ãã³ã³ããŒãã³ãããŒã¹ã®ã¢ãŒããã¯ãã£ãšçµã¿åããããšç䟡ãçºæ®ããŸããåã³ã³ããŒãã³ãã«ãããã¬ãã«ã®ã¯ã©ã¹ïŒäŸïŒ`.card`ã`.modal`ã`.user-avatar`ïŒãå®çŸ©ãããã®å
éšã®ãã¹ãŠã®èŠçŽ ãã¯ã©ã¹ãããã³ç¶æ
ã®ã¹ã¿ã€ã«ããã®èŠªã®äžã«ãã¹ãããŸããããã«ãããã¹ã¿ã€ã«ãã«ãã»ã«åãããã°ããŒãã«ãªã¹ã¿ã€ã«ã®ç«¶åã®ãªã¹ã¯ãæžå°ããŸãã
.product-card { /* åºæ¬ã¹ã¿ã€ã« */ &__image { /* ç»ååºæã®ã¹ã¿ã€ã« */ } &__title { /* ã¿ã€ãã«åºæã®ã¹ã¿ã€ã« */ } &--featured { /* 修食åã¹ã¿ã€ã« */ } }äžèšã®äŸã§ã¯ãæç¢ºã«ããããã«BEMã®ãããªåœåèŠåã䜿çšããŠããŸããããã€ãã£ãCSSãã¹ãã£ã³ã°ã¯ããåçŽãªã³ã³ããŒãã³ãã¯ã©ã¹åã§ãã·ãŒã ã¬ã¹ã«æ©èœããŸãã
- ã³ã©ãã¬ãŒã·ã§ã³ïŒããŒã ã¬ã€ãã©ã€ã³ã®ç¢ºç«ïŒ åãã³ãŒãããŒã¹ã§äœæ¥ããããŒã ã«ãšã£ãŠãCSSãã¹ãã£ã³ã°ã®äœ¿çšã«é¢ããæç¢ºãªã¬ã€ãã©ã€ã³ã確ç«ããããšãæãéèŠã§ãããã¹ãã£ã³ã°ã®æ·±ãã®å¶éã`&`ã®äœ¿çšææããã¹ããããã«ãŒã«å ã§ã®ã¡ãã£ã¢ã¯ãšãªã®æ±ãã«ã€ããŠè©±ãåããåæããŠãã ãããå ±éã®çè§£ã¯ãäžæŽåãä¿å®æ§ã®é çã®çš®ãé²ããŸãã
- ãã©ãŠã¶ã®äºææ§ïŒãµããŒããšãã©ãŒã«ããã¯ã®ç¢ºèªïŒ ãã€ãã£ãCSSãã¹ãã£ã³ã°ã¯åºç¯ãªãã©ãŠã¶ãµããŒããç²åŸãã€ã€ãããŸãããã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã®çŸåšã®äºææ§ã確èªããããšãäžå¯æ¬ ã§ããCan I use...ã®ãããªããŒã«ã¯ææ°ã®æ å ±ãæäŸããŸããå€ããã©ãŠã¶ã®ããåºç¯ãªãµããŒããå¿ èŠãªç°å¢ã§ã¯ããã©ãããªCSSã«ã³ã³ãã€ã«ããCSSããªããã»ããµã䜿çšãããããã©ãŒã«ããã¯ã¡ã«ããºã ãšããŠãã¹ãã£ã³ã°ãã©ã°ã€ã³ãåããPostCSSãå®è£ ããããšãæ€èšããŠãã ããããã¹ãæ©èœã䜿çšããèœåã®äœããã©ãŠã¶ã«ã¯ããã·ã³ãã«ãªãã©ãããªä»£æ¿ææ®µãæäŸããããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãæŠç¥ãæ¡çšã§ããŸãã
- ã³ã³ããã¹ãã¹ã¿ã€ã« vs. ã°ããŒãã«ã¹ã¿ã€ã«ïŒ ã³ã³ããã¹ãã¹ã¿ã€ã«ïŒç¹å®ã®ã³ã³ããŒãã³ãå *ã®ã¿*é©çšãããã¹ã¿ã€ã«ïŒã«ã¯ãã¹ãã£ã³ã°ã䜿çšããŠãã ãããã°ããŒãã«ã¹ã¿ã€ã«ïŒäŸïŒ`body`ã`h1`ã®ããã©ã«ãã¹ã¿ã€ã«ããŠãŒãã£ãªãã£ã¯ã©ã¹ïŒã¯ã¹ã¿ã€ã«ã·ãŒãã®ã«ãŒãã¬ãã«ã«ä¿ã¡ãç°¡åã«èŠã€ããããããã«ãããã¹ããããã³ã³ããã¹ãããæå³ããé«ã詳现床ãç¶æ¿ããªãããã«ããŠãã ããã
é«åºŠãªãã¹ãã£ã³ã°æè¡ãšèæ ®äºé
ã«ã¹ã¿ã ããããã£ïŒCSS倿°ïŒãšã®ãã¹ãã£ã³ã°
CSSã«ã¹ã¿ã ããããã£ïŒå€æ°ïŒã¯ãåçã§ä¿å®æ§ã®é«ãã¹ã¿ã€ã«ãäœæããããã®çµ¶å€§ãªåãæäŸããŸãããããã¯ãã¹ãã£ã³ã°ãšå¹æçã«çµã¿åãããããšã§ãã³ã³ããŒãã³ãåºæã®å€æ°ãå®çŸ©ãããããã¹ããããã³ã³ããã¹ãå ã§ã°ããŒãã«å€æ°ã倿Žãããã§ããŸãïŒ
.theme-dark {
--text-color: #eee;
--background-color: #333;
.card {
background-color: var(--background-color);
color: var(--text-color);
a {
color: var(--accent-color, lightblue); /* accent-color ã®ãã©ãŒã«ããã¯å€ */
}
&.featured {
--card-border-color: gold; /* ããŒã«ã«å€æ°ãå®çŸ© */
border-color: var(--card-border-color);
}
}
}
ãã®ã¢ãããŒãã«ããã匷åãªããŒãèšå®ãšã«ã¹ã¿ãã€ãºãå¯èœã«ãªããè²ããã©ã³ããééãDOMã®ããŸããŸãªã¬ãã«ã§èª¿æŽã§ãããããã¹ã¿ã€ã«ã·ãŒãã¯å€æ§ãªãã¶ã€ã³èŠä»¶ãæåç aesthetics ã«é«åºŠã«å¯Ÿå¿ã§ããŸãã
ã«ã¹ã±ãŒãã¬ã€ã€ãŒïŒ`@layer`ïŒãšã®çµã¿åãã
CSSã«ã¹ã±ãŒãã¬ã€ã€ãŒïŒ`@layer`ïŒææ¡ã«ãããéçºè ã¯CSSã«ã¹ã±ãŒãã®ã¬ã€ã€ãŒã®é åºãæç€ºçã«å®çŸ©ã§ããã¹ã¿ã€ã«ã®åªå é äœããã现ããå¶åŸ¡ã§ããŸãããã¹ãã£ã³ã°ã¯ã«ã¹ã±ãŒãã¬ã€ã€ãŒå ã§äœ¿çšããŠãã¬ã€ã€ãŒã®é åºãç¶æããªããã³ã³ããŒãã³ãåºæã®ã¹ã¿ã€ã«ãããã«æŽçã§ããŸãïŒ
@layer base, components, utilities;
@layer components {
.button {
background-color: blue;
color: white;
&:hover {
background-color: darkblue;
}
&.outline {
background-color: transparent;
border: 1px solid blue;
color: blue;
}
}
}
ãã®çµã¿åããã¯ãæ§æïŒãã¹ãã£ã³ã°çµç±ïŒãšåªå é äœïŒã¬ã€ã€ãŒçµç±ïŒã®äž¡æ¹ã«å¯ŸããŠæ¯é¡ã®ãªãå¶åŸ¡ãæäŸããéåžžã«å ç¢ã§äºæž¬å¯èœãªã¹ã¿ã€ã«ã·ãŒãã«ã€ãªãããŸããããã¯ãããŸããŸãªã°ããŒãã«ããŒã ã§äœ¿çšãããå€§èŠæš¡ãªã¢ããªã±ãŒã·ã§ã³ããã¶ã€ã³ã·ã¹ãã ã«ãšã£ãŠäžå¯æ¬ ã§ãã
Shadow DOMãšWeb Componentsã®æäœ
Shadow DOMãå©çšããWeb Componentsã¯ãã«ãã»ã«åãããåå©çšå¯èœãªUIèŠçŽ ãæäŸããŸããShadow DOMå ã®ã¹ã¿ã€ã«ã¯éåžžããã®ã³ã³ããŒãã³ãã«ã¹ã³ãŒããããŸããCSSãã¹ãã£ã³ã°ã¯ãã³ã³ããŒãã³ãã®å éšã¹ã¿ã€ã«ã·ãŒãã®ã³ã³ããã¹ãå ã§äŸç¶ãšããŠé©çšãããã³ã³ããŒãã³ãã®å éšæ§é ã«åãæ§æäžã®å©ç¹ãæäŸããŸãã
Shadow DOMãçªãæããããã¹ãããã«åœ±é¿ãäžãããããå¿ èŠãããã¹ã¿ã€ã«ã«ã€ããŠã¯ãCSSããŒãïŒ`::part()`ïŒãšã«ã¹ã¿ã ããããã£ãå€éšããã®ã«ã¹ã¿ãã€ãºã®äž»èŠãªã¡ã«ããºã ãšããŠæ®ããŸããããã§ã®ãã¹ãã£ã³ã°ã®åœ¹å²ã¯ãShadow DOMã®*å éš*ã®ã¹ã¿ã€ã«ãæŽçããã³ã³ããŒãã³ãã®å éšCSSãããã¯ãªãŒã³ã«ããããšã§ãã
æ·±ããã¹ãã£ã³ã°ã®ããã©ãŒãã³ã¹ãžã®åœ±é¿
æ·±ããã¹ãã£ã³ã°ã¯ã»ã¬ã¯ã¿ã®è©³çŽ°åºŠãé«ããå¯èœæ§ããããŸãããçŸä»£ã®ãã©ãŠã¶ãšã³ãžã³ã¯é«åºŠã«æé©åãããŠããŸããæ·±ããã¹ããããã»ã¬ã¯ã¿ãã¬ã³ããªã³ã°ã«äžããããã©ãŒãã³ã¹ãžã®åœ±é¿ã¯ãè€éãªã¬ã€ã¢ãŠããé床ã®ãªãããŒãéå¹çãªJavaScriptãªã©ã®ä»ã®èŠå ãšæ¯èŒããŠãéåžžã¯ãããããã§ããæ·±ããã¹ãã£ã³ã°ã«é¢ããäž»ãªæžå¿µã¯ãä¿å®æ§ãšè©³çŽ°åºŠã®ç®¡çã§ãããçã®ã¬ã³ããªã³ã°é床ã§ã¯ãããŸãããããããé床ã«è€éãŸãã¯åé·ãªã»ã¬ã¯ã¿ãé¿ããããšã¯ãåžžã«äžè¬çãªå¹çæ§ãšæçæ§ã®ããã®è¯ãç¿æ £ã§ãã
CSSã®æªæ¥ïŒåæ¹ãžã®äžç¥
ãã€ãã£ãCSSãã¹ãã£ã³ã°ã®å°å ¥ã¯éèŠãªãã€ã«ã¹ããŒã³ã§ãããå ç¢ã§åŒ·åãªã¹ã¿ã€ãªã³ã°èšèªãšããŠã®CSSã®ç¶ç¶çãªé²åã瀺ããŠããŸããããã¯ãéçºè ã«ã¹ã¿ã€ãªã³ã°ã¡ã«ããºã ã«å¯ŸããããçŽæ¥çãªå¶åŸ¡ãäžããåºæ¬çãªã¿ã¹ã¯ã«å¯Ÿããå€éšããŒã«ãžã®äŸåãæžãããšããæé·åŸåãåæ ããŠããŸãã
CSSã¯ãŒãã³ã°ã°ã«ãŒãã¯ããã¹ãã£ã³ã°ã®ãããªã匷åãããé«åºŠãªã»ã¬ã¯ã¿æ©èœãããã«ã¯ã«ã¹ã±ãŒãã管çããããã®ããæŽç·Žãããæ¹æ³ãªã©ãæ°ããæ©èœã®æ¢æ±ãšæšæºåãç¶ããŠããŸããäžçäžã®éçºè ããã®ã³ãã¥ããã£ãã£ãŒãããã¯ã¯ããããã®å°æ¥ã®ä»æ§ã圢æããäžã§éèŠãªåœ¹å²ãæãããCSSãçŸä»£çã§ãã€ãããã¯ãªãŠã§ãäœéšãæ§ç¯ãããšããçŸå®äžçã®èŠæ±ã«å¿ãç¶ããããšãä¿èšŒããŸãã
ãã¹ãã£ã³ã°ã®ãããªãã€ãã£ãCSSæ©èœãåãå ¥ããããšã¯ãããæšæºåãããçžäºéçšå¯èœãªãŠã§ãã«è²¢ç®ããããšãæå³ããŸããããã¯éçºã¯ãŒã¯ãããŒãåçåããæ°èŠåå ¥è ã®åŠç¿æ²ç·ãæžããããŠã§ãéçºãããåºç¯ãªåœéçãªèŽè¡ã«ãšã£ãŠããã¢ã¯ã»ã¹ããããããŸãã
çµè«ïŒäžçäžã®éçºè ã«åãäžãã
CSSãã¹ãã«ãŒã«ã¯åãªãç³è¡£æ§æä»¥äžã®ãã®ã§ãããç§ãã¡ã®ã¹ã¿ã€ã«ã·ãŒãã«æ°ããã¬ãã«ã®æ§æãå¯èªæ§ãå¹çæ§ãããããåºæ¬çãªæ©èœåŒ·åã§ããéçºè ãé¢é£ããã¹ã¿ã€ã«ãçŽæçã«ã°ã«ãŒãåã§ããããã«ããããšã§ãè€éãªUIã³ã³ããŒãã³ãã®ç®¡çãç°¡çŽ åããåé·æ§ãæžãããããåçåãããéçºããã»ã¹ãä¿é²ããŸãã
詳现床ãžã®åœ±é¿ã¯ãç¹ã«`&`ã®æç€ºçãªäœ¿çšã«ãããŠæ éãªèæ ®ãå¿ èŠã§ããããã®ä»çµã¿ãçè§£ããããšã§ãéçºè ã¯ããäºæž¬å¯èœã§ä¿å®æ§ã®é«ãCSSãæžãããšãã§ããŸããããªããã»ããµã«äŸåãããã¹ãã£ã³ã°ãããã€ãã£ããã©ãŠã¶ãµããŒããžã®ç§»è¡ã¯ãããæèœã§èªå·±å®çµããCSSãšã³ã·ã¹ãã ãžã®ç§»è¡ã瀺ãéèŠãªç¬éã§ãã
äžçäžã®ããã³ããšã³ããããã§ãã·ã§ãã«ã«ãšã£ãŠãCSSãã¹ãã£ã³ã°ãåãå ¥ããããšã¯ãããå ç¢ã§ã¹ã±ãŒã©ãã«ã§ã楜ãããŠãŒã¶ãŒäœéšãäœãåºãããã®äžæ©ã§ãããããã®ãã¹ããã©ã¯ãã£ã¹ãæ¡çšãã詳现床ã®ãã¥ã¢ã³ã¹ãçè§£ããããšã§ããã®åŒ·åãªæ©èœã掻çšããŠãæã®è©Šç·Žã«èããäžçäžã®å€æ§ãªãŠãŒã¶ãŒããŒãºã«å¿ãããããã¯ãªãŒã³ã§å¹ççã§ãä¿å®ãããããŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã