2024年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2024年の大きなニュースの一つは、CSSの進化です。IEのサポート終了にも慣れ、モダンCSSの新機能も今までよりも早くブラウザの

※本ページは、アフィリエイト広告を利用しています。 デザインやイラストをはじめ、ビジネス、インテリア、ファッションなど、色に携わるすべての人にお勧めの配色アイデア手帖 日本の美しい色と言葉 第2版を紹介します。 初版から6年ぶりの第2版が本日発売です！ 日本の古来より伝わる伝統的な美しい色と言葉が一冊の本にまとめられており、基本となる色の使い方、実用的な配色、それを応用したさまざまなデザイン・パターン・イラストの配色などが掲載された完全保存版の一冊。第2版では特典も豪華、収録されている配色すべてのスウォッチデータもダウンロードできます。 配色アイデア手帖は当ブログでも大好評のシリーズですが、中でも私はこの「日本の美しい色と言葉」が一番のお気に入りです。日本の古来より伝わる伝統的な美しい色と言葉がたっぷり収録されており、第2版では新しい配色テーマが加わり、二十四節気や七十二候など、日本人が育

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のApache License 2.0に基づいて翻訳しています。 はじめに コンポーネント: field-sizingプロパティ コンポーネント: interpolate-sizeプロパティ コンポーネント: details要素 コンポーネント: details要素のスタイル コンポーネント: Anchor positioning インタラクション: スクロールバーのスタイル インタラクション: @v

CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ...記事の続きを読む

布地、織物、格子柄、タイル、唐草模様、フェルト、リネン、紙、糸、アスファルト、レンガ塀、コンクリート、波形、吹雪、ストライプ、カーボン、等高線、ランドルト環、チェックなど、透過で利用できる繊細なテクスチャ素材を紹介します...記事の続きを読む

2024年もいよいよ年の瀬ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 角丸と墨だまりの処理が施された、柔らかで穏やかな見出し用ゴシック体。 紙モノゴシック 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 印刷物での使用を目的にデザインされた、見出し用ゴシック体フォント。横画の両端と縦画の始筆部が末広がりになっているため、印刷物でもしっかりと存在感を残します。ひらがな・カタカナ・英数記号文字に加え、漢字も収録されています

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。 Control the Viewport Resize Behavior on mobile with interactive-widget by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デフォルトのビューポートのサイズ変更動作 metaタグのinteracti

2025年のトレンドカラーがPantoneから発表されました。 トレンドカラーは、温かみのある極上の茶色「モカムース（Mocha Mousse）」、穏やかなひとときを誘う控えめな色合いです。 モカムースのリッチなブラウン...記事の続きを読む

ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Orbitの使い方 Orbitの特徴 Orbitは、サークル・放射状のラジアルUIを実装するために設計された初の汎用CSSフレームワークです。CSSの機能（cos(), sin()など）を使用してサークル・放射状のレイアウトを簡単に実装できます。 ランディングページをはじめ、ナビゲーションに使用したり、ダッシュボードや円形データなどで、ユニークで視覚的に魅力的で直感的なレイアウトを作成できます。 .orbit CSS class CSSの三角関数（sin()

CSSのロゴといえば、「3」という数字が中央に配置されたブルーの盾を思い浮かべる人が多いと思いますが、この度CSSの開発元であるCSS-Next Community GroupでCSSのロゴのアイデアを募り、CSS3だけでなく、CSS全体を表現できるより汎用化されたロゴが誕生したので、紹介します。 メインカラーは左端のレベッカパープル（#663399）で、ダーク（#000000）とライト（#FFFFFF）もあります。 An official logo for CSS -GitHub CSSの古いロゴ CSSの新しい公式ロゴの誕生の経緯 CSSの新しい公式ロゴのガイドライン リソース CSSの古いロゴ 「3」という数字が中央に配置されたブルーの盾のロゴはこれです。 Wikimediaを見ると、2013年に誕生したようで、10年以上前なのですね。 形はあまり好きではありませんでしたが、ブルーの

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

※本ページは、アフィリエイト広告を利用しています。 こういうデザインの解説書は、初めてです！ デザイナーは何を考え、どのように作っていくのか。ヒアリングから始まり、ワイヤーフレームを設計し、デザインカンプに落とし込み、最終形までチェックバックを重ねてブラッシュアップをするまでのデザイナーの意図や考え、デザインのテクニックなどを細かく解説したデザイン書を紹介します。 他人がどのような工程で行っているかを見ることはなかなかないので、かなり貴重な本だと思います。 本書は「けっきょく、よはく。」や「デザイナーじゃないのに！」などデザイン書の良書をたくさん刊行されているソシム社の最新刊。そろそろ新しい切り口の本がでるかなと思っていたら、想像の上を行く素晴らしいデザイン書が登場しました！ 10/29に発売後すぐに売れ切れ状態が続いていましたが、版元様より11/12に重版出来となったので、現在は大丈夫だ

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに anchor-scopeプロパティ font-variant-emojiプロパティ ハイライトの継承 detailsとsummary要素のスタイル改善 印刷時のカスタムヘッダとフッタ @propertyの<string>構文サポート 相対カラー構文でcurrentcolorをサポ

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。 5 Cool Things To Do with DevTools AI Assistance AI assistance panel AI assistance for styling by Matthias Rohmer 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに デベロッパーツールでAIアシスタントを使用する前に AIアシスタントの起動方法 AIアシスタントでレイアウトを理解する AIアシスタントによるペアプログラミング AIアシスタントに

WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。 ハンバーガー用の×に変化するアニメーション、＠を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っています。 beautifully crafted animated icons pqoqubbw/icons -GitHub pqoqubbw/iconsは、Webサイトやスマホアプリのプロジェクト用に美しいアニメーションで動くアイコンのコレクションです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 アニメーションで動くアイコンは、下記ページから。

※本ページは、アフィリエイト広告を利用しています。 表紙をぱっと見ると、デザイン書とは違うのかな？と思うかもしれません。プロのデザイナー向けかと聞かれたら違いますが、デザインを学んだことがなくてもデザインするために役立つ知識やテクニックを学べるデザイン書を紹介します。 どういったデザイン思考でデザインをしたらいいのか、特に「伝えるためのデザイン」に着目してデザインについて学べます。 本書は昨日発売されたばかり！ デザイナーじゃない人向けの本ですが、デザイナーじゃない人だけでなく、デザイナーの人にも振り返る意味でお勧めの本です。当たり前のようにしていることでも改めて言葉での説明を読むと、より考えが深まると思います。 デザイナーじゃなくてもここまでできる！ 会社のデザイン業務困ったさんに贈る本 ISBN 978-4-295-02048-6 [Amazonでみる] [楽天でみる] 著者: むかい

CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例年より早いですね。 State of CSS 2024 State of CSS 2024は、State of CSSでおこなわれたアンケートの調査結果（9,704人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は30-39才がもっとも多く、性別は男性が多めです。

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detect Style Queries Support in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スタイルクエリのサポートを確認するCSS このCSSの仕組み デモ Safari 18のバグを回避する方法 はじめに 先日、XでAdam Wathanが（カスタムプロパティの）スタイルクエリを確認する方法を尋ねていました。理論的には@supports at-rule()を使用す

Adobe公式から、2024年最新版となるPhotoshopやIllustratorの機能一覧がアップデートされたので、紹介します。 新機能が追えてない、まとめて一覧で見たい、過去のアップデート内容も知りたい、そんな人は...記事の続きを読む

※本ページは、アフィリエイト広告を利用しています。 PhotoshopやIllustratorなど、ソフトウェアの基本操作は書籍やネットで学ぶこともできますが、実践的なテクニックや効率的なテクニックをまとめたものとなるとなかなか見つかりません。 本書はIllustrator使い必携書の10年ぶりのリニューアル版。基本操作の解説はなし、実務ですぐに役立つ効率化の新常識がまとめられた解説書です。 本書は2014年に刊行された「10倍ラクするIllustrator仕事術」の改訂版で、ちょうど10年ぶりのリニューアル。前版の256ページから320ページに増量され、なんと97%が書き換えられています。改訂版の枠を超えています！ ちなみに、前版ではAmazonに好評レビューがたくさんです。