この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。
![CSS Grid Layoutをガッツリ使った所感 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f26cf5b896dc6be76099acf0e0749e892ba8a05b/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJTIwR3JpZCUyMExheW91dCVFMyU4MiU5MiVFMyU4MiVBQyVFMyU4MyU4MyVFMyU4MyU4NCVFMyU4MyVBQSVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFNiU4OSU4MCVFNiU4NCU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Y2NlNjJiNDM2ZmFjNTExMjVkNmZhOTFkZmE1NDFmZDM%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjbG9ja21ha2VyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iYTliNTY3MGNhZWIzNjY5MDhhODlhZDUwNjNmMWEyMw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-SUNTIA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D24fc2bac5d6e562d5ac74f5dd0456142)
対象ソフトウェア:Windows 2000/Windows XP/Windows Vista/Windows 7/Windows 8/Windows 8.1/Windows 10/Windows Server 2003/Windows Server 2008/Windows Server 2008 R2/Windows Server 2012/Windows Server 2012 R2/Windows Server 2016、IE5/IE5.5/IE6/IE7/IE8/IE9/IE10/IE11/Microsoft Edge Windows OSに標準装備のWebブラウザ「Internet Explorer(IE)」は、Windows OSと同様、機能や性能の向上のためにバージョンアップが繰り返されてきた。Windows 2000からWindows 10の間にリリースされたIEは、主要な
消滅してしまったmodern.IEの代わりとなるものは? 2016年2月26日 以前はmicrosoftのサイト内にmodern.IEという、旧式のIEがインストールされた仮想環境をダウンロードできるページが存在していたのですが、そのmodern.IEがいつのまにか無くなっていました。すでにサポートが切れた、IE9に対応させなければいけない案件がいまだに存在するので、modern.IEが必要だったのですが…。 別のページに移動していた。 Virtual Machine (VM), Windows Virtual PC & BrowserStack : Microsoft Edge Dev 実は上記のページに移動していたようです。ページ名や見た目こそ変わったものの、機能はほとんどmodern.IEと同じで、こちらから旧式のIEがインストール済みの仮想環境をダウンロードすることができます。 し
var userAgent = window.navigator.userAgent; // 例えばChromeを使ってると // userAgent: Mozilla/5.0 (windows nt 6.3; wow64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 window.navigatorでnavigatorオブジェクトが取れます。 このnavigatorオブジェクトはクッキーが有効かどうかや言語などブラウザに関する情報をいろいろ持っています。 リファレンスはこちら Navigator Web API インターフェース | MDN navigator.userAgentでブラウザのユーザーエージェントの文字列が返ってくるのですが、やけに長ったらしいので、ここに「Chrome」な
https://www.modern.ie/ で IE テスト用のバーチャルマシンを無料配布していて、 90 日間は無料で利用でき、さらに回数制限はあるもののライセンス利用期間の延長もできる、と、ここまでの情報はたくさん見つかるが、不思議とライセンス利用期間を延長する方法をどこのウェブサイトも記載していなかった(たぶん方法を知らず、調べもしないのだろう) modern.ie のサイト上を見て回ったり、ライセンス条項を記したテキストファイルも読んではみたものの、やり方がわからずじまいだったのだが、この前ふと立ち上げた VM のデスクトップの壁紙を眺めていて、「実は壁紙にやり方が書いてある」ことに気づいた。まさか有意義な情報が書いてあるとは思いもせず、読もうと思ったことすらなかった。灯台下暗し。 残りの利用期間を知るには、コマンドプロンプトを起動して slmgr /dlv と入力する。 利用期
IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白 いまだに、IE 11 のシェアが多いので、 この手のバグへの対策は、メンドー臭い。 IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。 単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。 (同じ Microsoft でも Edge なら、メイリオ以外でも問題ない) 参考サイト 最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。 例えば、font-family を ↓ このように指定してるなら、 body { font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro
売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください
LaVie(~2014年12月発表)、他… (すべて表示する)、 (折りたたむ) VALUESTAR、Mate、VersaPro
一昨日書いた CSS Talk vol.3 において、私のセッション後の質疑応答やアンケートの意見で「IEだとしんどいのか」「IEって結局非対応?」という声が非常に多かったです。 IEのシェアは世界規模だと1割を切っている所まで低下していますが日本だとまだまだ多く(3月現在で約24%・StatCounter調べ)、Webサイト制作やアプリ開発などで気にされる方もまだまだ多いようです。 ということで、IE/Edgeでの対応について改めて調べ直しました。 ……先に結論。 相当しんどい。 Microsoftのサイトの「グリッドレイアウト」を見るとIE10からの対応となっているのですが、ベンダープレフィックスをつけるだけでなくプロパティ名が違うものも幾つかあったり。 以下にIE/Edge対応のための書き換えの一部を記載します。 親要素 display:grid → display: -ms-gri
先日、Microsoftが公式にWindows7のインストールメディアをダウンロード配布していることを話題にしました。 Windows7のインストールメディア(ISO)がマイクロソフトから公式ダウンロードできるようになってます | Tipstour プロダクトキーが必要とはいえ、インストールメディアごとダウンロード可能にしているとは、MSもなかなか大胆なことをするようになりましたね。 いい感じです。 別件で調べものをしていたら、また面白いものを見つけました。 どうやらMSはWindowsとInternet Explorerでの動作検証用に、色んなバージョン・色んなプラットフォームの仮想マシンを公式に配布しているようです。 これは色々使えそう!
<select> <option>test1</option> <option>test2</option> </select> のtest1を非表示にしたいのですが、javascript 、jqueryで可能でしょうか? firefoxでは、cssのdisplay:noneで非表示になりますが、IEでは実現できませんでした。
問題はどんな言語で書いても起こることですが、たまたま仕事でPHPつかってたときにぶつかったのでメモしておきます。 結論 HTTPのレスポンスヘッダで Content-Disposition: attachment; filename*=UTF-8''URLエンコードされたファイル名を送ってあげる。 追記 2017/11/02: Edgeでも通用するようです。https://github.com/netcommons/NetCommons2/issues/126 ファイル名が化ける PHPでファイルアップローダをつくっていました。 動作確認はUbuntu 14.04のFirefox30をつかっていましたが、社内ではIE11がデフォ。「一応やっとくか」とIE11で動かしたら、日本語のファイル名が見事に化けました。 またお前か、IE!チキショー Slim Frameworkをつかっているので、こ
条件分岐コメントを使うと、通常のブラウザにとってはただのHTMLのコメントだけど、Internet Exploerだけに、都合よくその部分を有効なHTMLとして認識させることができる。 以前はよく使われていましたが、 Internet Explorer 10 の標準モードと Quirks モードでは、条件付きコメントのサポートが削除されました。 http://msdn.microsoft.com/ja-jp/library/ie/hh801214%28v=vs.85%29.aspx なので、IE8、IE9に対して何らかの対策をしたいときや、いまだにIE6、IE7を考慮しなくてはならない場合など、今後は限定された状況で使われることになると思います。 以下、それでも使うとしたら、の場合。 IEすべてに <!--[if IE]>あなたはIEですね!でもIE10ではないですね!<![endif]-
autocomplete attribute | autocomplete property http://msdn.microsoft.com/en-us/library/ie/ms533486.aspx Internet Explorer 11 では既に多く話題になっているように色々な動作変更が含まれていますが、まだあまり話題になっていないような変更点について一つ紹介したいと思います。 Internet Explroer を含む多くのブラウザーにはオートコンプリート機能があり、Web ページ上のフォームに入力したデータをブラウザー側で記憶しておき、同じフォームが表示された際に自動的に記憶したデータを自動的に入力できます。これはユーザー名とパスワードを入力するログオン画面で特に便利でしょう。 このオートコンプリートの動作を Web ページから制御する方法として、入力する要素 (タグ) に
Internet Explorer 11でmaxlength属性を設定すると漢字変換前のひらがな入力がmaxlength属性で指定した文字数しか入力できない問題があることがマイクロソフトの公式サイトで報告された。 http://support.microsoft.com/kb/2922126/ja そんな馬鹿なと思い試したところ確かに指定したmaxlengthの値までしか入力できない。maxlength="7"を指定したinputタグを下記に置いたのでIE11で試してみていただきたい。 これから先、IE11のシェアが多くなることを考えるとmaxlength属性の使用は控えたほうが良さそうだ。 どうしてもIE11でも文字入力の最大数を指定しなければならない場合は下記のようにJavaScriptで代用できる。 $(function(){ $("input").on(&quo
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します! ↑私が10年以上利用している会計ソフト! Flexboxって何? FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる! 横並びになった要素の高さが最初から揃ってる! 要素を上下左右、好きな順序に並び替えられる! スペースの
##はじめに FirefoxとかChromeなら問題ないがIEだと上手く動作しないとかはよくある話だと思う。その要因の一つであるconsole.log使用時のエラーに、つい最近ハマったのでメモしておく。 ##対処法 そもそもなぜconsole.log使用時にエラーが出るのかといえば、IEがConsoleAPIに対応していないために、window.consoleの時点でundefinedを吐くからである。対処法としては、 // consoleプロパティとlog関数作ってとりあえずエラー回避 if(!window.console) { window.console = { log: function(msg){} }; }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く