IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
HTML5入門 - IE対応「html5shiv.js」の使い方 - Webkaru
HTML5 で作製したサイトを Internet Explorer 8（IE8）以前のバージョンで閲覧すると……レイアウトががっつりくずれます。 これは HTML5 から新たに導入されたタグ aside article header nav section ……などを解釈してくれないからです。 ここでは、これらのタグを IE8 以前のバージョンに対応させるための対策方法のひとつである「html5shiv.js」というスクリプトを読み込ませる方法を紹介します。 「Download ZIP」をクリックします。 ダウンロードした zipファイル「html5shiv-master」を解凍し、dist/html5shiv.js ファイルを対応させたいサイトからにアップロードします。 次に html5shiv.js を読み込む以下のコードを head 内に挿入します。 <!--[if lt IE 9]
今さら知った、IE9でIE7と8での表示を確認する方法
最近バタバタしていて更新が滞っています。そろそろFC2の広告が出そうなのでちょっとした小ネタを。 私のPCにはIE9が入っていて、IE7や8での表示確認には「IE Tester」というソフトを使っていました。ところが、IE9でIE7と8の表示を確認できることを先日知りました。 方法は簡単。まずは設定ボタンから開発者ツールを開きます。 するとブラウザの下の方に開発者ツールが現れます。Chromeでいうデベロッパーツールですね。 そこに、ブラウザーモードというのがあり、これでIE7や8での表示を確認することができます。IE6の確認はできませんがもういいです。 「今頃知ったのか」と笑われそうですが、個人的には結構便利だと思ったので紹介してみました。 いちいちバージョンごとで確認が必要なIEって本当に手のかかるブラウザです。IEがしっかりしていればCSS3ももっと浸透すると思うので残念です。
Utilu IE Collection - Utilu.com
Internet Explorer is a browser developed by Microsoft. Windows Internet Explorer (formerly Microsoft Internet Explorer) is based on the Trident render engine. Utilu IE Collection contains multiple IE versions, which are standalone so they can be used at the same time. This is useful for web developers. Utilu IE Collection supports both 32-bit and 64-bit versions (if available) of Microsoft Windows
画像の縦横中央配置 / CSS / クロスブラウザ
HTMLのソース。余計な改行やスペースを入れないこと。 <div class="image"><span class="dummy"></span><img src="xxx.png" /></div> CSS。 div.image { border: 1px solid #8ff; min-width: 320px; width: 320px; height: 240px; _width: 322px; _height: 242px; text-align: center; display: block; } div.image span.dummy { height: 240px; width: 0px; vertical-align: middle; display: inline-block; } div.image img { max-width: 320px; max-heig
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
