いまさらだけど、font-sizeを比較してみた - entacl Lab.
css font 投稿日： 2012.09.27 投稿者： 小平 yahoo YUIファンは、パーセントかな？ ピクセルはもうなかなかいないのかな？ emでやってると、結構らくちんなのかな？ remでやってるのは、css3できりすてなのかな？ などなど 思っていたら比較してみよってことで比較しました。 font-sizeの種類比較 各デモもつくってみました、なんとなくですがw ブラウザ間にてもきれいにサイズは表示できるようしている状態です。 ピクセル - px 往年のご隠居的存在ですね あえてピクセルを使う必要ってないですよね メリット ピクセルの世界のweb屋にとってはわかりやすい デメリット IEで文字拡大できない パーセント yahoo!YUIリセットcssなどを使用している場合は、わかりやすそうです。 とりあえず、↓のcssをデモしてみました→ body { font-size:
興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless
当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridless [ad#ad-2] Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSSを使用。 参考：ブラウザのスタイルをリセットするスタイルシート -Normalize CSS 黄金比をベースにしたサイズと縦のリズムを使ったタイポグラフィ。 印刷時のスタイルをプリント時に最適化。 キャッシュの最適化。 HTML5+CSS3の採用。 安全なCSS Hack。 参考：IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
二重論理否定
よくif文などに用いられる判定文で、!!という論理否定を二重にしたステートメントに出くわすことがある。 具体的には次のようなコードだ。 if(!!obj)//objがundefinedでないときの処理 なぜこのようなことが必要なのか？ 通常undefinedであればfalseが返るはずであり、単純にif(obj)でいいのではないだろうか？ 実はundefinedをfalseに変換しない古いブラウザやバグのあるブラウザなどに対処するために、わざわざこのようなことをしているようだ。 undefinedというプリミティヴ値自体がJavaScript1.3から定義されるようになったものであり、 古いブラウザやMac+IE5なんかだと単なるif(obj)という式自体がエラーになってしまうらしい。 よく海外の古いソースコードを見ていると、変数にfalseになるような値を代入して初期化しているのを見かけ
CSSで画像を上下左右に反転する方法 - Qiita
画像の切り抜きを行うのに使ったサンプル。 IE8でも動作した。結構昔からFlipってあるのね。知らなかった。 IEだとDXImageTransform.Microsoft.BasicImage()があるけど、これと同じことらしい。 <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <title>画像の上下左右反転サンプル</title> <style> .refrect-lr{ -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -moz-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .refrect-ud{ -webkit-tran
11分で覚える、IE11対応Web制作のカンニングペーパー(後篇) | ウェブ制作者向けWindows8アプリ開発
11分で覚える、IE11対応Web制作のカンニングペーパー(後篇) 投稿日時：2013 年 12 月 19 日 ライター：KawadaHiroshi こんにちは！ブログ「ふろしき.js」のライター、川田です。 悲しいことに、今回はあまりカッコイイ機能を紹介できません！扱っているネタが、とてつもなく地味なんです。写真で見せてもなにも凄さが伝わってこないので、例えばそう、カリフォルニアの草原みたいな癒やされそうな画像とか載せて、Facebookのサムネイル詐欺とかやった方がいいんじゃないだろうかと、そんな誘惑と戦っております。(怒られます) さて今回の話、すごく地味かもしれないけど、IE11が実装した機能の中でもかなり重要な技術ばかりです。IE11はスマートデバイスが抱えた過酷な環境で、いかに高いユーザビリティが得られるかということを追求したブラウザに思えます。まさにSurface2のよ
11分で覚える、IE11対応Web制作のカンニングペーパー(前篇) | ウェブ制作者向けWindows8アプリ開発
11分で覚える、IE11対応Web制作のカンニングペーパー(前篇) 投稿日時：2013 年 12 月 10 日 ライター：KawadaHiroshi こんにちは！ブログ「ふろしき.js」のライター、川田です。 悲しいことに、最近はどのブラウザもすぐにバージョンアップしてしまうため、誰もバージョンアップに注目してくれません！そんなのイチイチ調べるのは、とっても面倒だし、眠くなるし、そもそもそんな暇があったら、SassとかGruntとか流行りモノの勉強をした方がモテそうですからね。 ええ、わかってますとも！ なので今回、忙しい人のために、いやむしろせっかちな人のために、なんとたったの11分でIE11らしいWeb制作のエッセンスが語れるようになれる、裏ワザのようなまとめ記事を書いてみました。「IE11ってどんなブラウザなの？」「今までと何が違うの？」なんて質問を社内の憧れの女性社員にされて
Web制作者は注意！ Internet Explorer 11で変更された「互換性」
Windows 8.1正式版がMSDNサブスクライバー向けに公開され、それに標準搭載される「IE11」も正式版となった。しかしこのIE11にはWeb制作者に大きな影響がある「互換性」に関する変更が含まれている。 2013年9月10日、MSDN Subscriptionの登録者は、Windows 8.1正式版がダウンロードできるようになった。Windows 8.1の標準ブラウザーであるInternet Explorer 11（以下、IE11）では、互換性に関する大きな変更が加えられている。 ご存じのとおり、IEは、現在も更新されているブラウザーの中では最古参のブラウザーである。ほかのブラウザーが新しく登場して、HTML5などモダンな機能を実装していく中、互換性の課題に引きずられているという問題があった。また、HTML5などのサポートが遅れたため、ほかのブラウザーと同様にモダンな機能を提供して
ネットに詳しくなりすぎて重要な事を見落としていませんか？ | らふらく^^ ~ブログで飯を食う~
ネットに詳しくなると、重要な事、世間では当たり前の事が見えなくなってしまいます。まだIEを使い続けている人は多いです。キュレーションアプリは意外なほど使われていません。こうした事実に気づいていますか？ 僕たちはネットに詳しくなりすぎている Sandy surfin the net / RobEBowen 最近、サービス運営者の方々とお話ししていて気づいていたのですが、僕たちはネットに詳しくなりすぎて色んなことを見落としてしまっています。僕は前職Web系の会社にいたため、Webサービスが好きです。 新しくリリースされたサービスはまず使ってみますし、Webサービスカテゴリがあるくらいですからサービスに対して考察するのも好きです。なので、自然とWebサービスなどネットの知識は豊富になります。 しかし、ネットに対する知識が豊富になればなるほど、マニアックな方に向かってしまい、自分がマイノリティにな
P3Pコンパクトポリシーをコピペするのが流行らないことを祈る | 水無月ばけらのえび日記
なにげにしらなかったんだけど、IEで別ドメインのiframeを読み込むと、そのiframe内のcookieが有効にならない。 そーゆーときは、HTTPのリクエスト時のヘッダーに下記のkey＆valueを出力しておけばOKらしい。 ("P3P", 'CP="CAO PSA OUR"') こーするだけで、あらふしぎ。IEがCookieを保存してくれるじゃん。 ……。 iframeで別ドメインのコンテンツを読み込むと、そのCookieはサードパーティーのCookieとなります。IEのデフォルトでは、ポリシーが定義されていないサードパーティーのCookieは受け入れないようになっていて、P3P (www.w3.org)でポリシーを宣言すれば受け入れられるようになります。 P3Pのポリシーを定義するには、がっつりとXMLを用意する方法もありますが、HTTP応答ヘッダの中に直接書くという方法もあり、コ
IEでクロスドメインのiframe内のcookieが取れない | サイト構築日記
ifame（インラインフレーム）は、html中にフレームを埋め込めれるのですごく便利な機能である。しかし昔からセキュリティの面でいろいろ問題になってきた。 今回はIEがiframe内のクッキー処理をセキュリティでブロックした為、その対策方法を調べた。 現象のサンプル ローカル環境でサンプルプログラムを作っています。ドメイン「localhost」のp3p_test.html からドメイン「192.168.24.61」の iframe_contents.html をiframeで表示しました。 同じサーバなのですがローカルIPで指定することでクロスドメインとして判定されて現象が再現できました。 【p3p_test.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/
Windows 8 で魅力的なWeb サイトを作る
Etsy is using Solr and Lucene to serve queries at a rate of more than 8 billion per year (and growing). In this case study, we will describe how Etsy has integrated Solr/Lucene into our continuous deployment infrastructure, allowing for Solr configuration, Java-based indexers, and query parsing logic to go from passing tests to production code in minutes. ISS is a software solutions company that p
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
[Windows8 モダンUI] IEでのスワイプ操作実装でヒストリー（戻る/進む）との競合を防ぐ方法 | DevelopersIO
Windwos8のモダンUIモードでは左右のスワイプがヒストリー（戻る/進む）として割り当てられる スワイプ等の操作をWindows8のモダンUIモードでのIEで行わせる場合は注意が必要です。 モダンUIモードでのIEは左右のスワイプの挙動が履歴の前後の移動として割り当てられているため、操作が競合してしまいます。 例えば下記のような操作をユーザーに行わせようとすると、対象のオブジェクトの移動（送り）が行われずヒストリーの前後移動が行われてしまいます。 スライドを次々にスワイプで送って閲覧する 複数のサムネイルを横並びに配置して横スライドバーを表示する代わりにスワイプして送る 既に上記のような機能を実装しているサイトなどではモダンUI用に対応が必要になります。 解決策 IE10用のタッチに関するCSS プロパティ（-ms-touch-action）が用意されていますので、これを対象のエリアや
【Web開発者必見！】Windows8タブレット向けWebサイトを構築する際に知っておくべき9つのポイント | DevelopersIO
【Web開発者必見！】Windows8タブレット向けWebサイトを構築する際に知っておくべき9つのポイント Windows8が出てしばらく経ちました。今後はWindows8のタブレットやハイブリッド型のノートPCが普及して、モダンUIのブラウザも開発対象になっていくと思います。弊社ではWindows8タブレット、モダンUIのInternet Explorer10を対象にしたWeb案件も始まっています。既存のサイトをモダンUIブラウザに対応することも増えるでしょう。そこでデスクトップのブラウザで開発する場合とどのような違いがあるのかをまとめてみました。あと誤解のないようにいっておくとタブレットでも一応、デスクトップのブラウザは使えます。ただタッチパネル用ではないのであまり使いやすくありません。ですのでタッチパネル向け＝モダンUIブラウザ向け という前提で話を進めます。 1. モダンUIブラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG![[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/7600b8bd7209e2506afdfe6c6263f79c6cbba297/height=288;version=1;width=512/http%3A%2F%2F5log.jp%2Fwordpress%2Fwp-content%2Fthemes%2F5log%2Fimg%2Fog_img.png)
[JavaScript][IE] みんなが幸せになれるコード - Qiita![[JavaScript][IE] みんなが幸せになれるコード - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/462c55fa9defa3f165c9c5869d1fafb6641b0a81/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCU1QklFJTVEJTIwJUUzJTgxJUJGJUUzJTgyJTkzJUUzJTgxJUFBJUUzJTgxJThDJUU1JUI5JUI4JUUzJTgxJTlCJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThDJUUzJTgyJThCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NmZlZjdkNjZjOWM0MGQ1OTY2NjZkZTNjNjhhNjVjZg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcGhpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNzMyODE2YjRmOTNiOTE5N2U1YjI1NGNlZGNmMGY1OA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8ef704f0975a4f75fb0b08eb755c8880)
WebAPIのこれまでとこれから
Microsoft、「Internet Explorer Developer Channel」を公開