2020年の東京オリンピックエンブレムが最終候補の4作品の中から市松模様の「作品A」に決定したと聞いたので、早速HTMLとCSSで再現してみました。 東京2020大会エンブレム|東京オリンピック・パラリンピック競技大会組織委員会 デモ・ダウンロード まずはデモをご覧ください。別ページで開く場合、下のデモやダウンロードからも見ることが可能です。 Demo zipファイルをDownload 画像を一切使わずにCSSの擬似要素:before:afterとbox-shadowを多用して作っています。スマホは考慮していないので横幅が狭いスマホだと見きれてしまうかも。 参考までに本物のエンブレムはこっち。細かいところを見るとフォントが違ったり微妙に配置が異なっていますが、HTMLとCSSだけでほぼ同じような物が作れます。 新エンブレムのある法則 エンブレムは正方形と長方形の3パーツで出来ています。分か
![HTMLとCSSで東京2020年オリンピック+パラリンピックエンブレムを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/99b512432a7fca5fcd6f766849200fc4cfdaf7d4/height=288;version=1;width=512/https%3A%2F%2Fcreatorclip.info%2Fwp-content%2Fuploads%2F2016%2F04%2Ftokyo-2020-emblem.gif)