リンクボタンのホバーアニメーションは基本的にPCでしか適用しません。 なぜならスマートフォンではリンクボタンをホバーというよりタップの操作になるのでPCと同じアニメーションを適用していても、タップすると中途半端にアニメーションをしてリンク先のページに遷移してしまうからです。 中途半端なアニメーション…
今回は遊び心シリーズということで、忍者のサイトぐらいにしか使わないのでは？と思われる「CSSで作るまきびし」を解説していきたいと思います。 まきびし（wiki）というと忍者が逃げるときに敵の足止めに使う忍具の一つです。ヤンキー漫画を見ていると画鋲をまきびし代わりにしているのはよく見かけますね。（真似…
今回はCSSだけで作れるリッチなホバーエフェクトボタンを作ってみました。なぜホバーエフェクトが必要か？ それはユーザーがサイトを回遊する際の「使いやすい」、「このサイト面白い」、「こだわってるサイト」というがわかりやすく体験できるようにするためです。サイトの内容が一番重要ですが、見てもらうために気持…
皆さんFlexboxを使っていますか？ 要素を横並びにするには一昔前だとfloatで並べていたと思いますが、もうその時代は終わっています。floatを書いた後はclearfixで回り込み解除！なんて魔法も懐かしくもなりました。 現在、横並びで主流なのはFlexboxとCSS Gridになります。CS…
皆さんCSS Gridを使っていますか？ CSS Gridはマス目上にブロックを配置することが可能で、Flex-boxではできない複雑なタイル型のレイアウトが組む事ができます。 Web業界の中ではflex-boxのほうが人気ですが、CSS gridの少し難しい記述とIE11が一部対応していない所がF…
公開日：
更新日：