Webにおいて明朝体はNoto Serif CJKを使うべし -IE11対応版｜TechRacho by BPS株式会社
こんにちは。5月に産休育休から復職したデザイナーのニシです。 最近、健康と体力作りのために筋トレを始めました。毎日昼休みにコヤマさんと一緒に10分ほど筋トレしてます。皆さんもいかがですか。 今回は、レスポンシブサイトをデザイン・コーディングする際に明朝体の指定は何にするのが一番いいのか、試行錯誤した結果得た最適解を書きます。 最初に：結論 先に結論をいうと、 Google FontsのNoto Serif CJK（源ノ明朝）を使う IE11対応のためGoogle Fontsの設定で「Japanese」を必ず選択する です。Japaneseを選択しなかったというだけでかなり、右往左往してしまいました（後述）。 Google Fontsとしては他にも明朝体の選択肢はありますが、癖のない良い感じの明朝体というとやっぱりNoto Serif CJKかなーと思います。しかしいずれ、さわらび明朝も使っ
IE11でflexboxのアイテムがカラム落ちするときに使うmax-width | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
最近はウェブサイトのレイアウト組みでflexboxがよく使われています。flexboxを採用することで簡単にレスポンシブ対応のカラムレイアウトが作成できるのですが、一部ブラウザですと、まだところどころにバグがあるようです、、 &nb…
【jQuery】IEだとタッチイベントが効かない!?そんなときの対処法 | MaruMari Labo
先日更新したこの記事でjQueryを書き換えたとお伝えしました。 その延長で今回新た事象が発生しました。 Surface で IE を使用するとタッチでメニューが開かない 当初、jQueryを発動させるトリガーとして「click」「touch」を設けていました。 ですが、Consoleで確認したところ、IEでメニューを開くときにタッチしてもいずれのトリガーも発動せず・・・。 メニューを開いた際の動きも変な動きになってしまい・・・。 調べたところ、どうやらIE10以上で対応するようになった「タッチイベント」ですが、正確にはIEにおいては「ポインターイベント」というらしく、chromeや他のタッチデバイス（スマホなど）で対応している「タッチイベント」には対応していないとのこと。 そのため、jQueryのイベント発生のトリガーには「onpointer」を使用しないと動作しません。 ポインター イ
IEの条件付きコメントまとめ | NeGiMeMo.net
この記事は公開から 4024日くらい過ぎています。年で言ったら11.02年くらいです。 流石に情報が古くなってる可能性もあるので参考程度に御覧ください。
IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
IEやEdgeでSVGのサイズが変わってしまう問題の解決法！ | 株式会社キャッチボール・トゥエンティワン
こんにちは！ 以前編集長キックを受けていました。編集者Mです！ 今回はSVGでつまづいたことがありますので、 その問題の解決法を皆様にシェアしちゃいたいと思います！ SVGってすっごく便利ですよね！ ベクターデータで作られている画像なので、 jpgやgifなどと違ってどんなに大きく引き伸ばしてもキレイに表示してくれるんです！ しかも軽い！ ですが、そんなSVGにも落とし穴がありました。 IEやEdgeだとうまくサイズを調整できないッ！！！ 今回はアイコン付きの見出しを作っちゃおうと思い、 backgroundでSVG形式のアイコンを指定し、 background-sizeでアイコンの大きさを指定していました。 HTML
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を一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
Internet Explorer 11の開発者モードについて調査しました DOM Explorer/コンソール編 | バシャログ。
iPhone 5sに続きiPad mini Retinaディスプレイ買ったぜ！ フルサイズのiPadは日常的に持ち歩くにはちょっと大きい&重いですが、iPad miniなら十分毎日持ち歩けます。コミックビューアとゲームとニコニコPDFビューア・文書・スライド作成ツール・Evernote用として重宝してます！ さて、去る2013年11月8日(米国時間)、Internet Explorer 11がWindows 7 向けにも正式リリースされました。開発者ツールが見た目からして変わってたので調査しました。過去のバージョンとの互換性など気になるところも見つけましたが、とりあえず開発者ツールについて紹介します。 ところで、IEの開発者ツールはF12キーで開くことができますが、開発者ツールの名前も"F12"だったんですね。調査していて初めて知りました。 読み込んだHTMLページを読み込んで構築したDO
最近流行のレスポンシブWebサイト制作でのあれこれ | SONICMOOV LAB
こんにちは。 デザイン以外もいろいろ幅広く担当しているデザイナーの”ら～は～”です。 2012年から流行ると言われて、今年の2013年にはより一般的になってくると言われてる。 そんなレスポンシブサイトの制作について、実体験ベースにあれこれを職種ごとに紹介したいと思います。 結構長くなります。最後までお付き合いください。 目次 はじめに ディレクター編 デザイナー編 コーダー編 さいごに 1.はじめに そもそもレスポンシブWebサイトって？？ PC、タブレット、スマートフォンなどを、 1つのHTMLでデバイスごとに表示を変更できる制作手法です。 主に使われる技術は、CSS3からスタイルのMedia Type 拡張である「Media Queries」です。 これはデバイスのスクリーンサイズ毎にスタイルを読み替えてくれる機能で、各種デバイスに応じて見せ方を変更できるというわけです。 ※ほかにもJ
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ
問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> HTML5も！というときは、こちら。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecod
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
Microsoft Edge Features & Tips
Discover new features and helpful tips to get the best experience out of Edge.
IE8/9.jsで、ある条件が揃うとスタイルが飛んでしまう現象について - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） ちょっとハマったので備忘録。 IE7.jsは、クラシックなIEでモダンブラウザの機能を使うためのライブラリですが、 その系列のIE8/IE9.jsを使ってある条件が整うと、スタイルが消えてしまう不具合に遭遇しました。 ※執筆当初のIE7.jsの最新バージョンは、7.2.1(beta4) セレクタの一番はじめのプロパティの値が「inherit」 セレクタの一番はじめのプロパティと「{」の間にスペースや改行等がない セレクタ内で「inherit」を値にもつプロパティが二つ以上ある IE8.jsまたはIE9.jsを読み込んでいる これらの条件を全て揃えると、そのセレクタ以降のCSSが全て無効になってしまいます。 例えばこんなコードで再現出来ます。 input,textarea,select{font-family:inherit;fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Should I try to use the IE implementation of CSS Grid Layout? – Rachel Andrew
SVGをimgで表示した場合にIEだけサイズが変になる現象を直す - Qiita
IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB
webamb.com
Internet Explorer デベロッパー センター