prefers-color-schemeでOS設定のダークモードが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 10日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 10 日目 ダークモード対応って近年人気じゃないですか。自分はまああんまり興味ないんですが、なんか好きですよねみんな。 prefers-color-scheme を使うとその端末全体の設定を判定できるので、ダークモード、ライトモードの選択肢に「端末の設定に合わせる」を追加することもできます。 例 デモ：https://codepen.io/ginpei/pen/vYbPQBP :root { /* デフォルトでライトモード（あるいはフォールバック） */ --theme--background-color: #f0f0f0; --theme--color: #333; /* 端末がダークモードのとき */ @media (prefers-color-scheme: dark) { --theme--background-
CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks
iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるModern Font Stacksを紹介します。 日本語フォントには残念ながら対応していませんが、英語フォントを使用する際のfont-familyの書き方がまとめられています。 Modern Font Stacks Modern Font Stacks -GitHub Modern Font Stacksの特徴 Modern Font Stacksは、スマホ・デスクトップ用のOSにデフォルトでインストールされているフォントを確認できるサイトです。CSSのfont-familyに定義すると、フォントは各OSで利用可能な最速のフォントで、フォントがダウンロードされる必要はなし、レイア
ブラウザからデバイスに、OSまで！UA判定に便利なライブラリ「UAParser.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。 今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。 UAParser.jsの特徴 UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。 導入方法が豊富 判定可能な要素が多い 簡単に使える まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります（今回の記事では一般的な2つの導入方法をご紹介していきます）。 そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。 参考UR
知っておきたい！新旧ブラウザの見え方を最適化する「プログレッシブ・エンハンスメント」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※2016年2月末時点 対象環境って？ OS、ブラウザ、バージョンというものがあり、これらの組み合わせで対象環境を定義します。では、そもそも環境が違うと何が違うのでしょうか。 IE8とChrome最新版で見比べてみる 今回紹介するのは、ここ数年ですっかり定着してきたCSS3という技術を使ったときの、対応しているブラウザと未対応のブラウザでの見え方の比較です。具体的には、CSS3が対応しているChromeの最新版と、対応していないIE8で見たときの違いを紹介していきます。 角を丸くして柔らかさを付ける border-radiusを用いることで、角に丸みをつけることができます。 CSS3未対応だと、ただの四角になります。 要素に影をつけてみる box-shadowを用いることで、要素に影をつけることができます。 CSS3未対応だと、影がつきません。 グラデーションをつけてみる linear-g
Your Browser Blog - Guides & Tutorials on Everything Web
Even though the main purpose of playing casino games is to have fun, anyone who plays wants to win money. Those who are lucky enough to walk away a winner have every reason to celebrate.… Read More »Top Online Casinos With Fastest Payouts in 2023 The modern online casino sector has developed at the same time as the financial sector, and both have seen many innovations in recent years. As well as
自分のブラウザ・IPアドレス・PC環境などの情報をカンタンにまとめて相手にメール送信できる「yourbrowser.is」
いま使っているブラウザでアクセスするだけで、ブラウザやOSの種類、画面サイズ、プラグインなどの状況を取得してまとめて表示するサイトが「yourbrowser.is」です。サイト上からは取得した情報を希望のメールアドレスに送信することも可能です。 yourbrowser.is - check your customer's web browsing environment in seconds http://yourbrowser.is/ 使い方はカンタン。何も考えずにyourbrowser.isにアクセスするだけで、以下のような画面が表示されました。 画面には、ブラウザの種類やOSの種類、画面の解像度とサイト表示エリアの広さ、色深度、JavaScript・Flash・クッキーの状況が表示されています。 続く下半分には、現在のIPアドレスと場所、Facebook・Google+・Google
確認くん
▲HOME あなたの情報（確認くん） 情報を取得した時間 2023年 09月 24日 AM 02 時 19分 23秒 現在接続している場所(Server) www.ugtop.com あなたのＩＰアドレス(IPv4) 133.242.243.6 ゲートウェイの名前 (none) OSの解像度 現在のブラウザー HatenaBookmark/4.0 (Hatena::Bookmark; Analyzer) 表示サイズ： どこのURLから来たか (none) Proxyのバージョン等 (none) Proxyのステータス (none) / (none) / (none) Proxyの効果 (none) MIMEの仕様 */* FORMの情報 GET FCONTENTのタイプ (none) FORMの送信バイト数 (none) データ取得の手段 (none) クッキー (none) エンコードの
初心者のサポートに役立つOS・ブラウザ・IPアドレスなどの情報をカンタンにコピペ＆短縮URL化できる「What browser am I using?」
周囲の人よりも少しパソコンなどに詳しいとサポートセンター代わりに使われることが多くなるわけですが、相手に「環境を教えて」と言っても通じないばかりか「何もしていないのに壊れた！」というフレーズのみが延々と繰り返され、肝心の情報が得られないことが多々あります。そういう不毛なやりとりをスムーズに終わらせることができるのが「What browser am I using?」です。 What browser am I using? http://www.whatsmybrowser.org/ 使い方はとてもカンタン。というより、何も考えずにサイトにアクセスするだけ。すると以下のような画面が表示されました。 一番上には、今アクセスしているブラウザの名称とバージョン情報が表示されています。 ページ下部には各種環境設定の情報が一覧表示されています。 で、実際の使い方も簡単、とにかく相手にこのサイトのアドレ
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
たった1つのパスワードを覚えれば全OS・全ブラウザのあらゆるパスワード自動入力＆管理ができる「LastPass」
いろいろなサイトのIDやパスワードをすべて違うランダムなものにしておけば安全なのは分かっていても、入力や管理の手間を考えると面倒になってついつい、全部同じパスワード、しかもすごく短くて覚えやすいものにしてしまいがちですが、「LastPass」を使えば、その名の通りのラスト・パスワード(自分が覚えるべきたった一つだけのパスワード)を覚えておくだけで、Windows/Mac/LinuxといったどのOS上でもいろいろなサイトのパスワードや大事な情報が使えるようになり、しかもIE/Firefox/Chrome/Safari/Operaと連携して同期し、面倒なパスワード入力も全自動化してワンクリックで可能です。 保存したパスワードはすべて256bitのAESで暗号化されてSSL通信でバックアップされ、安全な利用が可能になります。さらにIE/Firefox/RoboForm/1Password/Kee
ユーザーのIPアドレスやブラウザなどの詳細情報をまとめてメール送信させる「Support Details」
OSの種類・解像度・ブラウザ名・ブラウザのウィンドウサイズ・IPアドレス・色数・JavaScriptのON/OFF・Flashのバージョン・CookieのON/OFFといった各種情報を簡単に表示し、指定したメールアドレスへ簡単に送信可能にしてくれるサイトが「Support Details」です。 Support Details | Tech Support Management http://supportdetails.com/ 主目的としてはウェブサイトのデバッグを簡単にするためで、クライアントが「ページの表示がおかしい」「動かない」「操作できない」ということになった際に、クライアント側の情報を簡単に送信してもらい、問題解決に役立てる、というもの。当たり前ですが、利用者側はあまりこういう各種情報を問題が発生しても伝えてくれず、「動かない動かないとわめくだけでなく、まずはお前の環境がどう
利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」:phpspot開発日誌
Browser.php ? Detecting a user’s browser from PHP | Chris Schuld's Blog 利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」。 $obj = new Browser(); のようにして、$obj->getBrowser() メソッドでブラウザが取得できてしまう便利ライブラリのご紹介です。 検索ボットやAndroid、iPhoneなんかにも対応しているようです。 その他、OSの判別なんかも細かくやってくれるみたいなので便利そう。 関連エントリ PHPで使えるブラウザ等プラットフォーム検出用クラス
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
blymp.io - とても簡単に使えるデバイス間ファイル送受信ツール MOONGIFT)
Beam Cafe - サーバにアップロードせずにデバイス間でファイルを送受信 MOONGIFT
System Font CSS - OSネイティブのフォントを利用するCSS設定
Indo true Insurance services
IDEA * IDEA
IDEA * IDEA
