そろそろ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 スタイルクエリ クエリ コンテナクエリ 進化

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、これからはメディアクエリからコンテナクエリを使用する機会が増えてくると思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）... 続きを読む

モダン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 はすべてを一つにバンドルするた... 続きを読む

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

実装が簡単で、動作も快適！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
 - 全称... 続きを読む

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

Googleが検索ガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める::SEM R (#SEMR)

2014/10/27 64 users SEMR クロール レンダリング CSS グーグル

Googleが検索ガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める グーグルがウェブマスター向け「技術に関するガイドライン」を更新。同社のインデクシングシステムがモダンブラウザのようにウェブをレンダリングに基づいたシステムに変更されたことで、そのレンダリングを行うために必要な CSS や JavaScript ファイルへもクローラ Googlebot がアクセスで... 続きを読む

keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG

2014/08/20 72 users Sass keyframes くさ 朽木 アニメーション

こんにちは！　フロントエンドエンジニアのせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実... 続きを読む

[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/26 74 users コリス Flexbox カラム CSS アニメーション

リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。 Flexbox outdatedbrowser.com style UI デモはモダンブラウザでご覧ください、IEは10+で。 デモ 各カラムをホバーすると、そのカラムの領域がアニメーションで広くなります。 2番目にホバーすると、2... 続きを読む