html - 数独グリッドのスタイリング

Question

数独パズル クリエーター / ソルバーを作成しましたが、CSS でスタイルを設定するのに少し助けが必要です。

通常、これらは次のようにスタイル設定されます。

.

私が使用しているいくつかのネーミング。

セル- 単一の数値を含む個々のセル。

ボックス- それぞれ 3 x 3 セルを含む 9 つのボックスの 1 つ

グリッド- 9x9 のプレイエリア全体。

私のhtmlは私のルビー/シナトラアプリによって部分的に生成され(少なくとも繰り返しDIVはそうです)、次のように構造化されています:

#game {
  margin-left: auto;
  margin-right: auto;
  width: 360px;
}
.cell input {
  display: inline-block;
  float: left;
  width: 40px;
  height: 40px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  font-size: 15px;
}

<form action="/" method="post">
  <div id="game">
    <div class="cell">
      <input name="cell[0]" type="text" maxlength="1" value=<%=val%>>
    </div>

    <div class="cell">
      <input name="cell[1]" type="text" maxlength="1" value=<%=val%>>
    </div>

    <!-- ... -->

    <div class="cell">
      <input name="cell[79]" type="text" maxlength="1" value=<%=val%>>
    </div>

    <div class="cell">
      <input name="cell[80]" type="text" maxlength="1" value=<%=val%>>
    </div>
  </div>
</form>

これにより、最初のセル (0) が左上隅にあり、左から右に 1 行ずつ、右下の最後のセル (80) に移動する基本的な 9x9 グリッドを作成できます。

難しいのは、グリッドが行と列だけでなく 9 つの大きなボックスに分割されているように見えるように、各セルをスタイリングすることです。このグリッドを参照してください。

現在、いくつかのオプションがあります。

1. 数独コードを完全に書き直して、DIV を別の順序で描画するようにします。グループ化 DIV で各ボックスをラップします。これにより、CSS は比較的単純になります。これは大きな変化であり、私は本当にこの道をたどりたくありません.

2. 各セルを手動で識別し、81 個のセルすべてに対応する CSS を記述します。上記よりは良いですが、まだボールが痛く、特に滑らかではありません.

CSS スタイルを動的に生成するオプションがあります (パフォーマンスは問題になりません)。私が探しているのは、(線形インデックス 0..80 に基づいて) 各セルのスタイルを決定するアルゴリズムを考案するための助けです。

たとえば、一番上の行 (0..8) のすべてのセルには、太い上枠 (3px) と細い下枠 (1px) があります。行 3 (18..26) のすべてのセルの下部には太い境界線があり、それらのセルの上部には細い境界線があります。最初の列のすべてのセルの左側には太い境界線があり、それらのセルの右側には細い境界線があります。等々。

Answer 1

以下は、 HTML5 CRのtable要素セクションの例を少し変更したもので、colgroup列tbodyのグループ化と行のグループ化に を使用する方法を示しています。このグループ化により、セルの周囲とは異なる境界線をグループの周囲に設定できます。

<style>
table { border-collapse: collapse; font-family: Calibri, sans-serif; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<table>
  <caption>Sudoku of the day</caption>
  <colgroup><col><col><col></colgroup>
  <colgroup><col><col><col></colgroup>
  <colgroup><col><col><col></colgroup>
  <tbody>
   <tr> <td>1 <td>  <td>3 <td>6 <td>  <td>4 <td>7 <td>  <td>9
   <tr> <td>  <td>2 <td>  <td>  <td>9 <td>  <td>  <td>1 <td>
   <tr> <td>7 <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>6
  <tbody>
   <tr> <td>2 <td>  <td>4 <td>  <td>3 <td>  <td>9 <td>  <td>8
   <tr> <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>
   <tr> <td>5 <td>  <td>  <td>9 <td>  <td>7 <td>  <td>  <td>1
  <tbody>
   <tr> <td>6 <td>  <td>  <td>  <td>5 <td>  <td>  <td>  <td>2
   <tr> <td>  <td>  <td>  <td>  <td>7 <td>  <td>  <td>  <td>
   <tr> <td>9 <td>  <td>  <td>8 <td>  <td>2 <td>  <td>  <td>5
</table>

Answer 2

Jukka K. Korpela の回答とMike の回答を組み合わせ、jQuery マジックを少し追加することで、2 つのソリューションを作成しました。

$(document).ready(function () {
    var data = [
        1, 0, 3, 6, 0, 4, 7, 0, 9, // 0x0
        0, 2, 0, 0, 9, 0, 0, 1, 0, // 0x1
        7, 0, 0, 0, 0, 0, 0, 0, 6, // 0x2
        2, 0, 4, 0, 3, 0, 9, 0, 8, // 1x0
        0, 0, 0, 0, 0, 0, 0, 0, 0, // 1x1
        5, 0, 0, 9, 0, 7, 0, 0, 1, // 1x2
        6, 0, 0, 0, 5, 0, 0, 0, 2, // 2x0
        0, 0, 0, 0, 7, 0, 0, 0, 0, // 2x1
        9, 0, 0, 8, 0, 2, 0, 0, 5  // 2x2
    ];

    // Build page content.
    $('body').append($('<div>').addClass('wrapper')
        .append($('<div>').addClass('col')
          .append($('<h1>').html('First Method'))
          .append(generateSudokuGrid()))
        .append($('<div>').addClass('col')
          .append($('<h1>').html('Second Method'))
          .append(generateSudokuGrid2())));

    // Populate grids with data.
    $('table[class^="sudoku"]').each(function (index, grid) {
        populateGrid($(grid), data);
    });
});

function populateGrid(grid, data) {
    grid.find('td').each(function (index, td) {
        $(td).text(data[index] || '');
    });
}

/* First Method */
function generateSudokuGrid(data) {
    return $('<table>').append(multiPush(3, function () {
        return $('<colgroup>').append(multiPush(3, function () {
            return $('<col>');
        }));
    })).append(multiPush(3, function () {
        return $('<tbody>').append(multiPush(3, function () {
            return $('<tr>').append(multiPush(9, function () {
                return $('<td>');
            }));
        }));
    })).addClass('sudoku');
}

/* Second Method */
function generateSudokuGrid2(data) {
    return $('<table>').append(multiPush(9, function () {
        return $('<tr>').append(multiPush(9, function () {
            return $('<td>');
        }));
    })).addClass('sudoku2');
}

function multiPush(count, func, scope) {
    var arr = [];
    for (var i = 0; i < count; i++) {
        arr.push(func.call(scope, i));
    }
    return arr;
}

/* First Method */
table.sudoku {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku colgroup, tbody {
    border: solid medium;
}
.sudoku td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Second Method */
table.sudoku2 {
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
}
.sudoku2 tr:nth-of-type(3n) {
    border-bottom: solid medium;
}
.sudoku2 td:nth-of-type(3n) {
    border-right: solid medium;
}
.sudoku2 td {
    border: solid thin;
    height: 1.4em;
    width: 1.4em;
    text-align: center;
    padding: 0;
}

/* Presentation Formatting [Ignore] */
table[class^="sudoku"] {
  margin: 0 auto;
}
.wrapper {
  width: 100%;
}
.col {
  display: inline-block;
  width: 50%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

次のように数独ボードを作成します。

<section class="sudoku">
       <div class="sudoku-row">
           <div class="sudoku-square">
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value"></a></div>
              <div class="cell"><a class="cell-value "></a></div> 
          </div>

LESSは次のようになります

@cell-size: 50px;
.sudoku {
  margin: 70px auto;  
  width: 478px;
  background: #777;    
  border: 2px solid #000;
  box-shadow: 15px 15px 20px #111;

  .sudoku-row {    
    .sudoku-square {      
      float: left;
      border: 1px solid #000;

      .cell:nth-child(3n+1) {
        clear: both;
      }
      .cell {
        float: left;        
        position: relative;
        height: @cell-size;
        width: @cell-size;
        background:#fff;        
        border: 1px solid #000;
        box-sizing: content-box;        

        a {
          margin: 0;
          padding: 0;
        }
        a.cell-value {
          display: block;
          font-size: 30px;            
          color: #000;
          width: @cell-size;
          height: @cell-size;
          text-align: center;          
        }

        a.cell-value:hover {
        text-decoration: none;
        }
      }      
    }
    clear: both;
  }
}

ここでライブデモを見つけることができます

Answer 4

優れたソリューションJukka . これと次の .erb コードを組み合わせて使用​​して、テーブルを動的に生成し、内容をポップしました。

@current_solution は、各セルの値を保持する配列です。

<table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>

  <% 3.times do |all_box_rows_value|%>
  <tbody>
    <% 3.times do |box_row_value| %> 
      <%  all_box_rows = all_box_rows_value * 27 %>
        <% all_rows = ((box_row_value +1 ) * 9)-9 %>
        <tr><%9.times do |row| %>
          <% index = all_box_rows+all_rows+row %>
          <% value = @current_solution[index] %><td>
          <% colour_class = get_colour_class index %>
          <input name="cell[]" type="text" maxlength="1" autocomplete="off" value=<%=value%> >
        <% end %>
      <% end %>      
  <% end %>    
</table>