CSS Category Archive

CSS カテゴリの記事一覧。(2 / 13 ページ)

Google AdSense で 「レスポンシブ広告ユニット」 が提供開始

Googleちょっと前に、Google AdSense で新しい非同期コードを使ったら、CSS でサイズ変えるだけで配信される広告サイズが自動的に切り替わっていい感じっていう記事書いたんですよね。

広告が読み込まれた時点でのウィンドウズによっての出し分けなので、所謂レスポンシブにウィンドウサイズの可変に対して動的に広告サイズが変わるわけじゃないんですけども、簡単にスクリーンサイズに合わせて最適なサイズの広告を出し分けられるのはいいよねってことで。

Posted by:

CSS と jQuery で作るスクロールにあわせて回転するロゴ

TumblrTumblr のスタッフ Blog を見てたら、ロゴ (正確にはロゴの周囲の部分) がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。

結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。

Posted by:

AdSense の非同期コード使ったらスクリーンサイズにあわせた広告サイズの変更が超簡単だった件

GoogleInside Adsense で、Google AdSense の新しい非同期型広告コードの紹介がされてて、この非同期コード自体はちょっと前から提供開始されていたんですがまだ使ったことなかったのでちょうどいい機会だから差し替えてみようということで当 Blog の広告コードを差し替えたんですよね。

その時に、そういえば、ブラウザのウィンドウサイズや、デバイスのスクリーンサイズごとに広告のサイズを出し分けるってやつ、これもちょっと前にそういう改変が許可されたんですが、新しい非同期型広告コードだとどうやればいいのかなと思って試してみたらめちゃくちゃ簡単だったので紹介。

Posted by:

CSS Flexible Box (Flexbox) を使ってみよう - 最新仕様対応版

CSS Flexible BoxCSS3 のモジュールとして策定されている CSS Flexible Box (CSS3 Flexbox) は、CSS によるレイアウトを実現するための仕組み。

レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。

現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。

Posted by:

Firefox OS Simulator 4.0 がリリース

FirefoxFirefox OS Simulator は Firefox 向けのアドオンですが、デスクトップ環境で実機を使わずに Firefox OS アプリ のテストやデバッグが可能になります。この Firefox OS Simulator の最新版である、4.0 がリリースされました。

なお、インストールには Firefox 19 以降が必須です。

Posted by:

フラットデザインの次にくるトレンドを先取りした Bootstrap テーマ

グラデーションやドロップシャドウを使った立体的なデザイン (つまり凸) の次にフラット (平ら) デザイン(←今ココ)と来たら、次のトレンドは 「凹」 でしょ ということで Bootstrap と一緒に読み込むだけで簡単に凹んだデザインを再現できる Bootstrap テーマ、「Dent UI」 を公開しました。

Posted by:

HTML5 や CSS などのリファレンスサイト (未完成) を公開したよ

HTML5実はずいぶん昔に一回作ろうと思って途中で挫折した結果、しばらく放置状態だったんですけども、暇を見つけてはちょっとずつ進めていた Web 界隈の方々向けリファレンスサイトがとりあえず公開できそうな感じになったので晒してみますよ。

作ってるのは下記です。

ただし、なんとか形になってるのは HTML5 タグリファレンスの部分だけなんですけどね......

Posted by:

Firefox 22 が正式リリース CSS Flexible Box の有効化、data、time 要素のサポートなど

Firefox6月 25日、日本だと同日深夜ですが、Firefox の最新版、Firefox 22 が正式リリースされました。さっき自動更新の方もきたので紹介。

仕様変更で色々あった CSS Flexible Box は、Firefox 18 からデフォルト無効なものの実装はされていましたが、今回の Firefox 22 からデフォルトで有効化されました。

HTML5 関連では、data 要素、time 要素への対応、input 要素の、type="range" のサポート。JavaScript 関連で、新 JavaScript エンジン 「OdinMonkey」 による JavaScript の高速化、asm.js、ES6 の Arrow Function 構文を実装、また WebRTC もサポートするなど、多くの変更が行われています。

Posted by:

Pure を使って 5分でレスポンシブな Blog テンプレートを作る

PurePure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。

さすがに 5分はウソです すいません。でも簡単でしたよ。

Posted by:

CSS だけで作るタブ切替ユーザインタフェース (float 使用版)

CSS1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。

先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。

Posted by: