フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
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を一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
ブラウザ、モバイル、タブレット、IEバージョンは？を一発判定するjQueryプラグイン書いた
こんばんは、ころすけ(@wg_koro)です。 今までjQueryプラグインって書いたことなかったなー・・・ってことで、プラグイン一個書いてみました。 https://github.com/wgkoro/detectbrowser detectBrowser.js | jQuery Plugin Registry ※jQuery Plugin Registryにも載せてみたよ！ モバイル(携帯・タブレット)かPCか、ブラウザは何かを判別 これ一つで下記を判別します。 モバイル機器(iPhone, Android, iPad, Windows Phone)か否か タブレットか否か 使っているブラウザは何か IEだった場合、IEのバージョンは何か (6以降を判別します) デモサイト 下記ページのボタンを押すと、結果が表示されます。お試しあれ。 DetectBrowser DEMO 使い方 モバ
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
InternetExplorerでinputにつく×は::-ms-clearでスタイル適用
InternetExplorer10以上で、１行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。 これを押すと、入力されている内容をクリアできるのですが お客さんから、違和感があるから消してほしいと要望があったり テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと 初期設定のままでは何かと使いにくい場面の多い機能です。 このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。 ※InternetExplorer10以上でご覧ください。 試してみたところ。:hoverも組み合わせられました。 <div class="sample"> <input type="text"> </div> <div class="sample"> <input type="text" class="custom">
modern.IEのWindows 7で日本語の表示と入力をできるようにする - Qiita
2014-09-08 追記 White Tiger - 英語版Windows 7 Ultimateを日本語化する方法にスクリーンショット入りの親切な記事があったので、お好みでそちらをご参照ください。 概要 Modern.IEのサイトで配布されているIEテスト用のWindows VMは英語環境になっています。これに日本語ランゲージパックをインストールして、日本語の表示と入力をできるようにするための手順のメモです。ついでにタイムゾーンも日本に変更します。 試したVMはIE8 Win7です。環境はOS X 10.8.5上のVirtualBox 4.3.6です。 タイムゾーンを日本に変更。 スタートメニューの[Control Panel]をクリックします。 [Clock, Language, and Region]セクションのリンクをクリックします。 [Date and Time]セクションの[C
position:absoluteを指定した空要素はhoverイベントが起こらない
jQueryを触っていて、position:absoluteを指定した空の要素のhoverイベントを使用したかったのですが、IEだとhoverイベントが起こらない。 Firefox3とChromeではちゃんとhoverイベントは起こります。 いろいろとイジっていると、background-colorを指定することでhoverイベントが起こるようになった。 こんなこと知らないよ、ふつう… 私は都合上、見えない空要素に対してhoverイベントを起こしたかったのでopacityを0にしたが問題なくイベントは起こってくれる。 background-colorを指定する以外にbackground-imageを指定してもhoverイベントが起こる。 不思議なことに指定する画像は実際に存在する必要がない。 CSSで表すとこんな感じです。 #target{ position:absolute; backg
Cross-browser testing simplified | Internet Explorer の検証がより簡単に | modern.IE
BrowserStack を使うと、あらゆるブラウザー、あらゆるプラットフォームでサイトを瞬時に表示できます。 3 か月間無料でお試しいただけます。 Test on BrowserStack 有効な URL を入力してください BrowserStack によるテストが 3 か月間無料 BrowserStack との提携により、次期プロジェクト用の仮想インタラクティブ テストをご利用いただけます。 Windows プラットフォームで動作する任意のバージョンのブラウザーでサイトをテストしましょう。 キャンペーンの有効期限は 2014 年 1 月 10 日です。ログイン時に 3 か月の利用期間が開始されます。 追加条件が適用される場合があります。 詳しくはこちら# 478938 詳細を見る
条件付きコメントでIE9以降とIE以外のブラウザだけに表示する at softelメモ
問題 古いIEでは表示できないcanvasを使っていたり、古いIEではJavascriptの処理が遅すぎたりするとき、「古いIEの場合だけ非表示にする」みたいなことできるかな。 答え こんな条件付きコメントを書くと、IE9以降とfirefox、Chrome、Opera etc. のみに表示することができる。 <!--[if (gte IE 9)|!(IE)]><!--> <div> ここはモダンなブラウザにしか見えないんですよー </div> <!--<![endif]-->
JavaScript とかによるブラウザ判定方法のまとめ - A Memorandum
JavaScript でのブラウザ判定について まとまった情報がサクッとヒットしないので、まとめ UserAgent によるブラウザ判定 よくある単純な例 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('opera') != -1) { return 'opera'; } else if (userAgent.indexOf('msie') != -1) { return 'ie'; } else if (userAgent.indexOf('chrome') != -1) { return 'chrome'; } else if (userAgent.indexOf('safari') != -1) { return 'safari'; } else if (userAgen
IE判定ってどうするのが一番いいの？って気になった - たぶん忘れるメモ
ググってみたらこちらで素敵にまとめられてた件… http://d.hatena.ne.jp/Naotsugu/20110927/1317140891 でも折角なので、手持ちのスクリプトをgrepしてみて引っかかったこの２タイプの違いについて調べてみる。 【1】 if (/*@cc_on!@*/false) { // for IE 【2】 if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) { // for IE 【1】 @がついてるのは、JScriptの条件付きコンパイル。 http://msdn.microsoft.com/ja-jp/library/7kx09ct1.aspx これはコメントで囲んでる中身がIEのとき（JScriptが実行される環境にあるとき）実行される。 なので、 @cc_on で条件付
画像の縦横中央配置 / 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
【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
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...
InternetExplorerで、あるフォントの位置が上に微妙にズレる問題を解決 | スタジオ・ボウズ
