CSS-in-JS ライブラリの emotion が v10 から、だいぶ使い方が変わっていました。 package の変更 v9 では emotion package を import していました。 import { css } from "emotion" v10 では React を使っている場合は @emotion/core を、それ以外の場合は…

glamorous は PayPal が開発している CSS-in-JS ライブラリです。 この glamorous が README に記載されている通り UNMAINTAINED となっています。 github.com glamorous は npmtrends を見ると styled-components や radium と同じくらいダウンロードされて…

追記 glamorous が Deprecated になり、emotion への移行が推奨されています。 yami-beta.hateblo.jp CSS-in-JS CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。 www.npmjs.com www.npmjs.com…

はてなブログの公式テーマである Wideboard が好みだったのですが，1カラムでサイドバーがページ下部に表示されてしまう部分が不満でした． はてなブログは，デザイン設定の「デザインCSS」で CSS を記述することが出来るため，Wideboard を2カラムに変更す…

表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。 環境 iPhone 5s（iOS8.1） jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー…

最近、Parallax Effect(視差効果)を取り入れたサイトを一つ作ることになりまして、その際に、jQueryを利用したスクリプトを一つ書いたのでご紹介しようと思います。 Parallax Effect(視差効果)とは 詳しくは調べていただくとして、Parallax Effectを取り入れ…

またまたWeb系の雑記になります。 とは言っても今回は、やりたかったことが出来なかったというお話し。 擬似要素 CSSには、擬似クラス・擬似要素というものが存在します。有名な擬似要素は :before :after の2つ。:afterはclear fixに用いられることで有名で…