CSS カテゴリの記事一覧。（2 / 13 ページ）
ちょっと前に、Google AdSense で新しい非同期コードを使ったら、CSS でサイズ変えるだけで配信される広告サイズが自動的に切り替わっていい感じっていう記事書いたんですよね。
広告が読み込まれた時点でのウィンドウズによっての出し分けなので、所謂レスポンシブにウィンドウサイズの可変に対して動的に広告サイズが変わるわけじゃないんですけども、簡単にスクリーンサイズに合わせて最適なサイズの広告を出し分けられるのはいいよねってことで。
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。
結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。
Inside Adsense で、Google AdSense の新しい非同期型広告コードの紹介がされてて、この非同期コード自体はちょっと前から提供開始されていたんですがまだ使ったことなかったのでちょうどいい機会だから差し替えてみようということで当 Blog の広告コードを差し替えたんですよね。
その時に、そういえば、ブラウザのウィンドウサイズや、デバイスのスクリーンサイズごとに広告のサイズを出し分けるってやつ、これもちょっと前にそういう改変が許可されたんですが、新しい非同期型広告コードだとどうやればいいのかなと思って試してみたらめちゃくちゃ簡単だったので紹介。
CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。
レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。
現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。
Firefox OS Simulator は Firefox 向けのアドオンですが、デスクトップ環境で実機を使わずに Firefox OS アプリ のテストやデバッグが可能になります。この Firefox OS Simulator の最新版である、4.0 がリリースされました。
なお、インストールには Firefox 19 以降が必須です。
グラデーションやドロップシャドウを使った立体的なデザイン （つまり凸） の次にフラット （平ら） デザイン（←今ココ）と来たら、次のトレンドは 「凹」 でしょ ということで Bootstrap と一緒に読み込むだけで簡単に凹んだデザインを再現できる Bootstrap テーマ、「Dent UI」 を公開しました。
実はずいぶん昔に一回作ろうと思って途中で挫折した結果、しばらく放置状態だったんですけども、暇を見つけてはちょっとずつ進めていた Web 界隈の方々向けリファレンスサイトがとりあえず公開できそうな感じになったので晒してみますよ。
作ってるのは下記です。
ただし、なんとか形になってるのは HTML5 タグリファレンスの部分だけなんですけどね......
6月 25日、日本だと同日深夜ですが、Firefox の最新版、Firefox 22 が正式リリースされました。さっき自動更新の方もきたので紹介。
仕様変更で色々あった CSS Flexible Box は、Firefox 18 からデフォルト無効なものの実装はされていましたが、今回の Firefox 22 からデフォルトで有効化されました。
HTML5 関連では、data 要素、time 要素への対応、input 要素の、。JavaScript 関連で、新 JavaScript エンジン 「OdinMonkey」 による JavaScript の高速化、asm.js、ES6 の Arrow Function 構文を実装、また WebRTC もサポートするなど、多くの変更が行われています。type="range" のサポート
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。
さすがに 5分はウソです すいません。でも簡単でしたよ。
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。
先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。