JavaScript で for 文をまわして市松模様を作ってみました。
ソースコードは次の通りです。
<div id="checkered_pattern"></div>
@charset "UTF-8";
table {
border: solid 2px black;
width: auto; /* WordPress でやる場合はあったほうが良い */
margin-left: auto;
margin-right: auto;
}
table td {
width: 20px;
height: 20px;
border: none;
padding: 0;
}
.white {
background: beige;
}
.black {
background: brown;
}
const N = 8;
let output_html = '<table>';
for (let i = 0; i < N ; i++) {
output_html += '<tr>';
for (let j = 0; j < N ; j++) {
if ((i + j) % 2 == 0) {
output_html += '<td class=\"white\"></td>';
} else {
output_html += '<td class=\"black\"></td>';
}
}
output_html += '</tr>';
}
output_html += '</table>';
document.getElementById("checkered_pattern").innerHTML = output_html;
コメント