タグ モダンブラウザ
人気順 5 users 10 users 50 users 500 users 1000 usersそろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024/04/02
127 users
Sass
Has
カスケードレイヤー
ネスト
ワークフロー
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む
いいこと聞いた！ 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の進化が早い！ スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説
2023/03/14
121 users
CSS
スタイルクエリ
クエリ
コンテナクエリ
進化
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）... 続きを読む
Native ESM 時代のフロントエンドビルドツールの動向
2021/03/09
111 users
Native ESM
動向
Webpack
rollup
時代
No Bundle ツールの流行: vite / rollup モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするた... 続きを読む
CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 | コリス
2020/05/28
182 users
CLAMP
Calc
コリス
ＭＡＸ
min
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フ... 続きを読む
古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset | コリス
2019/10/07
261 users
CSS
知見
リセット
ターゲット
コリス
モダンブラウザをターゲットにしたWeb制作では、CSSにおけるブラウザの互換性の問題はIE6の頃に比べるとはるかに少なくなりました。無理なリセットやすべてをリセットする必要は全くありません。 現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。 CSSの知見やテクニックも満載です！ A Modern CSS Res... 続きを読む
もし、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)の台頭、いろいろと条件が揃ってきました。 ... 続きを読む
CSSのみでフルスクリーンの動画背景を実装する方法 | NxWorld
2015/05/25
134 users
NxWorld
Poster
Body
CSS
jpg
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずにCSSのみで実装する方法です。古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ以下のように記述します。 HTML <body> <video autoplay loop poster="img.jpg">... 続きを読む
うわぁIE8で表示がおかしい！その原因をチェックしてアドバイスしてくれるオンラインサービス -IE8 Linter | コリス
2015/02/10
101 users
基準
現状
アドバイス
ページ制作
コリス
モダンブラウザを基準にページ制作をする人が増えてきましたが、IE8を完全に切るのはなかなか難しいのが現状です。 そんなIE8で、あれ表示がおかしいぞ！という時に、その原因のアドバイスをしてくれる便利なオンラインサービスを...記事の続きを読む 続きを読む
いま Web サイトを作るときにおさえておきたい10のこと(2015年版) - monoe's blog - MSDN Blogs
2015/02/06
526 users
MSDN Blogs
monoe's blog
標準準拠
Internet Explorer は、バージョン 9 から Web 標準準拠へと舵を向けました。 Internet Explorer 9、Internet Explorer 10 と、2 つのバージョンを経て、最新の Internet Explorer では、他のモダンブラウザと比較しても顕色のない Web 標準ブラウザーとなっています。 そのため、それまでの長い間 Internet Explo... 続きを読む
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ － Publickey
2014/11/04
128 users
jQuery
Publickey
Webブラウザ
新名称
人気
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つ... 続きを読む
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide | コリス
2014/07/25
171 users
jQuery
div
WebM
vide
代替
,mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 Vide Vide -GitHub Videのデモ Videの使い方 Videのデモ デモでは、動画がブラウザいっぱいの背景として表示されています。 モダンブラウザ、IEは9+で... 続きを読む
[CSS]シンプルなスタイルシートで書かれたグラデーションを使ったかっこいい背景のテクニック -Cool Gradient | コリス
2014/07/10
112 users
コリス
radial-gradient
CSS
テクニック
ブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。 ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。 デモは「radial-gradient」を使用しているため、モダンブラウザでご覧ください。IEは10+で。 Cool Gradient 実装は非常にシンプル、コピペで簡単に利用できます。... 続きを読む
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス
2014/06/13
109 users
video要素
コリス
パネル
ブラウザ
デモ 実装
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む
CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）
2014/02/14
842 users
游明朝体
ウエイト
iPhone
併記
Safari
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pr... 続きを読む
ロゲ会長ジェネレータ
2013/09/10
421 users
canvas
ジェネレータ
ロゲ会長
HTML5
かなり
ロゲ会長ジェネレータです。ロゲ会長が発表してくれます。ロゲ会長のジェネレータです。かなり急ごしらえでつくったので出来は荒いです。IEとかちゃんとテストしてません。ちなみにHTML5でcanvasがチャント動くモダンブラウザじゃないとダメです。 続きを読む
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ - W3Q - Web制作者のお悩み解決サイト
2013/07/08
134 users
CSS
アニメーション
プレフィックス
W3Q
WEB制作者
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを... 続きを読む
HTML - IEユーザーを撲滅させるためのjavascript。さぁ今すぐWEBサイトに組み込もう！ - Qiita [キータ]
2013/06/20
225 users
confirm
キータ
false
アラート
Qiita
結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる そのためのコードがこちら。headタグ直下にでも配置しましょう。 <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { if(confirm('〇〇〇〇*はInternet Exprolerに対応しておりません。本サ... 続きを読む
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト | コリス
2013/06/19
227 users
コリス
アニメーショ
かわいいエフェクト
Firefox
デモ
CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。 12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーショ... 続きを読む