駅にある電車の発車案内板があると思います（LEDのもの）。これをHTMLとCSSで書けないか試してみる実験です。
禁止事項
HTMLに文字をのっけて、backgroundで調整するやり方はNG。
どうやるのか
こちらのブログを参考に、display:gridでやる方法です。
https://ebifry.jp/css/useless-css-grid
何を考えたか
基本的にDIVが大量生産されるので、力業でやるのはつらいものがあります。そこで、出たのがejs。
テンプレートエンジンです。
題材
いきなり「籠原」とか「新千歳空港」とかは難易度が高いので簡単な品川で。
やってみる
HTML(ejs)
guidedot.ejs
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="guide">
<div class="guide-inner">
<div class="guide-text-char1">
<% pix = 1; %>
<% for(i=0; i<=30; i++){ %>
<% for(j=1; j<=13; j++){ %>
<div class="char1-guide__dot<%= pix %>"></div>
<% }
pix++;
%>
<% } %>
</div>
<div class="guide-text-char2">
<% pix = 1; %>
<% for(i=0; i<=45; i++){ %>
<% for(j=1; j<=13; j++){ %>
<div class="char2-guide__dot<%= pix %>"></div>
<% }
pix++;
%>
<% } %>
</div>
</div>
</div>
</body>
</html>
2次元配列っぽい書き方で書いています。
CSS(Scss)
$pixel:3px;
$pixel2:3px;
.guide{
width:400px;
height: 50px;
background:#000;
&-inner{
width:280px;
height: 40px;
padding:5px;
display:flex;
}
&-text-char1{
width:40px;
height: 40px;
display:grid;
grid-template-columns:1fr repeat(10,$pixel) 1fr;
grid-template-rows:repeat(13,$pixel2);
grid-template-areas:
"... ... ... ... g01 g01 g01 g01 ... ... ... ..."
"... ... ... ... g02 ... ... g03 ... ... ... ..."
"... ... ... ... g04 ... ... g05 ... ... ... ..."
"... ... ... ... g06 ... ... g07 ... ... ... ..."
"... ... ... ... g08 ... ... g09 ... ... ... ..."
"... ... ... ... g10 g10 g10 g10 ... ... ... ..."
"... ... ... ... ... ... ... ... ... ... ... ..."
"... g11 g11 g11 g11 ... g12 g12 g12 g12 ... ..."
"... g13 ... ... g14 ... g15 ... ... g16 ... ..."
"... g17 ... ... g18 ... g19 ... ... g20 ... ..."
"... g21 ... ... g22 ... g23 ... ... g24 ... ..."
"... g25 ... ... g26 ... g27 ... ... g28 ... ..."
"... g29 g29 g29 g29 ... g30 g30 g30 g30 ... ...";
}
@for $i from 1 through 30 {
.char1-guide__dot#{$i}{
background-color:#afa570;
@if $i < 10 {
grid-area:g0#{$i};
} @else {
grid-area:g#{$i};
}
}
}
&-text-char2{
width:40px;
height: 40px;
display:grid;
grid-template-columns:1fr repeat(10,$pixel) 1fr;
grid-template-rows:repeat(14,$pixel2);
grid-template-areas:
"... ... g01 ... ... g02 ... ... g03 ... ... ..."
"... ... g04 ... ... g05 ... ... g06 ... ... ..."
"... ... g07 ... ... g08 ... ... g09 ... ... ..."
"... ... g10 ... ... g11 ... ... g12 ... ... ..."
"... ... g13 ... ... g14 ... ... g15 ... ... ..."
"... ... g16 ... ... g17 ... ... g18 ... ... ..."
"... ... g19 ... ... g20 ... ... g21 ... ... ..."
"... ... g22 ... ... g23 ... ... g24 ... ... ..."
"... ... g25 ... ... g26 ... ... g27 ... ... ..."
"... g28 g29 ... ... g30 ... ... g31 ... ... ..."
"... g32 g33 ... ... g34 ... ... g35 ... ... ..."
"... g36 ... ... ... g37 ... ... g38 ... ... ..."
"g39 g40 ... ... ... g41 ... ... g42 ... ... ..."
"g43 ... ... ... ... g44 ... ... g45 ... ... ..."
}
@for $i from 1 through 45 {
.char2-guide__dot#{$i}{
background-color:#afa570;
@if $i < 10 {
grid-area:g0#{$i};
} @else {
grid-area:g#{$i};
}
}
}
}
ここではまったのは、grid-template-areas。g~で指定するのですが、g~は四角になっていないと認識されずエラーが出てしまいます。
結果
※サーバーに負荷がかかりそうなので一旦削除しました。別な方法考えます。
うーん。ちょっと工夫が必要です。
この後
しばらく研究が必要なので、まずは実験速報として、書かせていただきました。改善出来たら、また投稿したいと思います。