WWW Watch

CSS カテゴリーの記事一覧

CSS に関する記事の一覧を表示しています。(1 / 4 ページ)

Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる

Windows で 「游ゴシック」 フォントを使用すると細字で表示されちゃって困るという話、なんか Twitter で下記の記事が回ってきたので、あぁそういえばそんな問題がありましたよねと思い出したのですが、ちょっと気が向いたのでこれを CSS の仕様を基に考えてみたいと思います。

要するに上記の記事の方が言うように制作者サイドの問題なのか、それとも Windows のレンダリングが悪いのかという話ですが、結論から言えば Windows が悪いってことでいいんじゃないかと思います。あと気になって自分の環境で調べてみたら、少なくとも Windows 10 ではこの問題は起こらないみたいですね。

Continue reading

CSS で計算(四則計算)が行える calc() 関数を使ってみよう

CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。

ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。

なお、上記記事でも書いたとおり、calc() 関数は現時点で IE (IE11)や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしていますので、念のため古いブラウザ向けに最低限のフォールバックとなる記述だけしておいてあげれば問題なく使用できます。

Continue reading

Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に

Firefox

CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE (IE11)や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています

ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables (CSS カスタムプロパティ) と組み合わせるときにかなり便利になりました。

Continue reading

Chrome 49 Beta が CSS カスタムプロパティ (CSS Variables) に対応

Google Chrome現在 Beta 版としてリリースされている Google Chrome 49 (次の正式リリース版) が、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 をサポートしました。

Chromium Blog でアナウンスされています。

Continue reading

1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話

Advent Calendarこの記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。

面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。

私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話......

Continue reading

Re: 「position: absolute; + display: table;の謎を解きたい」

Blog 「エンジニアをリングする」 さんで、下記の記事が上がっていて、要するに position: absolute; した要素には height プロパティでパーセンテージ値による高さ指定ができるはずなのに、display: table; するとそれが無視されるのはなぜ? という話。

で、答えですが、仕様書の下記の辺りを読んでみたらいいんじゃないですかね。

Continue reading

Firefox 40 が正式リリース、text-decoration 関連プロパティからベンダプレフィックスが削除されるなど

FirefoxFirefox 40 のリリースからちょっと時間経っちゃってるんですが(現在 Firefox 40.0.2 が提供されています)...... Firefox の最新版、Firefox 40 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

Continue reading

当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ

なぜか先週末の夜中に急に思い立って、この Blog のドメイン用に SSL 証明書を購入し、急遽 SSL 対応 (HTTPS でアクセスできるように) してみたわけですが、その手順やら、SSL 化したことでちょっと手直ししないといけなくなって大変だった点などをまとめて見ようと思います。

ちなみに、まだリダイレクトや HSTS (HTTP Strict Transport Security) はドメインに対して有効にしていないので、現状は HTTP / HTTPS どちらでもアクセスできる状態。もうちょっと検証した上で HSTS を有効にして所謂、常時 SSL 化する予定。

10年間以上運営してきた Web サイトを SSL 対応させると、こういう問題が起こるのね、とかそういうところが大変なのね的な感じで参考にして頂ければ幸いです。

Continue reading

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

jQueryタイトルが (謎) な感じですが......

ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。

実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いのかとか、そもそもの是非 (好き嫌いとか?) についてはとりあえず置いておいて、画面が移動したのがわかるようにするなら、「スクロール」 以外でもできるんじゃないの? という実験です。

Continue reading

Firefox 37 が正式リリース、display: contents のサポートなど

Firefoxもうそろそろ Firefox 38 が自動更新で提供開始されそうなころですが、Firefox 37 がリリースされた時に書いた記事が下書きのまま放置状態で忘れてましたので、こんなタイミングですが公開しておきます。ですので、以下は1ヶ月以上前の話ですのでご了承ください。

Firefox の最新版、Firefox 37 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

Continue reading

Microsoft の新ブラウザ (Project Spartan) 開発に Adobe の Web Platform チームが参加

IE Blog で公開された記事によると、現在 Technical Preview が公開中で、今年の夏頃にはリリースされると言われている次期 Windows 「Windows 10 (コードネーム : Threshold)」 に搭載される新ブラウザ 「Project Spartan」 の開発で、Microsoft と Adobe が提携したとのこと。

個人的には結構気になる (ポジティブな意味で) 発表でしたので、ちょこっと触れてみたいと思います。

Continue reading

HTML5 に対応したリファレンス本 「できるポケット HTML5 & CSS3/2.1 全事典」 が発売されました

できるポケットちょっと前にも告知しましたが、インプレスさんの、どこでも手軽に読める入門書シリーズ、「できるポケット」 シリーズの新刊として、「できるポケット HTML5 & CSS3/2.1 全事典」 が 本日発売されましたのでお知らせです。

Continue reading

Google が言う 「モバイルフレンドリー」 とは? モバイルフレンドリーテストツールで色々試してみた

先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 (米国時間) から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。

上記記事内で 「この変更は世界的に検索結果に対して大きな影響を与える (This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results)」 と言い切ってることもあって、その影響は大きいものと思われますし、これを受けてまたスマホ対応がどうこうと騒がしい感じになるんでしょうが、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断するの? ってところがちょっと気になったので、わかる範囲で調べてみました。

Continue reading

Firefox 36 が正式リリース、scroll-behavior: smooth; のサポート、SPDY/3 のサポート廃止など

FirefoxFirefox の最新版、Firefox 36 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSSOM View Module から scroll-behavior プロパティをサポートしたことで、CSS だけでスムーズスクロールが可能になった他、SPDY/3 のサポートが廃止され、SPDY/3.1 のみのサポートとなっています。

その他、unicode-range デスクリプタのサポート、will-change プロパティのサポート、meta name="referrer" のサポートなども行われています。

Continue reading

HTML5 に対応したリファレンス本 「できるポケット HTML5 & CSS3/2.1 全事典」 を執筆しました

できるポケットインプレスさんの できるシリーズ と言ったらシリーズで 6,000万部とか売れている大人気シリーズなわけですが、その できるシリーズ をコンパクトにまとめた、どこでも手軽に読める入門書的なシリーズとして 「できるポケット」 シリーズってのがあるんですけども、そのシリーズの新刊として、「できるポケット HTML5 & CSS3/2.1 全事典」 を共著で執筆しました。

発売日は 3月 2日ですので、来週の月曜日ですが、Amazon などでは予約が始まっていますので告知です。

Continue reading

Web サイトの制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました

会社の方の Web サイトではすでに告知したんですけども、自分の会社で作って使っていた Web サイト制作のガイドラインを公開しました。

この制作ガイドライン自体は新しく会社を立ち上げた当初に整備し始めて、そのまま使っていたんですが、自社特有のルールを整理したり、書き方を少し汎用的に調整した上で、公開することにしました。クリエイティブ・コモンズ・ライセンスで公開していますので、ライセンスの範囲内であれば自由に使っていただけます。

Continue reading

Firefox 35 が正式リリース、CSS Filter がデフォルトで有効に

FirefoxFirefox の最新版、Firefox 35 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSS プロパティで、要素に対して様々なエフェクトをかけることができる CSS Filter がデフォルトで有効になった他、@font-face 規則における WOFF2 フォントのサポートなどが行われています。

Continue reading

Firefox 34 が正式リリース、SSL 3.0 の無効化、CSS Fonts 関連の実装強化など

FirefoxFirefox の最新版、Firefox 34 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

以前、この Blog でも書きましたが、このバージョンで、SSL 3.0 がデフォルト無効化されました。また、CSS3 で再定義された、font-variant プロパティがデフォルトで有効になるなど、CSS Fonts 関連の実装が進んでいます。

Continue reading

Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。

例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。

Continue reading

Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート

Firefox Nightly現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。

現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-enabledtrue にしないと有効にはなりませんが、有効にした上で body 要素などに scroll-behavior: smooth; を指定する事で、ページ内リンクの移動時など、ページのスクロールが瞬時にではなく、スムーズスクロールで動作するようになります。

Continue reading

Happy birthday CSS - CSS が最初の提案から 20周年

CSSWeb のフロントエンド界隈の方々におかれましてはほぼ毎日書いているであろう CSS (Cascading Style Sheets) ですが、1994年 10月 10日に、Opera Software 社の CTO、ホーコン・ウィウム・リー (Håkon Wium Lie) 氏によって提案 (Cascading HTML Style Sheets -- A Proposal) されてから今年で 20年が経過したそうです。

Dev.Opera Blog では、CSS 20周年に際して、リー氏のインタビューを掲載しています。

Continue reading

メンテナブルな CSS 設計の考え方がよくわかる 「Web 制作者のための CSS 設計の教科書」

Web 制作者のための CSS 設計の教科書

サイバーエージェント社でフロントエンドエンジニアとしてご活躍の谷 拓樹氏 (@hiloki) 著による 「Web 制作者のための CSS 設計の教科書」 をインプレス様よりご恵贈いただいたので紹介です。

Continue reading

position: absolute; の指定で要素が上下左右中央配置になる理由

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 : バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。

詳しい話は下記のリンク先をご覧ください。

Continue reading

Firefox 31 が正式リリース、HTML5 track 要素や CSS Variables 最新仕様に対応など

FirefoxFirefox の最新版、Firefox 31 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

HTML5 の track 要素に対応 (WebVTT) したほか、接頭辞が -- に変更された、CSS Variables (CSS カスタムプロパティ) の最新仕様に対応し、利用可能です。その他、ECMAScript 6 の実装がさらに進んだり、CSS.escape() が実装されるなどしています。

Continue reading

CSS Variables (CSS カスタムプロパティ) の使い方

CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。

以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。

近日正式版がリリースされる予定の Firefox 31 で最新の仕様 (接頭辞が -- に変更) を基に実装、デフォルト有効になる予定とのことですので、ちょうどいい機会と言うことで CSS Variables の使い方について最新の仕様に基づく解説を書いてみようと思います。

Continue reading

Firefox 30 が正式リリース、background-blend-mode がデフォルト有効に

FirefoxFirefox の最新版、Firefox 30 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

CSS 関連では、先日 Chrome でもデフォルトで有効になった background-blend-mode プロパティが Firefox でもデフォルトで有効になりました。

また、line-height プロパティが <input type="reset|button|submit|text|password|email|search|tel|url"> に適用されるようになったほか、EcmaScript 6.0 のサポートがさらに進むなど、変更が加えられています。

Continue reading

正式リリース版の Chrome 35 で background-blend-mode がデフォルト有効に

Google Chromeリリースサイクルが早いので、各ブラウザさんのアップデート状況を追っかけるのも大変な今日この頃ですが・・・・・・

今月の 20日にリリースされた Google Chrome 35 から、background-blend-mode プロパティがデフォルトで有効になったようですね。Adobe の Web Platform Team Blog で触れられています。

Continue reading

Firefox 29 が正式リリース、CSS Variables などに対応

FirefoxFirefox の最新版、Firefox 29 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。

Firefox 29 からデザインが刷新されたのが最も目立つ大きな変更ですが、その他にも CSS 関連では、CSS Variables に対応したり、HTML5 関連では、input type="number"、および input type="color" にデフォルトで対応しました (実装はされていましたが、今まではフラグ立てる必要がありました)。

Continue reading

Firefox 30 でインスペクタが各要素のボックスモデルをオーバーレイ表示するようになっていた件

Firefoxたまたま Nightly (現時点で Firefox 31) でインスペクタを開いて気がついたんですけども、今までインスペクタの左隅に表示されてた各要素のボックスモデル (Box Model) について、実際のページ上にオーバーレイ表示するようになったんですね。見やすくて便利になりました。

で、調べたら Firefox 30 からの新機能だそうです。

Continue reading

スタイルの継承で Google Maps JavaScript API で表示した地図のコントロール UI がおかしくなった件

Google Maps JavaScript APIたいした話ではないんですが、ある案件で Google Maps JavaScript API を使用した地図を Web サイト内に表示して調整しているとき、通常、デフォルトでは左上の方に表示されるコントロール UI (ズームとか操作するやつです) の表示がおかしいことに気がつきました。

で、なんでだろなと思って Web コンソールで調べてみたら、思わぬところに原因がありましたというお話。

Continue reading

SVG と背景色を使ってサイズやカラーが自在な汎用性のあるアイコンボタンを作る

透過 GIF や PNG 画像に背景色を組み合わせることでアイコンボタンのカラーバリエーションを簡単に作るっていうやり方は昔からありますが、これを SVG (Scalable Vector Graphics) でやることでサイズ変更にも対応しやすいやつを作るっていうお話。

手法的には目新しいことは何もありませんが、この前この Blog のデザインをリニューアルしたときに視覚的に左側サイドメニュー上部 (スマートフォン表示だと隠れてると思いますが) にある 「Follow」 メニュー部分で使ったので紹介。

Continue reading

Sass の基本から応用まで 1冊でわかる 「Web 制作者のための Sass の教科書」

Web 制作者のための Sass の教科書

いや、あの... もう発売から半年近く経ってて、今さら感ハンパないんですが、やっと全部読む時間が取れましたので、気にせず紹介です。もうすでに購入済みの人も多いのかもしれませんが。

Continue reading

Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に

FirefoxFirefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。

CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。

Continue reading

Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩

GruntGrunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが......

とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか?」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー (主に HTML や CSS を書くフロントエンドな人) さん向けに、初めて Grunt を使うならこれだけまずはやってみたら? っていう内容で書いてみようと思います。

なるべくコンパクトに書こうと思ったんですが、終わってみればかなり長い記事になってしまいました...... 覚悟してどうぞ。

Continue reading

今年も Web 関連の良記事がそろう Advent Calendar 2013

Adventarアドベントカレンダー (Advent Calendar) ってのは、元々クリスマスまでの日数を数えるために使用されるカレンダーですが、ある話題だけで 25日間記事を書いていこうぜっていう Web 版アドベントカレンダーが、今年も Adventar で多数立ち上がり、多くの人が記事を書いています。

Continue reading

background-blend-mode プロパティで背景をブレンドしてみよう

CSSCSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。

それが今回取り上げる、background-blend-mode プロパティです。

Continue reading

Google っぽいプリローダーを CSS だけで作る

Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー (画面ロード中に表示されるインジケーター) を作るっていう記事がアップされていましたので紹介。

CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。

Continue reading

Firefox 25 が正式リリース、Web Audio API、iframe srcdoc 属性などに対応

FirefoxFirefox の最新版、Firefox 25 が正式リリースされ、自動更新も提供開始されました。

Web Audio API をサポートしたほか、iframe 要素の srcdoc 属性、CSS3 で追加された background-attachment プロパティの値 「local」 のサポートに加え、ECMAScript 6 関連の実装強化などが行われています。また、Android 版では、ゲストブラウジング機能が追加されました。

Continue reading

Google が無料の Web コンテンツ作成ツール 「Google Web Designer」 を公開

Google Web DesignerGoogle さんが、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開しました。

Photoshop などのような、視覚インターフェースを使用して、広告などの Web コンテンツを作成し、HTML5、CSS3、JavaScript を書き出すことが可能です。コードエディタも搭載されているので、出力されたコードを直接編集して、より高度なコーディングを行うこともできるようになっています。

基本的にはインタラクティブな要素を持った 「広告」 の作成を簡単に行うためのツールで、AdMob や DoubleClick といった広告プラットフォームとの連携機能も搭載されています。

Continue reading

CSS filter プロパティで 「半透明ガラス」 効果を再現してみる

2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 (Windows Aero ...) とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね? と思ってやってみました。

Continue reading

Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に

Google ChromeHTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。

現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス (モーダルウィンドウ) の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に実装可能です。

Continue reading

Firefox 24 が正式リリース HTML5 track 要素への対応など

FirefoxFirefox の最新版、Firefox 24 が正式リリースされ、自動更新も提供開始されました。

media.webvtt.enabledtrue にする必要はありますが、HTML5 で策定中の新要素、track 要素に対応したほか、同時にリリースされた Android 版では、デスクトップ版では Firefox 22 でデフォルト有効になっていた、WebRTC をサポートしました。

Continue reading

Firefox Nightly が position: sticky; に対応

Firefox Nightlyちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。

今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabledtrue にすることで試すことができます。

Continue reading

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

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

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

Continue reading

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

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

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

Continue reading

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

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

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

Continue reading

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

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

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

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

Continue reading

Firefox OS Simulator 4.0 がリリース

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

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

Continue reading

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー