[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた
IE10が出たそうで。 IE10でjsdoitのPortfolio見ると… — げこたん さん (@GeckoTang) 2013年2月27日 さっそくインストールしたらしい人柱をTLで目撃。きになる。 @geckotang スクショ — Tenderfeelさん (@Tenderfeel) 2013年2月27日 スマホにまみれた生活なのでプレビュー版から華麗にスルーしています。 インストールももちろんしてないので丁重にお願いしてみた。 @tenderfeel こんなんす #jsdoit twitter.com/GeckoTang/stat… — げこたん さん (@GeckoTang) 2013年2月27日 おやおや… jsdo.itのWorksはフレキシブルボックス（display:box）を使ってる。（とこれで知った） @geckotang え、flexible box未対応？それと
![[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた](https://cdn-ak-scissors.b.st-hatena.com/image/square/911245dda353cf02b23d5414661615a5ad54d045/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2013%2F02%2Fbefqwfkcyaaelqljpg-large-300x219.jpg)
[CSS3] Androidのmask-imageに関する不具合について
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。 その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、 参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。 でもよく調べてみたらそれだけじゃなかったんです。 検証するにあたって書いたデモはこれです。 以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは３つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく
![[CSS3] Androidのmask-imageに関する不具合について](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
モバイル端末のブラウザ画面サイズとMedia Queries
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。 調べついでにメディアクエリーも書いてみた。 下に調べた各端末のサイズを表で晒してるんですけど、 端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット という具合にざっくりグループ分けできるようでした。 landscapeは単純に値が逆になるのかというとそうではなく、 特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。 アスペクト比がはiPhoneが3:2でAndroid端末は16:9、 タブレット端末の場合はiPadは4:3でAndroid端末は16:10 viewport で width=device-width,initial-scale=1,ma
Android 4.* で 画像がぼやける不具合について
最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。 Android4.xで画像という画像がぼやけまくるという怪現象があり、 シンプルな例を書いてみたらtranslateZが１つの原因のようでした。 translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。 空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。 imgはaltを入れてもtitleを入れても効果がない。 iScroll4を使うときは注意した方がいいです。 スクロールをスムーズにするためとかでtranslateZ使ってるから スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。 ほかにもtranslateZ使うケースは結構あると思うんですけど、 もしAndr
[css] CSS3時代の上下中央に配置するパターン
最近多用するので…。 要素の全画面化について 先に親になる要素を画面いっぱいに広げる方法について補足しておく。 大きく分けると絶対配置とサイズ指定の２つある。 絶対配置は、position:absoluteを指定した上で ４方向の位置を0（または任意の値）にする。 #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; } サイズ指定は、widthとheightを指定するだけだが、 対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。 特に高さについての指定がハマりやすい。 単純にbody直下に要素を配置しただけの場合、 <body> <div id="wrapper"></div> </body> htmlとbodyもheightを指定してないと画面いっぱいに広がらない。 html, body,
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav
[Sass + Compass] dataURL background mixin
画像のdataURL化と50%縮小するbackground-sizeの書き出しを同時に行うmixin @mixin data-background($image){ background-image:inline-image($image); @include background-size(image-width($image)/2 image-height($image)/2); };
[Sass] Sass 3.2で実装された新機能がヤバい
8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて ただでさえヤバイくらい高機能なSassがますますパワーアップした。 Sass信者のみなさんはすでにお使いでしょうか？ 晒したソースはオンラインコンパイラで試せます。 jsdo.itも対応してます。 @content これはmixinにブロックコンテンツを渡せるようにする合言葉。 mixinを作る時、渡されたブロックコンテンツを入れたい場所に@contentを配置すると @mixin iphone { @media only screen and (max-width: 480px) { @content; } } @includeするときに波括弧で括ってコンテンツを渡せるようになる。 @include iphone { body { color: red } } コンパイルすればこのとおり、@mixinの内容＋渡した
[Sass] Compass CSS3-animations snipets & mixin
CompassのCSS3モジュールでは transitionsのmixinがあるのにanimationsはないので -mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。 @include experimental(animation-name, sample); //アニメーション名 @include experimental(animation-duration, 1s); //実行時間 @include experimental(animation-iteration-count, 1); //実行回数(number | infinite) @include experimental(animation-direction, normal); //反復の有無(normal | alternate) @include experimental(anima
[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい
[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると 高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。 でも隠した方が表示領域が増えるので何とかしたい。 単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが… ※以下全てWebKitの話です。 screenとwindowの高さに関する値が違う やっぱり一筋縄ではいかなかった。 2011-10-04 1st – jsdo.it – share JavaScript, HTML5 and CSS 直接見る Androidだと screen.height = screen.availHeight = window.innerHeight win
[css,js] Retinaディスプレイ対策
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。 導入方法 あちこちで語られまくってて今更感あるけど一応…。 マニフェストファイルの作成 まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。 保存する場所はアプリケーションのルートでいいと思います。 保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。 その後にキャッシュするものとしないものの設定を書きます。 ま
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
[Dreamweaver] エクセルが自動生成するテーブルのHTMLをクリーンアップする
エクセルの表をHTML保存したとき出力されるソースには属性・スタイル・ルビ・フォントタグなどが多量に含まれている。 それら不必要なHTMLソースをDreamweaverの正規表現置換で一掃する。 HTML化 エクセルから以下の方法でHTMLにする。 表のセルを選択（全体に適用する場合は３へ） Ctrl+N → Ctrl+V （新規作成とペースト） 「Webページとして保存」または「ブラウザでプレビュー」 「ブラウザでプレビュー」の場合は開発者ツールでHTMLをコピー後、 DreamweaverでHTMLドキュメントを新規作成してペーストするか、「名前をつけて保存」をする。 ここでは前者を例に取る。 「Webページとして保存」した場合 表はHTMLのテーブルタグに変換され、こんなソースが出ます。（headは省略） 「ブラウザでプレビュー」から保存した場合 Firebugなどの開発者ツール経由
![[Dreamweaver] エクセルが自動生成するテーブルのHTMLをクリーンアップする](https://cdn-ak-scissors.b.st-hatena.com/image/square/09fe547803c5b61a7d541fb1a12c556e23674152/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F09%2Fdwr.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS3] border-radius + overflow:hidden の角丸が取れる
[CSS] border-radiusで作った半円がAndroid4で歪む