CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示

2023/08/03 8 users 構文 Edge Safari Firefox Chrome

CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

これでよく分かる！ 2023年、CSSとUIの新しい機能のまとめ

2023/05/25 181 users CSS カスケードレイヤー ネスト コンテナクエリ 三角関数

2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラース... 続きを読む

CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む

2023/01/31 75 users セレクタ 末尾 CSS ＩＳ 疑似クラス

CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません... 続きを読む

CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css

2022/11/01 60 users iOS where Safari 新しいビューポート単位

詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用す... 続きを読む

FirefoxとOpera、Microsoft Edge用ブラウザ拡張の追加により、ほぼ全てのメジャーブラウザのリンクを別のブラウザで開くことが可能になったMac用ブラウザユーティリティ「Bumpr v1.4」がリリース。

2022/05/25 7 users メジャーブラウザ ユーティリティ Opera Firefox

FirefoxとOpera、Microsoft Edge用ブラウザ拡張の公開により、各ブラウザのリンクを他のブラウザで開くことが可能になったMac用ブラウザ・ユーティリティ「Bumpr v1.4.0」がリリースされてい The post FirefoxとOpera、Microsoft Edge用ブラウザ拡張の追加により、ほぼ全てのメジャーブラウザのリンクを別のブラウザで開... 続きを読む

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス アクセシビリティ CSS 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

Chrome・Firefox・Edgeでユーザースクリプトを動かすことができクラウドで同期もできる拡張機能「Violentmonkey」を使ってみた - GIGAZINE

2021/02/11 30 users ユーザースクリプト GIGAZINE Edge Chrome

各ユーザーが公開する便利な機能をブラウザに導入できる仕組みが「ユーザースクリプト」です。「Violentmonkey」はユーザースクリプトをChrome、Firefox、Edgeの各ブラウザに導入し、クラウド同期まで可能な拡張機能とのことなので、実際に使ってみました。 Violentmonkey https://violentmonkey.github.io/ まずはViole... 続きを読む

フィッシング対策協議会　Council of Anti-Phishing Japan | ニュース | 協議会からのお知らせ | [更新] 各ブラウザによる SSL / TLS サーバ証明書の表示の違い (2019/06/27)

2019/06/27 14 users TLS ユーザーインターフェース SSL サーバ証明書 協議会

■更新の理由について Web ブラウザは、ユーザーインターフェースの変更やセキュリティパッチ適用など定期的にアップデートされています。また、アップデートにはセキュリティ強化のために考慮されたデザインなどの変更も含まれています。 このようなことから各ブラウザのサーバ証明書の表示が変更されているため、アップ... 続きを読む

Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io

2019/03/14 175 users jxck.io class 構文 挙動 created_at

created_at: 2019-03-14 updated_at: 2019-03-14 tags: [private,javascript] Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field D... 続きを読む

[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css | コリス

2019/02/22 64 users コリス デフォルト select要素 CSS ブラウザ

フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。 フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssの... 続きを読む

HTML5とCSS3の機能や役割や対応ブラウザなど、実装に必要な情報がすぐ分かるコーダー必読のリファレンス本 | コリス

2018/08/24 37 users プロパティ CSS 本書 コリス HTML

今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか？ HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。 本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も... 続きを読む

[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 | コリス

2018/08/08 255 users コリス ビューポート スクロールバー CSS ナビゲーション

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表... 続きを読む

Element.toggleAttribute | blog.jxck.io

2018/07/20 40 users jxck.io ミッシングピース INTRO アナウンス 実装

created_at: 2018-07-20 updated_at: 2018-07-20 tags: [dom,html] Intro 非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。 最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。 この仕様について解説する。 Boolean Attributes Boolean... 続きを読む

不思議!? div要素一つで同じスタイルなのに、すべてのブラウザで見た目が異なるスタイルシート | コリス

2018/07/10 41 users Edge Safari Firefox Chrome コリス

div要素一つで同じスタイルなのに、IE, Edge, Chrome, Safari, Firefoxなどの各ブラウザで見た目が全く異なるスタイルシートを紹介します。 実際にどのように見えるか、下記ページでご覧ください。...記事の続きを読む 続きを読む

はてなブックマークにエントリー入りした記事のサムネイル画像（アイキャッチ）を変更・反映する方法 - ぼっちサーファーのブログ

2017/09/12 40 users アイキャッチ ぼっちサーファー エントリー サムネイル画像

2017 - 09 - 12 はてなブックマークにエントリー入りした記事のサムネイル画像（アイキャッチ）を変更・反映する方法 ブログ運営 あとで読む ブログ記事のアイキャッチを変更しても「はてなブックマーク」でのサムネイル画像は更新されません。 新着エントリー入り後にサムネイル画像を変更するには 各ブラウザの拡張機能から行う 必要があります 。 なお 拡張機能以外では変更できない ようですのでPC... 続きを読む

Web制作者（フロントエンド・マークアップエンジニア向け）がブックマークしておきたい、便利なチートシートやリソースのまとめ | NxWorld

2017/06/05 71 users デバイス 特定 日頃 NxWorld マークアップエンジニア

普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 ... 続きを読む

スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）

2017/05/31 10 users APPGIGA ファイラー 一元 アプギガ 0310lan

どうも、まさとらん（ @0310lan ）です！ みなさんは、お気に入りのサイトやブログなどを「ブックマーク」されているでしょうか？ 各ブラウザには、ブックマークを整理する機能があるのですが、ついつい登録し過ぎて散らかってしまうケースは少なくないでしょう。 今回ご紹介するサービスを使えば、PCに付属の「ファイラー」のような感覚できれいに整理できるうえ、PC・スマホでブックマークを一元管理することも... 続きを読む

Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）

2017/05/17 612 users アンチエイリアス フォントレンダリング dpi WIn CSS

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いの... 続きを読む

PCやスマホのブラウザ、アプリから利用するサービスの傾向は違う。MMD研究所調べ | モバイルマーケティング研究所 |ModuleApps

2017/03/21 9 users デバイス PCブラウザ ユーザー メディア 機会

PCやスマホなどさまざまなのデバイスが登場したことで、ユーザーは多くのメディアに接触する機会が増えました。では、各ブラウザによって利用方法にどのような違いがあるのでしょうか？MMD研究所は、20～59歳のスマートフォンを所有する男女892人を対象に「 アプリとブラウザの利用実態調査 」を実施致しました。 ７割以上のユーザーが毎日ブラウザを利用 「あなたがPCブラウザ、スマートフォンブラウザを利用す... 続きを読む

ES2015で始めるJavaScript入門 - Qiita

2016/09/08 284 users Qiita ECMAscript サーバサイド ナンバリング

JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたE... 続きを読む

今どきのCSS3グラデーションの指定方法 (2015年版) - to-R

2015/11/09 72 users 今どき to-R CSS3グラデーション 指定方法 TOP

昨年、「今どきのCSS3グラデーションの指定方法」という記事を書いてそこそこアクセスがあるのですが、今年にはいって状況が変わってきたのでアップデートしておきます。 まずは各ブラウザの対応状況。現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況... 続きを読む

【CSS】決定版！リセットCSS総まとめ | TONOST

2015/06/01 425 users デフォルトスタイル Firefox Safari CSS 目的

HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれ... 続きを読む

won't fix: Adobeが行っている各ブラウザへのコントリビューション

2015/05/04 24 users コントリビューション blink fix SVG won't

2015-05-05 Adobeが行っている各ブラウザへのコントリビューション ラベル: Blink, Firefox, WebKit Microsoft EdgeでAdobeがコードの貢献をしたという話があったのだけど、これを見て、EdgeはAdobe、Microsoft連合だ思っている人が多いみたいなので、Adobeが各ベンダに対してやってることを書こうかと。 まず、彼らはSVGとかCSSとか... 続きを読む

ECMAScript 6 でジェネレータを作ったり、遅延評価してみる - 意識低い開発者のBlog

2015/04/28 25 users ジェネレータ Enumerator 遅延 Blog Ruby

「Ruby の Enumerator でジェネレータを作ったり、遅延評価してみる」や「Python でジェネレータを作ったり、遅延評価してみる」の記事を ECMAScript 6 のジェネレータを使って記述するとどのようになるのか, 実際に試してみました. ECMAScript 6 の各ブラウザや処理系での実装状況の詳細はこちらを参照してください. 現時点でこの記事のコードがそのまま実行できる処理... 続きを読む

SDN Memo - ドット絵の拡大表示と各ブラウザの対応

2015/03/09 39 users ドット絵 Twitter tumblr pixiv Skype

栃尾トメ（Tochio Tome） ドット絵を打ったりアイマスPだったりプログラマー・デザイナーもどきだったりする人です。 このTumblrはメモ書きだったり日記だったりな場所です。 Twitter: sdn_tome pixiv: 176168 Skype: sdn_tome ドット絵、いいですよね。少ないピクセルで表現する魅力は今も変わらないはずです。 しかし、PCやスマホ等のデバイスの高解像... 続きを読む