72858


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

以下の画像は、[Wikipedia
の囲碁のページ](https://ja.wikipedia.org/wiki/%E5%9B%B2%E7%A2%81)から取得してきたものです。

碁盤の例:  
[![碁盤](https://i.stack.imgur.com/rqdXHm.png)](https://i.stack.imgur.com/rqdXHm.png)

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

[![goban-
plus](https://i.stack.imgur.com/QpqSe.png)](https://i.stack.imgur.com/QpqSe.png)
[![goban-t](https://i.stack.imgur.com/lG2ue.png)](https://i.stack.imgur.com/lG2ue.png)

# 質問

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

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


CC BY-SA 4.0
2020-12-23T06:28:19.673
72834
2020-12-24T08:33:15.300
2020-12-23T06:57:41.213
3060
754
question
css
碁盤を css で描写することはできる?


  1. まず、線を描くために [`linear-gradient` 関数](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient\(\))を用いて、黒色 (線の色) のみで構成されるグラデーションを作成します。基本的にはわかりやすさのため、線 1 本に 1 つの `linear-gradient` 関数を使います。
[code]     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);
    }
[/code]

[code]     <div class="grid1"></div>

    <div class="grid2"></div>
[/code]

  2. 手順 1 の状態では要素の背景全体が黒色で塗りつぶされてしまうため、 [`background-size` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background-size)で描画する線の太さおよび長さを指定します。 `background-size` プロパティは複数の値をカンマ区切りで指定することが出来ます。`background-size` プロパティと [`background-image` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background-image)に指定された値は、指定された順番で対応付いています。
[code]     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;
    }
[/code]

[code]     <div class="grid1"></div>

    <div class="grid2"></div>
[/code]

  3. コードスニペットを実行するとわかる通り、手順 2 を実施した後も要素全体は黒色になります。これは背景画像をどのように敷き詰めるかを指定する [`background-repeat` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat)の初期値が `repeat` であり、要素にスペースがある限りそのスペースが黒色の線で埋められてしまうからです。そこで `background-repeat` プロパティに `no-repeat` を指定し、背景画像の繰り返しを行わないようにします。
[code]     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;
    }
[/code]

[code]     <div class="grid1"></div>

    <div class="grid2"></div>
[/code]

  4. 最後に [`background-position` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background-position)を用いて、それぞれの線の位置を調整します。
[code]     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;
    }
[/code]

[code]     <div class="grid1"></div>

    <div class="grid2"></div>
[/code]

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

[code]

    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;
    }
[/code]

[code]

    <div class="grid1"></div>
    <div class="grid2"></div>
[/code]


CC BY-SA 4.0
2020-12-24T08:33:15.300
72858
2020-12-24T08:33:15.300
32986
72834
answer