最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
Next.js App Router (app ディレクトリ) の逆引き辞典
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
Chrome 108にはCSSの新しい機能がたくさん含まれている、新機能と変更・削除された機能のまとめ
11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108-beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Chrome 108のCSSの新機能 変更・削除された機能 Chrome 108のCSSの新機能 Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。 新しいビューポート単位（lvh, svh, dvhなど) 新しいプロパティ（break-after, break-before, break-insid
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
2022年、注目しておきたいCSSの新機能のまとめ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
WordPressのget_template_part関数にバージョン5.5.0から追加された新機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPress5.5.0から追加された新しい機能についてご紹介します。 この記事を執筆中のWordPressの最新バージョンは5.8.1なので、なんで今更と思われてしまうかもしれませんが、それほど個人的に待ち望んでいたすばらしい機能だったので、こうして記事にしてしまいました。 結論としましては、get_template_part関数が便利になりました、という話になります。 get_template_part関数のこれまで使い方 get_template_part関数とは、テーマの中で任意のテンプレートファイルを呼び出すことができる関数です。用途としては、シングルページやアーカイブページなどにおいて共通して表示したいパーツがある場合に、そのパーツを別のテンプレートファイルにしておくことにより一箇所で管理する、といったことができます。 具体的な使い方を説明します。 最新記事n件みたいなパー
Coverageで使ってないコードを検出（ひとり DevTools Advent Calendar 2020 – 18日目） | Ginpen.com
18 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 たくさんコードを書いて書き足して消して書き直して消して書き換えてって繰り返してると「あれこれまだどこかで使ってるっけ？」みたいになることがあります。近年は VS Code が灰色で表示してくれたり ESLint で検出 できたりもできるけど、でも別ファイルからも使えるようなやつだとそういうのも厳しい感じです。 あと CSS の使われていないスタイルも。 DevTools にはそういうものを検出する機能があります。 先にまとめ Coverage パネルを使って未使用箇所や割合を計測 まともにやるならツールを 未使用コードを検出 DevTools の右上 “…” → More tools → Coverage 指示に従い reload ボタンを押す 画面は再読み込みされる 必要に応じて
Vue 3の新しい機能と変更点・全11件
さてさて、前回「Bootstrap v5がどうなるのか調査してみた」という記事を公開しましたが、実は今後のリリースでもうひとつ気になるものがあります。 それは、JavaScript開発の強力な味方、 「Vue.js」の新バージョン（v3） です。 Vue 3については、以前からたびたび情報が出てましたがついにアルファ版が利用できるようになりました。（2020.3.26現在） そこで❗ 今回は、近い将来リリースされるであろう Vue 3の使い方をまとめてみることにしました。 ぜひ参考にしていただけると嬉しいです😊✨ 【追記：2020.09.20】2020年9月18日に正式リリースされ、変更点があったので、記事を加筆・修正しました。 【追記：2020.10.30】「refの使い方が変わった」を追加しました。 「ついに来ました Vue 3 🎉」 Vueインスタンスの作り方が変わった これまで
ダークモード用CSSの書き方とエミュレートでの確認方法（ひとり DevTools Advent Calendar 2020 – 09日目） | Ginpen.com
9 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 GitHub がダークモード（ダークテーマ）対応したそうです。 echo "hello, darkness" #GitHubUniverse #Keynote https://t.co/9gQRFt3aqQ pic.twitter.com/HEotvXVJ7R — GitHub (@github) December 8, 2020 パブリックベータとして誰でも利用可能とのこと。 Chrome DevTools を使ってシステム側のテーマ変更をエミュレートすることができます。 ダークモード対応 CSS を書く @media (prefers-color-scheme: dark) でダークモード用のテーマになります。 CodePen でデモ @media (prefers-color-
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説
Vue.jsのコンポーネント間でデータを渡す方法はたくさんありますが、Propsを使うかSlotsを使うかはニーズによります。Slotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて紹介します。 The Difference Between Props, Slots and Scoped Slots in Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Vue.jsのProps Vue.jsのSlots 名前付きSlotsとの違い スコープ付きSlotsとの違い 終わりに はじめに 私はVue.jsを使い始めた時は、コンポーネント間のデータをPropsを介して渡していましたが、使い続けていくと、Slotsでも同じ結果を得られ
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
CSSの新機能のまとめ -2018年、CSSワーキンググループの会議で変更が加えられたCSSの新機能とそのデモ
先週、CSSワーキンググループの会議でCSSの仕様にさまざまな変更が加えられ、Webデザイナーや制作者にとって興味深い議論が行われました。 CSSの新機能とそのデモ、現在議論されている点について紹介します。 The CSS Working Group At TPAC: What’s New In CSS? by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 TPACとは スクロールバーのスタイル -scrollbarプロパティ アスペクト比の単位 「:where()」機能的な疑似クラス marginとpaddingのための論理的なショートハンド Web Platform Tests 参加の呼びかけ CSSの仕様はどうやって作られているのか TPACとは TPACとは、W3Cのテクニカル プレナリー・
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
