CSS Gridã®ååä»ããšãªã¢ã®ç¶æ¿ãšèŠªã°ãªãããšãªã¢ã®äŒæãæ¢æ±ãå®è·µçãªäŸãšãã¹ããã©ã¯ãã£ã¹ã§ãã¬ã¹ãã³ã·ãã§ä¿å®æ§ã®é«ãã¬ã€ã¢ãŠããäœæããæ¹æ³ãåŠã³ãŸãã
CSS Gridã®ååä»ããšãªã¢ã®ç¶æ¿ïŒèŠªã°ãªãããšãªã¢ã®äŒæããã¹ã¿ãŒãã
CSS Grid Layoutã¯ãè€éã§ã¬ã¹ãã³ã·ããªWebã¬ã€ã¢ãŠããäœæããããã®åŒ·åãªããŒã«ã§ãããã®æã䟿å©ãªæ©èœã®1ã€ã«ãååä»ããšãªã¢ãå®çŸ©ããæ©èœããããŸããããã«ãããã°ãªããå ã®èŠçŽ ãç°¡åã«é 眮ã§ããŸããååä»ããšãªã¢ã®åºæ¬ã¯ç°¡åã§ããããã¹ããããã°ãªãããç¹ã«ç¶æ¿ãä»ããŠã©ã®ããã«çžäºäœçšããããçè§£ããããšã§ãCSSã³ãŒãã®æè»æ§ãšä¿å®æ§ãããã«é«ããããšãã§ããŸãããã®èšäºã§ã¯ãCSS Gridã®ååä»ããšãªã¢ã®ç¶æ¿ãšèŠªã°ãªãããšãªã¢ã®äŒæã«ã€ããŠæ·±ãæãäžãããã®é«åºŠãªãã¯ããã¯ããã¹ã¿ãŒããããã®å®è·µçãªäŸãšãã¹ããã©ã¯ãã£ã¹ãæäŸããŸãã
CSS Gridã®ååä»ããšãªã¢ãšã¯ïŒ
ç¶æ¿ã«ã€ããŠæãäžããåã«ãCSS Gridã®ååä»ããšãªã¢ãäœã§ããããç°¡åã«åŸ©ç¿ããŸããããååä»ããšãªã¢ãšã¯ãgrid-template-areasããããã£ã䜿çšããŠå®çŸ©ããã°ãªããå
ã®é åã§ãããããã®ãšãªã¢ã«ååãå²ãåœãŠãåèŠçŽ ã®grid-areaããããã£ã䜿çšããŠããããã®ååä»ãé åå
ã«é
眮ããŸãã
以äžã«ç°¡åãªäŸã瀺ããŸãïŒ
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: lightblue;
padding: 10px;
}
.nav {
grid-area: nav;
background-color: lightgreen;
padding: 10px;
}
.main {
grid-area: main;
background-color: lightcoral;
padding: 10px;
}
.aside {
grid-area: aside;
background-color: lightyellow;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: lightgray;
padding: 10px;
}
ãã®äŸã§ã¯ãã³ã³ããèŠçŽ ã3ã€ã®åãš3ã€ã®è¡ãæã€ã°ãªãããšããŠå®çŸ©ãããŠããŸããgrid-template-areasããããã£ã¯ãheaderãnavãmainãasideãfooterãšãã5ã€ã®ååä»ããšãªã¢ãå®çŸ©ããŸãããããŠãååèŠçŽ ã¯grid-areaããããã£ã䜿çšããŠã察å¿ãããšãªã¢ã«é
眮ãããŸãã
ã°ãªãããšãªã¢ã®ç¶æ¿ãçè§£ãã
ããŠããã¹ããããã°ãªãããããå Žåã«äœãèµ·ãããèããŠã¿ãŸããããCSS Gridã®éèŠãªåŽé¢ã¯ãgrid-template-areasã®å®£èšãããã©ã«ãã§ã¯ç¶æ¿ãããªãããšã§ããããã¯ã芪ã°ãªããã§ååä»ããšãªã¢ã宣èšããŠãããããã®ååãåã°ãªããã«èªåçã«é©çšãããããã§ã¯ãªãããšãæå³ããŸãã
ããããèŠçŽ ãïŒèŠªã°ãªããå
ã®ïŒã°ãªããã¢ã€ãã ã§ãããªãããïŒèªèº«ã®åäŸãã¡ã®ããã®ïŒã°ãªããã³ã³ãããšããŠå®çŸ©ãããšããæŠå¿µãæŽ»çšããããšã§ã匷åãªãã¹ããããã¬ã€ã¢ãŠããäœæã§ããŸããåã°ãªããã¢ã€ãã èªèº«ãã°ãªããã³ã³ããã§ããå Žåãç¬èªã®grid-template-areasãå®çŸ©ã§ããŸãã芪ã°ãªããã®ãšãªã¢åãšåã°ãªããã®ãšãªã¢åã¯å®å
šã«ç¬ç«ããŠããŸããååä»ããšãªã¢ã®å®çŸ©ãDOMããªãŒã®äžã«æž¡ãçŽæ¥çãªç¶æ¿ã¡ã«ããºã ã¯ãããŸããã
ç§ãã¡ãããã§æ¬åœã«è°è«ããŠãããç¶æ¿ããšã¯ãèŠèŠçãªäžè²«æ§ãšã¬ã€ã¢ãŠãæ§é ãç¶æããããã«ã芪ã°ãªããã®ååä»ããšãªã¢æ§é ãåã°ãªããå
ã§äŒæãŸãã¯ãã©ãŒãªã³ã°ã§ãããšããèãæ¹ã§ããããã¯ã芪ã®ãšãªã¢é
眮ã«äžèŽããããã«åã®grid-template-areasãåå®çŸ©ããããšã«ãã£ãŠéæãããŸãã
芪ã°ãªãããšãªã¢ã®äŒæïŒã¬ã€ã¢ãŠãæ§é ã®è€è£œ
ç§ãã¡ãæ¢æ±ããäž»ãªãã¯ããã¯ã¯ã芪ã°ãªãããšãªã¢ã®äŒæã§ããããã¯ãåã°ãªããã®grid-template-areasã芪ã°ãªããã®æ§é ãšäžèŽããããã«æç€ºçã«åå®çŸ©ããããšãå«ã¿ãŸããããã«ãããCSS Gridã®æè»æ§ã享åããªããããŠã§ããµã€ãã®ç°ãªãã»ã¯ã·ã§ã³éã§äžè²«ããã«ãã¯ã¢ã³ããã£ãŒã«ãäœæããæ¹æ³ãæäŸãããŸãã
äŸïŒã°ãªããå ã®ã«ãŒãã³ã³ããŒãã³ã
CSS Gridã§å®çŸ©ãããããŒãžã¬ã€ã¢ãŠããããããã®ã°ãªãããšãªã¢ã®1ã€ã«è€æ°ã®ã«ãŒãã³ã³ããŒãã³ãã衚瀺ããããšããŸããåã«ãŒãã«ã¯ããããŒãã³ã³ãã³ããããã¿ãŒããããããŒãžå šäœã®ã¬ã€ã¢ãŠããšåæ§ã®æ¹æ³ã§é 眮ãããã¹ãã§ãã
.page-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 20px;
}
.page-header {
grid-area: header;
background-color: #eee;
padding: 15px;
text-align: center;
}
.page-nav {
grid-area: nav;
background-color: #ddd;
padding: 15px;
}
.page-main {
grid-area: main;
display: grid; /* mainãšãªã¢ãã°ãªããã³ã³ããã«ãã */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* ã¬ã¹ãã³ã·ããªã«ãŒãã¬ã€ã¢ãŠã */
gap: 20px;
padding: 15px;
}
.page-aside {
grid-area: aside;
background-color: #ddd;
padding: 15px;
}
.page-footer {
grid-area: footer;
background-color: #eee;
padding: 15px;
text-align: center;
}
/* ã«ãŒãã³ã³ããŒãã³ãã®ã¹ã¿ã€ã« */
.card {
display: grid; /* ã«ãŒããã°ãªããã³ã³ããã«ãã */
grid-template-columns: 1fr; /* ã«ãŒãå
ã®åäžã«ã©ã ã¬ã€ã¢ãŠã */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"card-header"
"card-content"
"card-footer";
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
}
.card-header {
grid-area: card-header;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
.card-content {
grid-area: card-content;
margin-bottom: 10px;
}
.card-footer {
grid-area: card-footer;
text-align: right;
border-top: 1px solid #ccc;
padding-top: 5px;
}
ããããŒ
ã«ãŒãããã㌠1
ããã«ã«ãŒãã®ã³ã³ãã³ããå
¥ããŸãã
ã«ãŒãããã㌠2
ã³ã³ãã³ãã®ããå¥ã®ã«ãŒãã
ãã®äŸã§ã¯ã.page-mainèªäœãã«ãŒãã³ã³ããŒãã³ãã衚瀺ããã°ãªããã³ã³ããã§ããå.cardèŠçŽ ãã°ãªããã³ã³ããã§ãã.cardã芪ã®.page-containerãšã¯ç°ãªããšãªã¢åïŒcard-header, card-content, card-footerïŒã䜿çšããŠå
éšã¬ã€ã¢ãŠããå®çŸ©ããããã«grid-template-areasã䜿çšããŠããããšã«æ³šç®ããŠãã ããããããã®ãšãªã¢ã¯å®å
šã«ç¬ç«ããŠããŸãã
æ§é ã®ãã©ãŒãªã³ã°ïŒãµã€ãããŒã®äŸ
次ã«ãmainãšãªã¢å
ã§ã芪ã°ãªããæ§é ããã©ãŒãªã³ã°ããã»ã¯ã·ã§ã³ãäœæããããšæ³åããŠã¿ãŠãã ãããäŸãã°ãç¹å®ã®èšäºå
ã«ãµã€ãããŒãäœæããå Žåã§ãã芪ã®ã°ãªããæ§é ãäŒæãããããšã§ãããå®çŸã§ããŸãïŒ
.article-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"article-header article-header"
"article-nav article-main"
"article-footer article-footer";
gap: 10px;
}
.article-header {
grid-area: article-header;
background-color: #f0f0f0;
padding: 10px;
}
.article-nav {
grid-area: article-nav;
background-color: #e0e0e0;
padding: 10px;
}
.article-main {
grid-area: article-main;
padding: 10px;
}
.article-footer {
grid-area: article-footer;
background-color: #f0f0f0;
padding: 10px;
}
HTMLã§ã¯ã次ã®ããã«ãªããŸãïŒ
èšäºããããŒ
èšäºã³ã³ãã³ã
ããã§ã¯ã.article-containerãäžè¬çãªããŒãžã¬ã€ã¢ãŠãæ§é ïŒããããŒãããã²ãŒã·ã§ã³ãã¡ã€ã³ãããã¿ãŒïŒãæš¡å£ããããã«grid-template-areasãåå®çŸ©ããŠããŸããååã¯ç°ãªããŸããïŒåãªãheaderã§ã¯ãªãarticle-headerïŒããã®é
眮ã¯èŠªã®ã¬ã€ã¢ãŠãã«äŒŒãŠããŸãã
芪ã°ãªãããšãªã¢äŒæã®ãã¹ããã©ã¯ãã£ã¹
- æå³ã®ããåœåèŠåã䜿çšããïŒ ãcard-ãããarticle-ãã®ãããªãã¬ãã£ãã¯ã¹ã䜿çšããå¿ èŠã¯ãããŸããããåŒ·ãæšå¥šãããŸããååä»ããšãªã¢ã®ã³ã³ããã¹ããæç¢ºã«ç€ºãååãéžæããŠãã ãããããã«ãããæ··ä¹±ãé²ããCSSã®å¯èªæ§ãé«ããŸãã
- äžè²«æ§ãç¶æããïŒ ã°ãªãããšãªã¢ãäŒæãããéã«ã¯ãå šäœçãªæ§é ã®äžè²«æ§ãç®æããŠãã ããã芪ã°ãªããã«ããããŒãã¡ã€ã³ã³ã³ãã³ããããã¿ãŒãããå Žåãå ·äœçãªã³ã³ãã³ããç°ãªã£ãŠããŠããåã°ãªããã§ãã®æ§é ããã©ãŒãªã³ã°ããããã«åªããŠãã ããã
- æ·±ããã¹ããé¿ããïŒ CSS Gridã¯æ·±ããã¹ãã蚱容ããŸãããé床ãªãã¹ãã¯ã³ãŒãã®çè§£ãšä¿å®ãå°é£ã«ããå¯èœæ§ããããŸããè€éãªã·ããªãªã§ã¯ãããã·ã³ãã«ãªã¬ã€ã¢ãŠãæè¡ãé©åãããããªãããšãæ€èšããŠãã ããã
- ã³ãŒããææžåããïŒ ç¹ã«ååä»ããšãªã¢ãäŒææè¡ã䜿çšããå Žåã¯ãCSS Gridã¬ã€ã¢ãŠããæç¢ºã«ææžåããŠãã ãããåãšãªã¢ã®ç®çãšããããå šäœçãªã¬ã€ã¢ãŠããšã©ã®ããã«é¢é£ããŠãããã説æããŸããããã¯ãå€§èŠæš¡ãªãããžã§ã¯ããããŒã ã§äœæ¥ããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
- CSS倿°ïŒã«ã¹ã¿ã ããããã£ïŒã䜿çšããïŒ ããè€éãªã¬ã€ã¢ãŠãã§ã¯ãã°ãªãããšãªã¢åãä¿åããããã«CSS倿°ã䜿çšããããšãæ€èšããŠãã ãããããã«ãããååã1ãæã§ç°¡åã«æŽæ°ããã³ãŒãå šäœã«åæ ãããããšãã§ããŸãã
CSS倿°ã®äœ¿çšäŸïŒ
:root {
--header-area: header;
--nav-area: nav;
--main-area: main;
--aside-area: aside;
--footer-area: footer;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"var(--header-area) var(--header-area) var(--header-area)"
"var(--nav-area) var(--main-area) var(--aside-area)"
"var(--footer-area) var(--footer-area) var(--footer-area)";
gap: 10px;
}
.header {
grid-area: var(--header-area);
}
/* ä»ã®èŠçŽ ãåæ§ */
ããã¯çŽæ¥å€ãäŒæãããããã§ã¯ãããŸããããã¹ã¿ã€ã«ã·ãŒãå šäœã«åæ ãããã°ãªãããšãªã¢åã1ã€ã®å Žæã§ç°¡åã«å€æŽã§ããããã«ããŸããããããŒãšãªã¢ã®ååããheaderããããtopãã«å€æŽããå¿ èŠãããå Žåã1ãæã§è¡ãããšãã§ããŸããããã¯ãã³ãŒãã®å¯èªæ§ãšä¿å®æ§ã®ããã«å¿ã«çããŠããã¹ãè¯ãç¿æ £ã§ãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
CSS Gridã䜿çšããéã¯ãåžžã«ã¢ã¯ã»ã·ããªãã£ã念é ã«çœ®ããŠãã ãããèŠèŠçãªè¡šçŸã«é¢ä¿ãªããã¬ã€ã¢ãŠããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠãå©çšå¯èœã§çè§£ãããããã®ã§ããããšã確èªããŠãã ããã以äžã«ãäž»èŠãªã¢ã¯ã»ã·ããªãã£ã®èæ ®äºé ãæããŸãïŒ
- ã»ãã³ãã£ãã¯HTMLïŒ
<header>ã<nav>ã<main>ã<aside>ã<footer>ãªã©ã®ã»ãã³ãã£ãã¯HTMLèŠçŽ ã䜿çšããŠãã³ã³ãã³ãã«æ§é ãšæå³ãæäŸããŸããããã¯ãã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ãã¬ã€ã¢ãŠããçè§£ããã®ã«åœ¹ç«ã¡ãŸãã - è«ççãªãœãŒã¹é åºïŒ HTMLãœãŒã¹å ã®èŠçŽ ã®é åºã¯ãäžè¬çã«ã³ã³ãã³ãã®è«ççãªèªã¿é ãåæ ããŠããã¹ãã§ããCSS Gridã¯èŠçŽ ãèŠèŠçã«åé 眮ã§ããŸããããœãŒã¹é åºã¯æ¯æŽæè¡ã«äŸåãããŠãŒã¶ãŒã«ãšã£ãŠãæå³ãéãããã®ã§ãªããã°ãªããŸããã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒ ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ïŒãªã³ã¯ããã¿ã³ããã©ãŒã ãã£ãŒã«ããªã©ïŒãããŒããŒãããã²ãŒã·ã§ã³ã§ã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ããã
tabindex屿§ã䜿çšããŠãèŠçŽ ããã©ãŒã«ã¹ãåãåãé åºãå¶åŸ¡ããŸãã - è²ã®ã³ã³ãã©ã¹ãïŒ ããã¹ããšèæ¯ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããæäŸããäœèŠåã®ãŠãŒã¶ãŒãã³ã³ãã³ããèªããããã«ããŸããè²ã®çµã¿åãããã¢ã¯ã»ã·ããªãã£åºæºïŒWCAGïŒãæºãããŠããããšã確èªããããã«ãã«ã©ãŒã³ã³ãã©ã¹ããã§ãã«ãŒã䜿çšããŠãã ããã
- ã¬ã¹ãã³ã·ããã¶ã€ã³ïŒ ããŸããŸãªç»é¢ãµã€ãºãããã€ã¹ã«é©å¿ããã¬ã¹ãã³ã·ããªã¬ã€ã¢ãŠããäœæããŸããã¡ãã£ã¢ã¯ãšãªã䜿çšããŠã°ãªããã¬ã€ã¢ãŠãã調æŽããå°ããªç»é¢ã§ãã³ã³ãã³ããå©çšå¯èœã§ããç¶ããããã«ããŸãã
çµè«
CSS Gridã®ååä»ããšãªã¢ã®ç¶æ¿ãšèŠªã°ãªãããšãªã¢ã®äŒæã¯ãæè»ã§ä¿å®æ§ã®é«ãWebã¬ã€ã¢ãŠããäœæããããã®åŒ·åãªãã¯ããã¯ã§ããååä»ããšãªã¢ããã¹ããããã°ãªãããšã©ã®ããã«çžäºäœçšããããçè§£ããããšã§ãäžè²«ããã«ãã¯ã¢ã³ããã£ãŒã«ãæã€è€éãªã¬ã€ã¢ãŠããäœæã§ããŸããæå³ã®ããåœåèŠåã䜿çšããäžè²«æ§ãä¿ã¡ãæ·±ããã¹ããé¿ããã³ãŒããææžåããããšãå¿ããªãã§ãã ããããããã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãCSS Gridã®åãæŽ»çšããŠãäžçäžã®ãŠãŒã¶ãŒã®ããã«èŠäºã§ã¢ã¯ã»ã¹ããããWebäœéšãåµé ããããšãã§ããŸãã