これでよく分かる！ 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リセットとして使用す... 続きを読む

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... 続きを読む

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の... 続きを読む

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

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

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

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

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

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

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

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

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

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」と呼ばれ... 続きを読む

【翻訳】GoogleがWebでのSHA-1の利用停止を急ぐ理由 | POSTD

2015/02/04 218 users POSTD SHA Hilbert SHA-1 各自

Hilbertのハッシュアルゴリズムマップ（Ian Boyd） SHAとは SHA-1への攻撃は十分に可能ではないだろうか 各ブラウザの対応 各自でできること 証明書の変更がここまで大変なのはおかしい 最後に 信用されて […]Hilbertのハッシュアルゴリズムマップ（Ian Boyd） SHAとは SHA-1への攻撃は十分に可能ではないだろうか 各ブラウザの対応 各自でできること 証明書の変更... 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT

2014/05/19 81 users チャット MOONGIFT デスクトップ 実装方法 ブラウザ上

HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 No... 続きを読む

flexboxの旧仕様、改定仕様、現行仕様の一覧 « NAVER Engineers' Blog

2013/09/10 138 users Flexbox gradient UIT 富田 Blog

暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。 久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのを... 続きを読む

IE10をはじめ、Firefox, Chrome, Safari, Operaなど各ブラウザの枠のPSD素材のまとめ | コリス

2013/03/04 84 users コリス Opera Safari Firefox iCab

IE8/9/10から、Firefox, Chrome, Safari, Operaだけでなく、IE5/6/7, Netscape, iCabなどの懐かしいものまで、各種ブラウザの枠やフォームのエレメントなどのPSD素材を紹介します。 Web Browser PSD's IE9/10, Firefox4, Chrome10, Safari5, Opera11 1310 x 996px 7 Free ... 続きを読む

各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks - かちびと.net

2013/03/03 104 users CSSハック バック Opera Safari net

各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 Browserhacks ブラウザ名で検索も出来る... 続きを読む

CSS の小数点以下の数値を各ブラウザはどのように解釈するか | Unformed Building

2012/11/21 81 users CSS Firefox Unformed Building

CSS で小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10 となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づら... 続きを読む

[CSS]便利なセレクタの使い方が実例を見ながら学べる -CSS Selectors | コリス

2012/05/14 96 users セレクタ コリス CSS 実例 CSS Selectors

CSSのセレクタの記述例とそれがどのように適用されるか、実例を見ながら学べるサイトを紹介します。 各ブラウザのサポート状況も掲載されています。 Learn CSS Selectors interactively サイトに [...] 続きを読む

Photoshop VIP ☞ プレゼンテーションに最適、各ブラウザの枠フレームデザイン無料PSD素材20個まとめ

2012/05/11 89 users プレゼンテーション TEM Photoshop Vip 時間

時間をかけてデザイン、制作したWebサイトをお披露目するときどうしていますか。 たとえばクライアントに見せたり、プレゼンテーションに使うときは、デザイン用スクリーンショットを用意してみてはどうでしょう。 海外デザインブログHongkiat.comで、各ブラウザの枠フレームのみをデザインした無料PSD素材20個をまとめたエントリー「20+ Free Web Browser Frame PSD Tem... 続きを読む

font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27

2011/12/05 118 users font-family ウエイト 挙動 フォント 解釈

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べま... 続きを読む

今時のブラウザが例外発生時にどんな情報を出しているのか調べてみたよ - latest log

2011/11/18 56 users 今時 latest log error TRY ブラウザ

JavaScript では例外が発生すると例外オブジェクトが生成されます。 この例外オブジェクトの仕様は標準化されておらず、各ブラウザで実装が異なります。最新のブラウザで JavaScript の Error オブジェクトや Error から派生しているオブジェクトが持つ属性を調べてみました。 Safari Stable (Safari 5.1.1) try { throw new Error("... 続きを読む

2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ | コリス

2011/10/23 473 users コリス Media Queries ワイドスクリーン ツール

デスクトップ用の各ブラウザをはじめ、スマートフォン、ワイドスクリーンなど、さまざまユーザー環境を想定して確認できるツールを紹介します。 各ツールで表示しているのは、Media Queriesを使用している「CSS-Tri [...] 続きを読む

CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net

2011/10/05 190 users ベンダープレフィックス プレフィックス jQuery CSS

久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのよう... 続きを読む