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 WEB制作者

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 WEB制作者

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 フック デザイン WEB制作者 フィルタリング アイデア

先日ローンチされたばかり、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フレームワーク グラスレス WEB制作者 GitHub

ここ数年定番の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 下記は各ポ... 続きを読む

Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本

2021/10/29 10 users CSS HTML テクニック Flexbox カピパラ

これは本当に、かなりお勧めの解説書です。 カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。 HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやす... 続きを読む

これならすぐ簡単！Web制作者・デベロッパー向け、ポートフォリオ用のHTMLテンプレート -Dopefolio

2021/10/06 15 users Sass フレームワーク ポートフォリオ CSS ライブラリ

Web制作者・デベロッパー向け、ポートフォリオ用のテンプレートを紹介します。 オープンソースで、HTML, CSS, JavaScript, Sassで実装されており、フレームワーク・ライブラリは必要ありません。自己紹介、スキル、プロジェクト、連絡先など、ポートフォリオに必要なコンテンツが用意されており、簡単にポートフォリオを... 続きを読む

Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ - Web Design Trends

2021/08/23 25 users vscode CSS WEBコーダー VSCode拡張機能

VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能を... 続きを読む

Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編 | コリス

2021/08/06 287 users コピペ 実装 カスタマイズ 手順 背景

Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エ... 続きを読む

Googleデベロッパーが解説、Webページに画像の遅延読み込みを使いすぎるとパフォーマンスに悪影響を与える | コリス

2021/08/05 7 users コリス lazy Loading Googleデベロッパー

loading="lazy"によるネイティブ画像の遅延読み込みのリスクとリターン、注意点とパフォーマンスを向上させる実装方法を紹介します。 Webの新機能は便利で魅力的なものが多いですが、効果的な使い方を知らないと、パフォーマンスに悪影響を与えてしまうかもしまうかもしれません。Web制作者は知っておきたい遅延読み込み... 続きを読む

Web制作者は要チェック！Instagramに使用されているCSSのテクニック | コリス

2021/04/20 101 users Instagram コリス モックアップ CSS テク

Instagramに使用されているCSSのテクニックを紹介します。 世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？ Inspect Element As A Way To Feed Your Curiosity by Ahmad Shadeed はじめに Instagramに使用されているCSSのテク... 続きを読む