この記事は
電車の発車案内板をHTMLとCSSだけで作ってみる～試行錯誤編その2～
の継続記事です。

前回の反省点

・ドットの精度が低かった
・もう少しドットだけでフォントを生成する手法を勉強したほうがいい

ということでした。

ドットの研究

Photoshopで、700%まで拡大し、見てみると、画像のふちに原色より薄い領域があることに気が付きました。

やってみる

今回は「品」だけで。

CSS(Scss)

style2.scss



 $pixel:2px;
 $pixel2:2px; 
.guide{
  width:400px;
  height: 50px;
  background:#000;
  
  &-inner{
    width:280px;
    height: 40px;
    display:flex;
  } 
  &-text-char1{
    width:40px;
    height: 40px;
   display:grid;
   grid-template-columns:1fr repeat(16,$pixel) 1fr;
   grid-template-rows:repeat(25,$pixel2);
   grid-template-areas:
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... w01 g01 g01 g01 g01 g01 g01 g01 g01 g01 w02 w02 ... ... ..."
      "... ... ... w03 g02 g02 w04 w04 w04 w04 w04 g03 g03 w05 w05 ... ... ..."
      "... ... ... w06 g04 g04 w07 ... ... ... ... w08 g05 g05 w09 ... ... ..."
      "... ... ... w10 g06 g06 w11 ... ... ... ... w12 g07 g07 w13 ... ... ..."
      "... ... ... w14 g08 g08 w15 ... ... ... ... w16 g09 g09 w17 ... ... ..."
      "... ... ... w18 g10 g10 w19 ... ... ... ... w20 g11 g11 w21 ... ... ..."
      "... ... ... w22 g12 g12 w24 ... ... ... ... w25 g13 g13 w26 ... ... ..."
      "... ... ... w27 g14 g14 g14 g14 g14 g14 g14 g14 g14 g14 w28 ... ... ..."
      "... ... ... w29 g15 g15 g15 g15 g15 g15 g15 g15 g15 g15 w30 ... ... ..."
      "... ... ... ... w31 w31 w31 w31 w31 w31 w31 w31 w31 w31 ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..."  
      "... ... w32 g16 g16 g16 g16 ... ... ... w33 g17 g17 g17 g17 w34 ... ..."
      "... ... w35 g18 w36 w36 g19 ... ... ... w37 g20 w38 w38 g21 w39 ... ..."
      "... ... w40 g22 ... ... g23 ... ... ... w41 g24 ... ... g25 w42 ... ..."
      "... ... w43 g26 ... ... g27 ... ... ... w44 g28 ... ... g29 w45 ... ..."
      "... ... w46 g30 ... ... g31 ... ... ... w47 g32 ... ... g33 w48 ... ..."
      "... ... w49 g34 ... ... g35 ... ... ... w50 g36 ... ... g37 w51 ... ..."
      "... ... w52 g38 g38 g38 g38 ... ... ... w53 g39 g39 g39 g39 w54 ... ..."
      "... ... w55 g40 g40 g40 g40 ... ... ... w56 g41 g41 g41 g41 w57 ... ..."
      "... ... w58 g42 ... ... g43 ... ... ... w59 g44 ... ... g45 w60 ... ..."
      ;
}

  @for $i from 1 through 67 { 
  .char1-guide__dotg#{$i}{ 
    @if $i < 10 { 
      grid-area:g0#{$i}; 
      } @else { 
      grid-area:g#{$i}; 
    } 
     background-color:#08eb0e; 
   }
   
  .char1-guide__dotw#{$i}{ 
    @if $i < 10 { 
      grid-area:w0#{$i}; 
      } @else { 
      grid-area:w#{$i}; 
    } 
     background-color:#d8fad8; 
   }
  }
}

薄い領域をw~にし、2色構成で、作ってみました。（並び作るの大変でした・・）

HTML(ejs)

dotsample.ejs


<html>
    <head>
        <link rel="stylesheet" href="./css/style2.css"> 
    </head>
    <body>
       
        <div class="guide">
            <div class="guide-inner">
                <div class="guide-text-char1">
                    <% pix1 = 1; %>
                    <% pix2 = 1; %>
                     <% for(i=0; i<=45; i++){ %>
                     <% for(j=1; j<=25; j++){ %>
                          <div class="char1-guide__dotg<%= pix1 %>"></div>
                       <% } pix1++; }  %>
                      <% for(k=0; k<=60; k++){ %>
                       <% for(l=1; l<=25; l++){ %>
                          <div class="char1-guide__dotw<%= pix2 %>"></div>
                       <% } pix2++; }  %>
                </div>
            </div>
        </div>
    </body>
</html>

2種類あるので、変数やfor文もその数増えます。

※サーバーに負荷がかかりそうなので一旦削除しました。別な方法考えます。

やっぱり、精度が低いです・・

反省点

・ドットの文字の原理をもう少し勉強したほうがいい
・制度を上げる訓練をした方がいい

このあと

しばらく1週間置いて研究し続けてみたいと思います。