HTML5/CSS3 HTML5/CSS3

f6-crayon

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

foundation

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

foundation

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

cssjq

修正: 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スキームによる...

overflow

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

generator

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

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

CSS3による装飾とアニメーションを使用した、シンプルで美しいログインフォームを紹介します。 Smarten Up a Slick Login Form With CSS3 必要な部分を元記事より抜粋しています。 DEM...

PIE.htcはIE6/7/8でもCSS3を適用される優れたライブラリです。 少し試してみたのですが、ローカル環境で動作しないという問題を見つけました。 ネット上でも同様のケースが多いようです。 CSS3で角丸をつくりま...

AD