🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

CSS

2023年のCSSは0ランタイムにしたい

したいよね?事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエム…

ViteのCSS Modulesは、JSのようにTree shakingできない

なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・?って思ったのがきっかけ。

タッチパネル x IEに関する指定たち

IE10とかWin8とかMetroAppとかなんかそういう手の話です。画面のズームを防ぎたくて、 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> こういうの書けばいけるんじゃねー?って思ってたけどいけなかった。</meta>

#スーパーイカメーカー を支える技術

どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。leader22.github.ioさてさて、というわけで恒例の裏側紹介記事です。

最近のoverflow: scroll事情

もちろんモバイル情報です。iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの?っていう。

html { touch-action: none; } に潜む罠

解決してしまったTap delay問題 #html5j 例えばこの記事を見て、 html { touch-action: none; } ってそのまんま書いてみちゃってませんか?実はこれ罠があるのでちゃんと意味を知っておかないと困ります。 そう、私のように・・。

Autoprefixerでdisplay: boxしたい

けどできないってことでいいのかしら。 20150213: 追記 できないと思ってた時期が私にもありました。 ちゃんと設定すれば、できます。

2014年 position: fixedの旅

CSS

もう少しなんとかならんのかねコレ。 個人のメモ的に書き残しておきますが、 再現する最小パターンを精査したわけではなく、 他のスタイルとの兼ね合いやらなんやらで発生してる可能性もあるので、そういう感じで見てください。

$.fn.fadeIn(fn)をCSSアニメでやる

最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。 まあ一応書いたので、メモっとこうと。

SassのMixinとPlaceholderの使い分け

ひとりケーススタディです。前提として最近もやもや色々考えるけど、結局なんて結論付けたいかがよくわからんのが多いので、メモ書きってなニュアンス。まずはおさらい。

JavaScriptで明るい色だけランダムに

jsの話というより、そういうものがあるんですという話です。個人のティザーでこういうことしたかったんですよ、こういうの。 参考:Lealog.net

pointer-eventsについてのメモ

CSS

ブログに書き溜めたいようなことがないのか、そんなことをするヒマがないのか・・。 さて、またもちょっとしたメモ。

CssとJavaScriptでつくるゲージのUI

ほぼ仕事用のメモになるけど・・。

Source Mapsについて調べた

いま話題のアレです、アレ。 いま携わってるプロジェクトの開発環境が特殊で、どうにもこうにも困ってたことがあって。 そこでこのSource Mapsが使えるんじゃなかろうか?と思った次第です! Source Mapsの仕組み ソースコードをMini/Unifyする時に、どのフ…

display: noneはtransitionできないので

参考:css - Transitions on the display: property - Stack Overflow そのへんで拾ったアコーディオンのライブラリとかでよく見るやつ。 もはやマークアップあるあるですよね。displayじゃダメなので、他のプロパティで攻めましょう、っていう。 transition…

text-indentに潜むワナ

CSS

ワナってほどでもないですけど、久しぶりに困ったので。 やっぱりCssにしろ何にせよ概念レベルはもちろん、きっちり実装レベルで理解できてないとどっかで困るみたい。最近はそりゃあ検索すればスグわかるってのもあるけど、それでもやっぱり知ってたいし、…

position: absoluteな要素をcenter寄せにする

よく使う割にイマイチ思い出せないのがコレ。`position: absolute`じゃないなら、`margin: 0 auto`とかで良いんですけどねー。 それっぽい帯のデザインを作るときとかでbefore/after擬似要素を使う時はたいてい`position: absolute`なので、うまいこと真ん中…

AndroidでCssのアニメーションが消えることがある

既知の不具合かどうかもわかりませんが、少なくとも実体験です。 一応、参考までに。 Androidの2.x系です。←うろ覚え ソース なんてことのないブリンクをCssのアニメーションで実装しました。 .blink { -webkit-animation-name: blink; -webkit-animation-du…

display: inline-blockとwidth: 50%の罠

項目を等幅で並べたいときに、display: inline-blockにしちゃって、幅を%指定するのはよくやると思います。 ただそこには落とし穴があって・・・。 width: 50%にしたのに横並びにならない marginもpaddingもborderもないのに並ばない! 49%にすると並ぶ・・…

スマートフォンサイトをコーディングする時の注意など

はてさて、無事に転職しまして、こういうことをやるようになりました。 今までも知識レベルでは持ってたつもりですが、いざやるのはまた勝手が違うわけで。 まだ全然周りも見えてないですが、個人的に気付いた点などをメモ。

Css3のアニメーションを一時停止するには

jQueryとかJavaScriptじゃなく、Css3のアニメーションって何かをきっかけに動かすとか止めるとかできるんかな?と思い。 結論としては、できるみたい。 JavaScriptで (function(){ $('.box').on('click', function(){ var me = this; me.style.webkitAnimati…

OperaとClearfixでなぜかハマったメモ

CSS

いま作成中のサイトで、理由不明のバグ?ミス?があったのでとりあえずメモ。Operaのみで再現して、他のブラウザでは再現しませんでした。 IE6でさえ表示されたのに、Operaがダメとかどういう仕組みなんやろう・・。 なんてことないHTMLのとある要素に、 .cl…

idセレクタを1つの要素に複数使ってはいけない理由

ふだん何気なく書いてるこいつらですが。 <div id="wrap" class="grid_24">hogehoge</div> どういう時にidをつけて、どういう時にclassを振るのか、いまいち意識してませんでした。 1つの要素にidって2つとか、複数指定したらあかんとは聞くけど、 なんであかんのかっていう疑問が生まれたので調べ…

borderプロパティのメモ

CSS

何気なーく使ってるborderプロパティですが、どんな値がつけれるかはイマイチ覚えてなかったので。そして意外に使えるやつを発見したのでメモ! borderプロパティ 言うまでもなく、罫線引くアレです。 そのスタイルを決める値に、思わぬ伏兵がおりました。 r…