Firefoxで見ているページをChrome・Edgeなど他のブラウザで一発で開ける拡張機能「Open With」
FirefoxやGoogle Chromeなどさまざまなブラウザがある中、特定のブラウザでしか動作しないウェブアプリや画像データがあったとき、いちいち別のブラウザを立ち上げてURLをコピペするのは少々面倒です。Firefoxの拡張機能である「Open With」をインストールすると、最短2クリックで別ブラウザを立ち上げることができ、URLをコピペする必要もありません。 「Open With」でFirefoxからChrome・Edge・Operaブラウザを開く様子は以下のムービーから。 Firefoxの拡張機能「Open With」を使ってChrome・Edge・Operaを開く - YouTube Open With – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/open-with/ Open Wi
Chrome・Safari・IE・Firefox・EdgeのキャッシュとCookie削除方法まとめ
By jirkaejc ウェブブラウザに、ユーザーが閲覧したページの情報を一時的に保存するキャッシュや入力した情報を保存しておくCookieには、次回以降の閲覧時にウェブサイトを早く読み込んだり、IDやパスワード入力の手間を省いたりする役割があります。しかし、個人情報流出や予期せぬエラーの原因となってしまう可能性もあるため、場合によっては削除が必要になることもあります。各OSやブラウザごとに削除の手順が異なるので、キャッシュとCookieを削除する方法についてまとめてみました。 目次： ◆Windows＋Chrome ◆Windows＋IE ◆Windows＋Firefox ◆Windows＋Edge ◆macOS＋Chrome ◆macOS＋Safari ◆macOS＋Firefox ◆iOS＋Chrome ◆iOS＋Safari ◆iOS＋Firefox ◆Android＋Chrome
CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
IEでドキュメントモードの既定値を変更する方法
IEでドキュメントモードの既定値を変更する方法を紹介します。 １．問題点 会社のあるシステムを使っていると、IEで次のようにレイアウトが崩れてしまいました。 具体的には「承認者」の下にあるボタンがテーブルの中に入り込んでしまっています。 原因はブラウザのドキュメントモードらしいので、F12を押下して、開発者モードを表示。 （クリックで拡大） ドキュメントモードの「7」が既定値になっているので、最新の「Edge」を選択。 これでレイアウト崩れが解消しました。 が、このページを正常に表示させるには毎回この操作を行わなければならないのですが、常に「Edge」を既定値にする方法はないでしょうか。 ということで、ドキュメントモードの既定値を変更する方法を紹介します。 ２．ドキュメントモードの既定値を変更する ドキュメントモードの既定値を変更するには、「ツール」→「互換表示設定」をクリック。 「イント
ブラウザで表示が崩れた時の検証に便利！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ハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
