このページの本文へ

CSSトリックを駆使してJS不要のクロスワードパズルを作ってみた

2017年07月28日 13時59分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

進化するCSSの機能を駆使して、CSSだけでクロスワードパズルを作りました。JavaScriptは一切使っていません!

JavaScriptを使わずにCSSグリッドで動くCSSオンリーのクロスワードパズルを作成したところ、CodePenで話題になりました。執筆時点でハートマークが350、ページビューは24,000を超えました。

チュートリアルCSS Grid Gardenに触発され、グリッドレイアウト機能でなにか作りたくなりました。クロスワードパズルの作成にうってつけの機能なので、JavaScriptをまったく使わずに完成させました。

グリッドの盤面を作成

盤面本体は以下の構造にしました。HTMLには、各セクションで実現することをコメントしました。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く