まえがき
この記事は電車の発車案内板をHTMLとCSSだけ作ってみる～実験編～の続きの記事です。
こんにちは。前回は実験ということで、HTMLとCSSだけでドットを組み合わせた電車の発車案内板を作るため実験をしてみましたがしょぼかったので、
まだ途中ではありますが改善点を書きたいと思います。
前回の反省点
・勢いで作ったのでソースコードの解説がなかった
・高速道路みたいなフォントになってしまった
・「川」のはねの部分の再現性がひどい
こういった点が挙げられます。
まずは、改善中のコードのの解説から行きたいと思います
CSS（Scss)
style.scss
$pixel:2px;
$pixel2:2px;
.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(13,$pixel) 1fr;
grid-template-rows:repeat(18,$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:#08eb0e;
@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(12,$pixel) 1fr;
grid-template-rows:repeat(19,$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 g28 ... ... ... g29 ... ... ... g30 ... ... ..."
"... ... ... g31 ... ... ... ... g32 ... ... ... g33 ... ... ..."
"... ... ... g34 ... ... ... ... g35 ... ... ... g36 ... ... ..."
"... ... g37 g37 ... ... ... ... g38 ... ... ... g39 ... ... ..."
"... ... g40 ... ... ... ... ... g41 ... ... ... g42 ... ... ..."
"... ... g43 ... ... ... ... ... g44 ... ... ... g45 ... ... ..."
"... ... ... ... ... ... ... ... g46 ... ... ... g47 ... ... ..."
"... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."
;
}
@for $i from 1 through 47 {
.char2-guide__dot#{$i}{
background-color:#08eb0e;
@if $i < 10 {
grid-area:g0#{$i};
} @else {
grid-area:g#{$i};
}
}
}
}
この記事を参考に
https://ebifry.jp/css/useless-css-grid
「品」という文字は13×18,「川」いう文字は12×19で作り、
for文で、各g~にgrid-areaを設定していきます。
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<=18; j++){ %>
<div class="char1-guide__dot<%= pix %>"></div>
<% }
pix++;
%>
<% } %>
</div>
<div class="guide-text-char2">
<% pix = 1; %>
<% for(i=0; i<=47; i++){ %>
<% for(j=1; j<=19; j++){ %>
<div class="char2-guide__dot<%= pix %>"></div>
<% }
pix++;
%>
<% } %>
</div>
</div>
</div>
</body>
</html>
iには、g~のナンバー分、jには、grid-template-rows:repeat(x,$pixel2);で設定したxの部分の数字が入ります。
pix変数には付与するクラスのナンバーが出力され、jが1増えるごとにインクリメントされる仕組みになっています。
結果と反省点その２
結果
色をJR風に変えてみました。
※サーバーに負荷がかかりそうなので一旦削除しました。別な方法考えます。
反省点
・明朝体がまだ再現しきれてない
・ドットが荒い
今後の課題
JRの案内板の様に明朝体をドットで再現するにはまだまだ時間がかかりそうですが、
まずは、高速道路のフォントを脱せるように、柔らかいフォントの再現を狙ってみたいと思います。