CSS
したいよね?事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエム…
なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・?って思ったのがきっかけ。
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さてさて、というわけで恒例の裏側紹介記事です。
もちろんモバイル情報です。iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの?っていう。
解決してしまったTap delay問題 #html5j 例えばこの記事を見て、 html { touch-action: none; } ってそのまんま書いてみちゃってませんか?実はこれ罠があるのでちゃんと意味を知っておかないと困ります。 そう、私のように・・。
けどできないってことでいいのかしら。 20150213: 追記 できないと思ってた時期が私にもありました。 ちゃんと設定すれば、できます。
もう少しなんとかならんのかねコレ。 個人のメモ的に書き残しておきますが、 再現する最小パターンを精査したわけではなく、 他のスタイルとの兼ね合いやらなんやらで発生してる可能性もあるので、そういう感じで見てください。
最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。 まあ一応書いたので、メモっとこうと。
ひとりケーススタディです。前提として最近もやもや色々考えるけど、結局なんて結論付けたいかがよくわからんのが多いので、メモ書きってなニュアンス。まずはおさらい。
jsの話というより、そういうものがあるんですという話です。個人のティザーでこういうことしたかったんですよ、こういうの。 参考:Lealog.net
ブログに書き溜めたいようなことがないのか、そんなことをするヒマがないのか・・。 さて、またもちょっとしたメモ。
ほぼ仕事用のメモになるけど・・。
いま話題のアレです、アレ。 いま携わってるプロジェクトの開発環境が特殊で、どうにもこうにも困ってたことがあって。 そこでこのSource Mapsが使えるんじゃなかろうか?と思った次第です! Source Mapsの仕組み ソースコードをMini/Unifyする時に、どのフ…
参考:css - Transitions on the display: property - Stack Overflow そのへんで拾ったアコーディオンのライブラリとかでよく見るやつ。 もはやマークアップあるあるですよね。displayじゃダメなので、他のプロパティで攻めましょう、っていう。 transition…
ワナってほどでもないですけど、久しぶりに困ったので。 やっぱりCssにしろ何にせよ概念レベルはもちろん、きっちり実装レベルで理解できてないとどっかで困るみたい。最近はそりゃあ検索すればスグわかるってのもあるけど、それでもやっぱり知ってたいし、…
よく使う割にイマイチ思い出せないのがコレ。`position: absolute`じゃないなら、`margin: 0 auto`とかで良いんですけどねー。 それっぽい帯のデザインを作るときとかでbefore/after擬似要素を使う時はたいてい`position: absolute`なので、うまいこと真ん中…
既知の不具合かどうかもわかりませんが、少なくとも実体験です。 一応、参考までに。 Androidの2.x系です。←うろ覚え ソース なんてことのないブリンクをCssのアニメーションで実装しました。 .blink { -webkit-animation-name: blink; -webkit-animation-du…
項目を等幅で並べたいときに、display: inline-blockにしちゃって、幅を%指定するのはよくやると思います。 ただそこには落とし穴があって・・・。 width: 50%にしたのに横並びにならない marginもpaddingもborderもないのに並ばない! 49%にすると並ぶ・・…
はてさて、無事に転職しまして、こういうことをやるようになりました。 今までも知識レベルでは持ってたつもりですが、いざやるのはまた勝手が違うわけで。 まだ全然周りも見えてないですが、個人的に気付いた点などをメモ。
jQueryとかJavaScriptじゃなく、Css3のアニメーションって何かをきっかけに動かすとか止めるとかできるんかな?と思い。 結論としては、できるみたい。 JavaScriptで (function(){ $('.box').on('click', function(){ var me = this; me.style.webkitAnimati…
いま作成中のサイトで、理由不明のバグ?ミス?があったのでとりあえずメモ。Operaのみで再現して、他のブラウザでは再現しませんでした。 IE6でさえ表示されたのに、Operaがダメとかどういう仕組みなんやろう・・。 なんてことないHTMLのとある要素に、 .cl…
ふだん何気なく書いてるこいつらですが。 <div id="wrap" class="grid_24">hogehoge</div> どういう時にidをつけて、どういう時にclassを振るのか、いまいち意識してませんでした。 1つの要素にidって2つとか、複数指定したらあかんとは聞くけど、 なんであかんのかっていう疑問が生まれたので調べ…
何気なーく使ってるborderプロパティですが、どんな値がつけれるかはイマイチ覚えてなかったので。そして意外に使えるやつを発見したのでメモ! borderプロパティ 言うまでもなく、罫線引くアレです。 そのスタイルを決める値に、思わぬ伏兵がおりました。 r…