興味深いテクニックを多々取り入れている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の特定のバージョンでロードさせるべ
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
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などのサポートが遅れたため、ほかのブラウザーと同様にモダンな機能を提供して
Windows 8 で魅力的なWeb サイトを作る
2. • 村地 彰（aka hebikuzure） • 株式会社シーピーエス 代表取締役 • Twitter : @hebikuzure • Facebook : https://www.facebook.com/amurachi • Web site : http://www.hebikuzure.com/ • Blog : http://hebikuzure.wordpress.com/ • Mail : 3. ブラウザー勉強会は東京近辺で開催する Web ブラウザーについての勉強会です。 ブラウザー勉強会では、開発者と IT プロ フェッショナルそれぞれのニーズに向き合 い、参加者相互の情報交換やディスカッショ ン、ベンダーや専門家のプレゼンテーション などを通じて、より有効で有益な情報に接す る機会が得られることを目指しています。 11 May 2013 © Murachi Aki
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
jQueryのselectタグ操作かんたんまとめ | もしもワークス
jQueryでselectまわりをいじるときのまとめです。 基本 選択項目の値を取得する。 $('select').val(); //短い書き方 $('select option:selected').val(); 任意の項目を選択する。 $('select').val('hoge'); //optionのvalueに相当する値を代入 選択項目の変更を察知する。 $('select').change(function() { alert( $(this).val() ); }); 選択項目を変更し、かつ変更イベントをトリガーする。 $('select').val('hoge').trigger('change'); 応用 表示項目を切り替え プルダウンリストの項目を操作して状況に応じて表示項目を切り替えたい。 ここでは#fooは対象のselect要素。class=”bar”のoption
[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms
デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。 将来的にはスクリプトを使って、機能を強化していくようですよ。 Grid Forms Grid Formsのデモ Grid Formsの使い方 Grid Formsのデモ 本格的なデモの前に、まずは簡単なデモから。 デモはChrome, Safari, Firefoxなどのモダンブラウザ、スマフォ・タブレットのブラウザでご覧ください。IEは9+で、IE8以下はレスポンシブ非対応ですが別スクリプトを併用することで対応可です。 Grid Formsはその名の通りグリッドをベースにしたフォームで、紙のようなレイアウトの美しいフォームを簡単に実装できます。 デモページでは、フォームのさまざまな要素が美しいグリッドできっちりレイアウトされてい
Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開
Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開 白石 俊平（HTML5 Experts.jp編集長） Web開発のあり方を大きく変えると期待されている、Web Components仕様に準拠した新たなUIコンポーネントライブラリをMozillaが開発していることが明らかになりました（今回のネタ元になった記事はこちら）。 その名もBrickです。 Brickは、Brickは、X-Tagというフレームワークの上で構築されています。 X-Tagは、Web Components仕様に準拠したカスタムコンポーネントを容易に作ることができるようにするフレームワークです。 また、X-TagはPolymerというライブラリが提供するPolyfillを使用しており、IE9を含むモダンブラウザ上でWeb Componentsを利用可能にします。 そもそもWeb Comp
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】 | DevelopersIO
IE6はﾀﾋぬDeath! こんばんは、クラスメソッドWebマスターの野中です。 今日はクリスマスですね、社内には独り身の負のオーラが満ちてます（既婚者が多いので残っている人は少ない）。 ところで、最近はCSS3もすこしずつ使えるようになってきていて、IE6からIE8の対応を蔑ろにしてしまっている自分がいます。 Web制作に携わってから6年、常に付きまとう古いIEは腐れ縁というか、ある意味青春ですね。 とっても今さら感たっぷりなお題目ですが、ここでIE対応のポイントを自分のために総浚いして青春に決着をつけたいと思います。 過去の経験と情報収集をもとにまとめているので実際にテストしたものではありません。 解決のきっかけ程度になれば良いと思いまとめています。 IEの現状 一般的なブラウザと先進的なブラウザに対する手法と考え方 ドキュメントタイプ：文書型定義 IE向け条件付きコメントで分岐処理
Internet Explorer 10 on Windows 8のHTML5／CSS3新機能（1/4） - ＠IT
特集：Web制作者＆開発者のためのIE10概説 Internet Explorer 10 on Windows 8のHTML5／CSS3新機能 尾崎 義尚 2012/08/24 ■はじめに ついにWindows 8の製品開発が完了し、8月16日からMSDNサブスクリプション会員向けに製品版の提供が開始された。執筆時点では、Internet Explorer 10（以降、IE10）単体での提供はされていないが、IE10はWindows 7以降にも提供される予定である（Windows Vista以前には非対応）。 以前、IE10 Platform Preview 2（以後、Platform Previewは「PP」と略す）までに追加された機能を紹介したが、その後も「8～12週ごとにPPを公開する」という公約どおりに提供され、2012年6月には、PP6まで公開された。ただし、Windows 7上
Internet Explorer 9正式版のHTML5／CSS3／SVG対応
Internet Explorer 9正式版のHTML5／CSS3／SVG対応：特集：Web制作者＆開発者のためのIE9概説（後編）（1/3 ページ） 連載目次 前編に引き続き、Internet Explorer 9（以降、IE9）正式版の新機能について解説する。後編である今回は、IE9の主要なHTML5／CSS3／SVG対応機能を紹介する。 ■4. HTML5対応 最近、HTML5への注目度が高まっている。2011年6月に米国で行われた「次期Windows 8（コード名）プレビュー・イベント」で、「“HTML5”で記述できるWindowsネイティブ・アプリケーション」（まだ詳細は不明）という新しいアプリケーション種別が登場することが発表されたことからも、その勢いは増すばかりだ。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系である.NET開発者も大きな関心と
IE Fuck!(ieのバグまとめ) - Qiita
@importの読み込み順バグ @importでcssをモジュール化した場合、IEのみ読み込み順が上からではなく、ランダムに読まれる。よってreset.cssなどがあとに読まれたりしてバグる。 @importは3階層以上深くは潜れない z-indexの値が認識されない(ie6,ie7) 2つのdivの親要素が別々でz-indexは指定しない場合、IE6とIE7以外のブラウザは子要素のz-indexの値が優先されるが、IE6とIE7は親要素の出現順が影響します。 参考サイトIEのz-indexのバグを思い出す png問題 IE6~8 6.0はpngの透過を表示出来ない 7,8はpngのフェードイン、フェードアウトを表示出来ない。 margin autoが効かない 対策 text-align:centerにて対応する
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
複数のclassをセレクタに指定する方法 | Blog hamashun.com
関連リンク 複数のclassをセレクタに指定する方法 複数のclassをセレクタに指定する際のメモ書き 複数のclassをセレクタに指定した際のIEのバグ 2007年5月23日 修正および追記 この記事に対するメモ書きを作成しました。 HTMLに複数のclassを指定する事、ありますよね。 <div class="sample code"> こんな感じの。 んで、CSS側で「sampleとcode、両方のclassに適合する要素」というセレクタを書くには、 div.sample.code { color: red; } こんな感じにすればOK。 もちろん仕様書にも書いてあります。 意外と見かけないから書いてみました。
JavaScript で DOMContentLoaded や onload を使う理由、の備忘録 - kanonji’s diary
JavaScript を scriptタグで書く際、JavaScript の処理と html のパースは同じ時間の流れで進みます。 大抵は scriptタグを headタグ内に記述するため、いきなり DOM でアクセスしようとしても、body ですらパースされていません。 html のパースが終わって DOMツリーが出来上がるまで待つ必要があります。 ぶっちゃけ当たり前の話ですが、JavaScript も jQuery などのライブラリを使っていると、この辺を意識しなくなるので、ふと分からなくなる事があります。 なので見れば思い出すようにメモしておきます。 主にアクセス解析用のscriptタグはどこに書くべきか、よく忘れるのでメモ - kanonjiの日記 から、色々と考えていたら、なんだか気になってしまいました。 DOMツリーの完成*1を待ってから処理を始めるためのメソッド docume
scriptタグをdocument.writeで出力する場合の動作 - Backstage of theater.js
jsファイルの動的ロードはポピュラーな話題です。私も自分でdocument.writeで書き出したscriptタグが有効なのを見つけたときは驚きました。 これを利用してASPのincludeみたいなことができないかなと試行錯誤中ですが、どうも無理がある感じです。。。*1 原因の一つに、document.writeされたscriptタグの実行順序の問題があります。これはつまり、ページに書き込まれたタグの順番なわけですが、これがブラウザによって違う場合があるのです。 以下、サンプル。 [test.htm] <html> <head> <title></title> <script src="test1.js"></script> <script src="test2.js"></script> </head> <body onload="document.getElementById('tes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - audreyfeldroy/favicon-cheat-sheet: Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
position：fixedのright , bottomをIE6に対応させる | CSS Lecture