新しいタイトル: Pure CSS と HTML を使用した圧縮 HTML マトリックス レイアウト デザイン

Question

純粋な HTML と CSS を使用してロゴを作成しようとしています。デザインは非常に直感的で、いくつかの色付きアイテムを含む [13x13] マトリックスです。

CSS は非常にシンプルでマイナーです。ただし、HTML コードには繰り返し部分が多く、DRY (Don'trepeat Yourself) である必要があります。

リーリー リーリー

<f></f> の代わりに <f/> を使用しようとしましたが、成功しませんでした。

このコードを減らす方法はありますか?

注: 色は変更しないでください。

Answer 1

JavaScript が利用可能な場合は、セルの型を文字列オブジェクトに連結し、それを使用して動的にフラグを構築できます。サンプルコードは以下のとおりです。

リーリー リーリー リーリー

HTML/CSS の必要性と @Temani Afif のコメントに基づいて、SVG ソリューションを次に示します。

リーリー リーリー