Tailwind CSS を使ったビルド環境を、Laravel Mix ベースで構築するメモ install まずは Tailwind CSS と Laravel Mix をインストール。cross-env も必要そうなので一緒に入れる。 yarn add -D tailwindcss laravel-mix cross-env package.json を修正 Larav…

こんなプロパティあったのか、知らんかった CSS の animation で動かしているものを、一時停止させたいとき animation-play-state: paused; これでOK 明示的に再生させたいときは animation-play-state: running; ボタンを押すとアニメーションを再生・停止…

nuxt.js で開発するとき、自分で定義した scss の変数や mixinをどのコンポーネントからでもグローバルに使えるようにしたい、というメモ まずは共通のファイルを、/assets/styles/_var.scss あたりに作り、その中で各種変数などを定義しておきます。 // ass…

先日、勉強会 CSS Talk で話したので、そのときのスライドを Speaker Deck から貼り付けるテスト。 speakerdeck.com イベントレポート的な記事は、会社のブログに書きました。 www.tam-tam.co.jp

アイコンフォントの表示のさせ方。 たとえば Twitter Bootstrap にも入っている Glyphicons とかだと空の span 要素にクラスつけて表示させる感じですね <span class="glyphicon glyphicon-map-marker"></span> それを CSS だけでやりたい場合。フレームワークが吐き出す html に、CSS の after やら before やら…

foundation 5 の CDN、これが公式なのかな、ドメインが zurb.com だしそうだよね <link href="//cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"/> <script src="//cdn.foundation5.zurb.com/foundation.js"></script> ※ foundation は、Twitter bootstrap みたいな CSS フレームワークのひとつ</link>

Zen Coding で html をパパっと書くのはけっこう慣れてきたんですが、CSS をパパっと書くのはほとんどやったことなかったなあ、ちゃんと覚えたいなあと思いまして、とりあえずチートシートを探してみました。 Zen-Coding のオフィシャルに PDF があったんで…

先日話題になってた、css だけで吹き出しボックスを作るやつですけど、 これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌http://phpspot.org/blog/archives/2009/04/css_84.htmlFun With CSS Shapes - Nettuts+http://net.tutsplus.com/video…

恥ずかしながら最近知ったんですけど、もうIE6用に css をどうのこうのするのはこの方法でいいかなと思っています。 <link rel="stylesheet" href="基本スタイルシート.css" type="text/css" media="screen" /> (注:なぜか記事個別ページだとうまく表示されないので、その場合はこちらを見てね)IE独自の条件付コメ…</link>