純粋な HTML と CSS を使用してロゴを作成しようとしています。デザインは非常に直感的で、いくつかの色付きアイテムを含む [13x13] マトリックスです。
CSS は非常にシンプルでマイナーです。ただし、HTML コードには繰り返し部分が多く、DRY (Don'trepeat Yourself) である必要があります。
リーリー リーリー<f></f> の代わりに <f/> を使用しようとしましたが、成功しませんでした。
このコードを減らす方法はありますか?
注: 色は変更しないでください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
JavaScript が利用可能な場合は、セルの型を文字列オブジェクトに連結し、それを使用して動的にフラグを構築できます。サンプルコードは以下のとおりです。
HTML/CSS の必要性と @Temani Afif のコメントに基づいて、SVG ソリューションを次に示します。