Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能

2025/01/21 13 users CSS HTML dialog要素 縦書き ダイアログ

Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。 今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に判定できます。ほかにもCSSによる縦書き、Anchor Positioningなど、Web制作者は要チェックです！ New in Chro... 続きを読む

2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users CSS GitHub 一行 まとめ 新機能

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能

2024/11/14 14 users CSS アコーディオン 要チェック 機能 アップデート

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下... 続きを読む

Chrome 127で新しく追加された3つのCSSの機能、使用するフォントに関係なく読みやすくするなど

2024/07/29 7 users CSS iframe フォント 代替テキスト 要チェック

Chrome 127で追加された、CSSの新しい機能3つを紹介します。 今回のアップデートでは、使用するフォントに関係なく読みやすさを確保したり、生成コンテンツ内の代替テキスト、iframeでのビュー遷移のサポートなど、Web制作者は要チェックです！ New in Chrome 127 Chrome 127 beta 下記は各ポイントを意訳したものです。... 続きを読む

Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ

2024/05/28 165 users CSS関連 最新版チートシート まとめ

CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹... 続きを読む

Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能

2024/05/16 5 users CSS スクロールバー 要チェック アンカー 機能

Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 12... 続きを読む

Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能

2024/02/27 9 users CSS デフォルト 既存 新しいプロパティ 仕様

Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元... 続きを読む

Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users トランジション auto height トリガー スクロール

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能

2023/11/02 17 users 疑似クラス 新しいCSS 要チェック RCS 機能

New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) ... 続きを読む

AIのターニングポイントから始まる開発ツール - Web制作者が考えるAI開発の未来

2023/06/07 8 users ターニングポイント セッシ ＡＩ開発 chatgpt 未来

本記事は、TechFeed Experts Night#16 〜 ChatGPT, GitHub Copilot…AIはエンジニアの仕事をどう変える？AI×開発最前線！のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッシ... 続きを読む

Web制作者は知っておくと便利！ ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ

2023/04/06 13 users CSS テクニック ブラウザ Layer Container

CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、覚えておくと便利なCSSのテクニックを紹介します。 これらのCSSの新機能はすべてのブラウザにすでにサポートされています。 6 CSS snippets ... 続きを読む

ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました

2023/03/13 343 users chatgpt Monday プログラミング 疑問 Web制作

Web技術 ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました Monday, March 13th, 2023 ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと... 続きを読む

Adobe XDは利用できなくなるのか、Adobeに問い合わせました | Stocker.jp / diary

2023/01/25 75 users Adobe Adobe XD Wednesday 結果 すべて

Webデザイン Adobe XDは利用できなくなるのか、Adobeに問い合わせました Wednesday, January 25th, 2023 2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは... 続きを読む

Chromeの新機能「メモリ節約モード」と「省エネモード」Web制作時に認識しておくべき重要なことを解説

2022/12/12 16 users Chrome 省エネモード 解説 Web制作時 新機能

先日リリースされたChrome 108で「メモリ節約モード（Memory Saver）」と「省エネモード（Energy Saver）」が導入されました。これらは、Chromeがシステムリソースをどのように利用するかをユーザーがより詳細に制御できる機能です。 ユーザーとしてはメモリ節約モードも省エネモードも嬉しい機能ですが、Web制作者は認... 続きを読む

Web制作者はブックマークしておくと便利！ ランディングページ500種類以上のデザインのまとめ -Landings

2022/11/17 210 users フック デザイン フィルタリング ランディングページ アイデア

先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイ... 続きを読む

Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery

2022/11/09 357 users 各UIコンポーネント コンポーネント フック 実装方法 部品

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの... 続きを読む

Web制作者は要チェック！ Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma

2022/10/31 11 users figma タイポグラフィ UIコンポーネント アイコン 無料

Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design S...記事の続きを読む 続きを読む

AI描画ソフト「Stable Diffusion」はWeb制作の役に立つか？

2022/10/18 6 users Stable Diffusion Tuesday 描画 制作

Webデザイン AI描画ソフト「Stable Diffusion」はWeb制作の役に立つか？ Tuesday, October 18th, 2022 最近AIによる描画ソフトがかなり盛り上がっており、その中でも特に「Stable Diffusion」はWeb制作者にとってもインパクトが大きく、使い方によっては制作の役に立つかもしれないと思っています。 まずはStable Diffus... 続きを読む

Web制作者は要チェック！ VSCodeの便利なショートカットが、短時間で身につく魔法のチートシート -VSCheatsheet

2022/10/18 352 users vscode MacOS チートシート 魔法 ショートカット

VSCodeを使いこなすには、まずはよく使用する操作のショートカットを覚えることです。コードを書くときに便利なショートカットとどのように機能するか視覚的に分かるチートシートを紹介します。 ショートカットはmacOS, W...記事の続きを読む 続きを読む

AdobeのFigma買収とAdobe XDのこれから

2022/09/20 242 users Figma買収 figma Adobe Adobe XD 時間

※私はFigmaがAdobeに買収されたからといって、即座にFigmaがサービス終了するとは思っていません。ただ、アップデート速度が遅くなるなどゆっくりと時間をかけて衰退していったり、次第にユーザーが離れてしまうことはあり得ると思っています。 Adobe XDはどうなる？ Web制作者の方のツイートを見ていると「Adobe XDがFi... 続きを読む

CSSの実装はこれでかなり進化する！ Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ

2022/09/08 185 users Has セレクタ CSS 偶数 奇数

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追... 続きを読む

Web制作者におすすめ！ Win, Mac対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode

2022/04/17 16 users massCode Ace MacOS WIn エディタ

Web制作者・デベロッパー向けに、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャーを紹介します。 macOS, Windows対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。エディタにはAceが使用されており、非常に快適で、高... 続きを読む

Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説

2022/04/14 206 users プロパティ CSS CSSスニペット ツイート 解説

CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあ... 続きを読む

Web制作者がチェックしておきたい！ 2022年版、CSSフレームワークのまとめ

2022/04/07 23 users CSSフレームワーク グラスレス GitHub 2022年版

ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイント... 続きを読む

Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック

2022/02/03 47 users SVG レスポンシブ UIコンポーネント CSS 実装

SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポ... 続きを読む