タグ モダンブラウザ
人気順 10 users 50 users 100 users 500 users 1000 usersそろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024/04/02
127 users
Sass
Has
カスケードレイヤー
ネスト
ワークフロー
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む
CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
2024/03/19
26 users
CSS
スタイルクエリ
実装
クエリ
コンテナクエリ
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可... 続きを読む
いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
2023/12/12
159 users
CSS
img要素
リセットCSS
デフォルト
ターゲット
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラ... 続きを読む
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
2023/10/05
201 users
知見
MORE
CSS
リセットCSS
ターゲット
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテ... 続きを読む
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話
2023/09/13
120 users
AXIOS
Zenn
Fetch API
パフォーマンス
処理
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話 この記事について Zenn では長らく通信処理に Axios を使っていました。 しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て ... 続きを読む
CSSのネスト記法がFirefox 117で対応し、すべてのモダンブラウザでサポートへ | gihyo.jp
2023/08/30
11 users
gihyo.jp
CSS
バージョン
部分
サポート
CSSのネスト記法がFirefox 117で対応し、すべてのモダンブラウザでサポートへ Firefox 117が8月29日リリースされ、このバージョンから、CSSのネスト記法（CSS Nesting）に基本的な部分で対応した。Chrome・Edge・Safariなどでもすでに基本的なサポートは行われており、これでいわゆるモダンブラウザすべてで使えるよう... 続きを読む
CSSの進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説
2023/03/14
121 users
CSS
スタイルクエリ
クエリ
コンテナクエリ
進化
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）... 続きを読む
CSSにそのうち導入されそうな@scopeとその関連概念
2022/05/24
15 users
Scope
Layer
CSS
うち
実装
気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading... 続きを読む
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
2022/01/19
28 users
ポリフィル
コンテナクエリ
CSS
新機能コンテナクエリ
機能
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメ... 続きを読む
モダンCSSリセットを徹底解説、最近のデバイス・モダンブラウザの仕様に対応
2021/12/09
96 users
デバイス
CSS
個々
実装
仕様
最近のデバイス・モダンブラウザの仕様に対応した、モダンCSSリセットを紹介します。スタイル宣言はたったの9個ですが、個々のCSSについて詳しく解説されているので、記事はけっこう長いです。 なぜそうしたのか、なぜそれを使用しないのか、最近の実装にあわせたCSSの役立つテクニックもたくさん解説されています。 My ... 続きを読む
Native ESM 時代のフロントエンドビルドツールの動向
2021/03/09
111 users
Native ESM
動向
Webpack
rollup
時代
No Bundle ツールの流行: vite / rollup モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするた... 続きを読む
モダンブラウザにおけるキー入力のキャンセル - Qiita
2020/09/27
14 users
Qiita
キー入力
キャンセル
追記・修正 2020/1/28: ご指摘を受け、Firefoxの綴りを正式なものに修正しました（恥ずかしながら知りませんでした）。 また、旧Edgeという表記をしていますが、現時点ではEdge Legacyというのが正しい表現かもしれません。もっと正確にはEdgeHTMLエンジンのEdgeを指します。新Edge(Chromium)は体感的にChromeと同様の動... 続きを読む
HTMLでWebページを実装するための必要最小限をまとめたフロントエンド用のテンプレート一式（IE11も対応） | コリス
2020/06/11
19 users
コリス
GitHub
テンプレート一式
HTML
ファイル一式
HTML5で、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLテンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub... 続きを読む
CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 | コリス
2020/05/28
182 users
CLAMP
Calc
コリス
ＭＡＸ
min
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フ... 続きを読む
CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方 - ICS MEDIA
2020/04/14
21 users
ICS MEDIA
CSS
フォーム
疑似クラス
HTML
モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 ... 続きを読む
2020年、モダンブラウザに適したCSSリセットのまとめ | コリス
2020/01/16
27 users
コリス
GitHub
dev.to
CSS
CSSリセット
Web制作でモダンブラウザをターゲットにした場合、CSSにおけるブラウザによる互換性の問題は以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットやすべてをリセットする必要は全くありません。 Windows 7のサポートが終了し、また既にIE11のサポートを終了しているサービス（GitHub, Dev.toなど... 続きを読む
古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス
2019/10/07
261 users
CSS
知見
リセット
ターゲット
コリス
モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です！ A Modern CSS Res... 続きを読む
学校のInternet Explorer問題、Scratchも使えるモダンブラウザ「Microsoft Edge」への移行を急ごう - Watch Headline
2019/06/26
34 users
Scratch
Watch Headline
移行
学校
実装が簡単で、動作も快適！CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal | コリス
2017/12/01
51 users
スタイ
モーダルボックス
コリス
CSS
一昔前
一昔前までは、完全にJavaScriptの領域でした。 IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。 非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイ ...記事の続きを読む 続きを読む
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
2017/11/20
1121 users
Photoshop
プロパティ
融通
カタカナ
CSS
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと... 続きを読む
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 - PhotoshopVIP
2017/01/25
563 users
PhotoshopVIP
hmtl
CSS
HTML
進化
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高い テキストエフェクト用コードスニペット をまとめてご紹介します。コードニペットは各エ... 続きを読む
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress | コリス
2016/07/04
610 users
GitHub
コリス
Normalize.css
デフォルト
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえて... 続きを読む
jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供 － Publickey
2016/06/12
132 users
jQuery
Publickey
マイクロソフト
リリース
jQuery 3.0正式版がついにリリース。通常版のほかに、Ajax機能を省略したスリムビルド版も提供 これまでjQueryは、、モダンブラウザのみをサポートすることで軽量化と安定化をはかった「jQuery 2.x」系と、Internet Explorer 8以前を含む古いバージョンのブラウザまでサポートする互換性重視の「jQuery 1.x」系の2系統が存在しました。 しかしマイクロソフトがIn... 続きを読む
CSS - そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
2015/10/05
883 users
SPA
page
台頭
Qiita
PDF
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 ... 続きを読む
UAスタイルシートと リセットCSS
2015/08/30
56 users
リセットCSS
UAスタイルシート
Emmet
もくじ
連載中
UAスタイルシートと リセットCSS 1. UAスタイルシートと リセットCSS 2. Tomoki Kubo 株式会社まぼろし マークアップエンジニア ブログ: KOJIKA17 Adobe Creative Stationにて、Emmetの連載中 3. もくじ • UAスタイルシート - UAスタイルシートの基本 - モダンブラウザのUAスタイルシート • リセットCSS - 全称... 続きを読む