Result
CSS Gridを使ったガントチャートの実装例です
css
body,html { background-color: #cddade; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.wrapper { max-width: 1200px; min-width: 700px; margin: 0 auto; padding: 40px;}.gantt { display: grid; border: 0; border-radius: 12px; position: relative; overflow: hidden; box-sizing: border-box; }.gantt__row { display: grid; grid-template-columns: 150px 1fr; background-color: #fff;}.gantt__row:nth-child(odd) { background-color: #f5f5f5;}.gantt__row:nth-child(odd) .gantt__row-first { background-color: #f5f5f5;}.gantt__row:nth-child(3) .gantt__row-bars { border-top: 0;}.gantt__row:nth-child(3) .gantt__row-first { border-top: 0;}.gantt__row--empty { background-color: #ffd6d2 !important; z-index: 1;}.gantt__row--empty .gantt__row-first { border-width: 1px 1px 0 0;}.gantt__row--lines { position: absolute; height: 100%; width: 100%; background-color: transparent; grid-template-columns: 150px repeat(12, 1fr);}.gantt__row--lines span { display: block; border-right: 1px solid rgba(0, 0, 0, 0.1);}.gantt__row--lines span.marker { background-color: rgba(10, 52, 68, 0.13); z-index: 2;}.gantt__row--lines:after { grid-row: 1; grid-column: 0; background-color: #1688b345; z-index: 2; height: 100%;}.gantt__row--months { color: #fff; background-color: #0a3444 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1); grid-template-columns: 150px repeat(12, 1fr);}.gantt__row--months .gantt__row-first { border-top: 0 !important; background-color: #0a3444 !important;}.gantt__row--months span { text-align: center; font-size: 13px; align-self: center; font-weight: bold; padding: 20px 0;}.gantt__row-first { background-color: #fff; border-width: 1px 0 0 0; border-color: rgba(0, 0, 0, 0.1); border-style: solid; padding: 15px 0; font-size: 13px; font-weight: bold; text-align: center;}.gantt__row-bars { list-style: none; display: grid; padding: 9px 0; margin: 0; grid-template-columns: repeat(12, 1fr); grid-gap: 8px 0; border-top: 1px solid rgba(221, 221, 221, 0.8);}.gantt__row-bars li { text-align: left; min-height: 15px; background-color: #55de84; padding: 5px 12px; color: #fff; overflow: hidden; position: relative; cursor: pointer; border-radius: 20px;}.gantt__row-bars li:before, .gantt__row-bars li:after { content: ""; height: 100%; top: 0; z-index: 4; position: absolute; background-color: rgba(0, 0, 0, 0.3);}.gantt__row-bars li:before { left: 0;}.gantt__row-bars li:after { right: 0;} |
html
<div class="wrapper"> <div class="gantt"> <div class="gantt__row gantt__row--months"> <div class="gantt__row-first"></div> <span>1月</span><span>2月</span><span>3月</span> <span>4月</span><span>5月</span><span>6月</span> <span>7月</span><span>8月</span><span>9月</span> <span>10月</span><span>11月</span> <span>12月</span> </div> <div class="gantt__row gantt__row--lines" data-month="5"> <span></span><span></span><span></span> <span></span><span></span><span></span> <span></span><span class="marker"></span><span></span> <span></span><span></span><span></span> </div> <div class="gantt__row"> <div class="gantt__row-first"> 佐藤 </div> <ul class="gantt__row-bars"> <li style="grid-column: 4/11; background-color: #2ecaac;">ディレクション</li> </ul> </div> <div class="gantt__row gantt__row--empty"> ・ ・ ・ |
チャートはマークアップで管理しています。
grid-column: 4/11;等とすれば4～11月まで設定できる仕組み。
