HTML5/CSS3 HTML5/CSS3

表題の通りですが、backface-visibility: hidden;を指定した要素をtranslate3dでアニメーションさせようとするとIE11以下でうまく動きません。 問題の発生例 問題が起きるコード たとえば...

jQueryでのnextAll()・prevAll()・nextUntil()のような処理をCSSのみで実現できないかと思い、考えてみました。 ちなみに:jQueryでのnextAll()・prevAll()・nextU...

ソースコードをハイライト表示する定番プラグインの「Crayon Syntax Highlighter」ですが、Foundation6によるテーマ(要はこのブログ)で使用したところ、ソースコード表示に不具合が起きました。 ...

Foundation6の新機能として、flexboxによるグリッドシステム「Flex Grid」の採用があります。 flexboxについてはWebクリエイターボックス様の解説が詳しいです。 これからのCSSレイアウトはf...

以前Foundation6+gulpをWindowsで動くようになるまでという記事でFoundation6を使おうとしましたが、このパッケージはHandlbars.jsというテンプレートエンジンでレイアウトを制御し、コン...

修正: jQueryアニメーションのところ、わざわざreturn d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。 CSSアニメーションやjQueryア...

最新版のChromeで、floatした要素のwidthが0.016px増えるという現象が1ヶ月ほど前に話題になりました。 [CSS] chromeでfloatした要素のwidthが何故か0.016px増え...

これまでCSSフレームワークというものをほとんど使ったことがなかったのですが、そろそろ手を出そうかと思いFoundationというCSSフレームワークを使ってみました。 html、css、jsファイルで構成される静的バー...

iOS7以下ではaudioタグの音声ファイルにData URIスキームを使用した場合、正常に再生できないという仕様がありました(バグじゃないの、これ…)。 それがiOS8のSafariでは、Data URIスキームによる...

htmlとbodyに対してoverflow: hidden;を指定すると、ブラウザ標準のスクロールバーを消すことが出来ます。 手法の是非はさておき、スクロール時の処理をすべて自力で制御したり、凝ったパララックスを実装する...

Twitterでコラ画像が流行すると、大体数日で○○の画像ジェネレータみたいなものがリリースされます。 この画像ジェネレータ系のサービスはGDかImageMagickを使っているのかと思っていましたが、最近はcanvas...

Google Adsenseの広告コードに非同期版がリリースされたようです。 現時点ではベータ版だそうですので、将来変更されたり使えなくなったりするかもしれません。 テストがてらに当ブログのAdsenseコードを全部差し...

AD