こんにちは。 Tokyo Otaku ModeのUXデザイナーおよびフロントエンドエンジニアの吉見です。 みなさんCSSは好きですか? 先日弊社のロゴを眺めているとCSSだけでも表現できそうだなと思い、実装してみた話をしたいと思います。 HTMLの準備描画のためだけのDIVを大量生産して実装していくだけではおもしろくないので、ある程度制約を設けたいと思います。 Tokyo Otaku Modeという1字1字をそれぞれ i タグにし、 T は data-tom="t"、O は data-tom="o" といった具合に独自data-属性を持ったDOMで構成してみます。 出来上がったソースが下記のようなHTMLです。 ※ 一部Safariではデモが動作しない可能性があります。ChromeまたはFirefoxでご覧ください。 index.html <div id="tokyootakumode">
![CSSでTokyo Otaku Modeのロゴを作ってみる | Tokyo Otaku Mode Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5156a521c8fa7b3ff17ae4f6d65e99d123f822c3/height=288;version=1;width=512/https%3A%2F%2Fcloud.githubusercontent.com%2Fassets%2F283285%2F12839401%2F4edcb608-cc1c-11e5-9607-cbd1283bb767.png)