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制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ

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

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

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

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

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

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

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制作者は要チェック！ 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制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説

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

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

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

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

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

Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css | コリス

2021/04/12 179 users reset.css コリス アクセシビリティ CSS 既存

現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Resete... 続きを読む

Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages | コリス

2020/10/15 347 users コリス CTA ブッダ ヘッダ コピーライティング

最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど...記事の続きを読む 続きを読む

Web制作者のためのSassの参考書.pdf - Speaker Deck

2019/09/19 73 users Sass Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

Web制作者は要チェック！Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptはどう変わるのか

2019/04/26 69 users Chromium Edge CSS ワークフ 朗報

これから先、フロントエンド開発者に一番大きな影響を与えるのは、Chromiumを採用したEdgeがリリースされることだと思います。 IEへの対応が、、、Edgeへの対応が、、、と思っていた人には、かなりの朗報です。 Chromiumを採用したEdgeがリリースされると、CSSやJavaScriptのどんな機能が使用できるようになり、ワークフ... 続きを読む

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス

2019/03/19 194 users コリス absolute position Disney 多く

スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む

Web制作者がチェックしておきたい！2018年、CSSベースのフレームワークのまとめ | コリス

2018/12/18 97 users コリス フレームワーク レスポ CSSベース 過程

CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。 CodyHouse CodyHouse's Framework -GitHub CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。 レスポ... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ | コリス

2018/11/07 586 users コリス 最新版チートシート まとめ

あれはどうだったかな？ という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな？ CSS FlexboxやGridの挙動がまとめて知りた...記事の続きを読む 続きを読む

Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ | コリス

2018/10/19 99 users デベロッパーツール コリス まとめ Chrome 70 新機能

DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするの... 続きを読む

Web制作者は要チェック！Chrome 68でアップデートされたデベロッパーツールの新機能 | コリス

2018/07/26 63 users デベロッパーツール コリス コンソール ブラウザ http通信

25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。 What's New In DevTools (Chrome 68) コンソールの補助機能 より素早く、信... 続きを読む

Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月 | コリス

2018/06/13 187 users トレンド Essential design trends

デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018... 続きを読む

Web制作者が知っておくと便利！Chrome 67でアップデートされたデベロッパーツールの新機能 | コリス

2018/06/04 73 users デベロッパーツール コリス ヘッダ レスポンス 無限ループ

先週末にリリースされたChrome 67でアップデートされたデベロッパーツールの新機能を紹介します。 Webの制作時に役立つ機能だけでなく、UIも進化しており、さらに便利になりました。 What's New In DevTools (Chrome 67) ネットワーク ヘッダとレスポンスを検索 CSS変数値のプレビュー機能 Copy as fetch Auditsパネルのアップデート 無限ループを... 続きを読む

Web制作者がチェックしておきたい、最近のWebサイトで注目されているデザインのトレンド -2018年3,4月 | コリス

2018/04/10 90 users 発想 実装 クリエイター 良いインスピレーション コリス

デザインや実装で悩んだ時には、世界のクリエイターの間で注目されている新鮮なトレンドを見てみると良いインスピレーションに出会うことができます。最近のWebサイトで注目されているデザインのトレンドを紹介します。 自分にはない発想を見かけると、なんだか楽しくなりますよね。 3 Essential Design Trends, March 2018 3 Essential Design Trends, A... 続きを読む