2

ふと、 html 5 で単純なゲームを作ってみたくなりました。その際、盤面の描写はなるべく css でやってみようと思っています。

以下の画像は、Wikipedia の囲碁のページから取得してきたものです。

碁盤の例:
碁盤

今、この画像を css でどうにか描写できないかな、と考えています。イメージ、それぞれの石の置くところを div で block として表現して、それぞれのブロックを、以下の様な分割した画像で描写していけば、ひとまず実現できそうだ、と思ってはいるのですが、ここでふと、このようなブロックの中に線があるようなブロックは、css で描写できるものなのだろうか、と疑問に思いました。

goban-plus goban-t

質問

  • 拡大・縮小しても表示が荒れない
  • ブロックの中にシンプルなオブジェクト(今回は直線を表す四角形)を何個か表示

を実現したいときに、 css でこれを実現する方法はありますか?

0

1 件の回答 1

3
  1. まず、線を描くために linear-gradient 関数を用いて、黒色 (線の色) のみで構成されるグラデーションを作成します。基本的にはわかりやすさのため、線 1 本に 1 つの linear-gradient 関数を使います。

    body {
      display: flex;
      gap: 10px;
    }
    
    div {
      width: 80px;
      height: 80px;
    }
    
    .grid1 {
      background-image: 
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
    }
    
    .grid2 {
      background-image: 
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
    }
    <div class="grid1"></div>
    <div class="grid2"></div>

  2. 手順 1 の状態では要素の背景全体が黒色で塗りつぶされてしまうため、 background-size プロパティで描画する線の太さおよび長さを指定します。 background-size プロパティは複数の値をカンマ区切りで指定することが出来ます。background-size プロパティと background-image プロパティに指定された値は、指定された順番で対応付いています。

    body {
      display: flex;
      gap: 10px;
    }
    
    div {
      width: 80px;
      height: 80px;
    }
    
    .grid1 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 100%, 100% 3px;
    }
    
    .grid2 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 50%, 100% 3px;
    }
    <div class="grid1"></div>
    <div class="grid2"></div>

  3. コードスニペットを実行するとわかる通り、手順 2 を実施した後も要素全体は黒色になります。これは背景画像をどのように敷き詰めるかを指定する background-repeat プロパティの初期値が repeat であり、要素にスペースがある限りそのスペースが黒色の線で埋められてしまうからです。そこで background-repeat プロパティに no-repeat を指定し、背景画像の繰り返しを行わないようにします。

    body {
      display: flex;
      gap: 10px;
    }
    
    div {
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
    }
    
    .grid1 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 100%, 100% 3px;
    }
    
    .grid2 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 50%, 100% 3px;
    }
    <div class="grid1"></div>
    <div class="grid2"></div>

  4. 最後に background-position プロパティを用いて、それぞれの線の位置を調整します。

    body {
      display: flex;
      gap: 10px;
    }
    
    div {
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
    }
    
    .grid1 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 100%, 100% 3px;
      background-position: center center;
    }
    
    .grid2 {
      background-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to right, #000, #000);
      background-size: 3px 50%, 100% 3px;
      background-position: center bottom, center center;
    }
    <div class="grid1"></div>
    <div class="grid2"></div>

  5. あとは背景色などの装飾を加えれば完成です。完成版のコードは次のようになっています:

body {
  display: flex;
  gap: 10px;
}

div {
  width: 80px;
  height: 80px;
  background-color: #dcb462;
  background-repeat: no-repeat;
}

.grid1 {
  background-image:
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to right, #000, #000);
  background-size: 3px 100%, 100% 3px;
  background-position: center center;
}

.grid2 {
  background-image:
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to right, #000, #000);
  background-size: 3px 50%, 100% 3px;
  background-position: center bottom, center center;
}
<div class="grid1"></div>
<div class="grid2"></div>

1
  • グラデーションは UA によって描画されるため、質問文中の「拡大・縮小しても表示が荒れない」についても解決出来ていると思います。
    – supa
    Commented 2020年12月28日 9:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。