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

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。

2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。

2024年、CSSの新機能のまとめ

CSS Wrapped 2024
CSS Wrapped 2024 -GitHub

続きを読む

これがCSSだけで実装できるとはすごすぎる! 窓から差し込む柔らかな日差しを実装 -sunlit

CSSのスゴ技を見つけたので、紹介します。

画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエットの動きが実装されています。

窓から差し込む柔らかな日差しを実装 -sunlit
窓から差し込む柔らかな日差しを実装 -sunlit

sunlit pure css implementation
sunlit -GitHub

続きを読む

質感アップに効果的! 商用利用無料、デザインやイラストでかなり使える繊細な透過テクスチャ素材 -Transparent Textures

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

テクスチャ素材は透過なので、下地のカラーは自由に利用できます。ブルーの布地にしたり、グリーンのアスファルトにしたり、イエローのレンガ塀にしたり、パープルのカーボンにしたり、と何色にしてもOKです。

デザインやイラストでかなり使える繊細な透過テクスチャ素材 -Transparent Textures

Transparent Textures

続きを読む

Kindle本クリスマスセールがすごい! 良書揃い、フロントエンド開発、Notionの実用書、マネジメント書かなりお買い得です

※本ページは、アフィリエイト広告を利用しています。

Amazonで、Kindle本 クリスマスセールが開催しています!

Notionの実用書をはじめ、マネジメントやマーケティング、フロントエンド開発、UIデザインの解説書などがセール対象です!

セール期間は、2024年12月26日まで。
対象のKindle本は最安値(当方調べ)、今年発売されたばかりのものやセール初登場もあり、要チェックです!

Kindleセールの対象本

【最大80% OFF】Kindle本 (電子書籍) クリスマスセール

続きを読む

イラストやマンガを魅力的にするアイテムと演出アイデアがたっぷり収録され、読み応えのあるイラスト書 -演出アイテム図鑑

※本ページは、アフィリエイト広告を利用しています。

イラストやマンガの魅力を高めるには、アイテムが重要です。ノスタルジックを演出するために当時の家具を置いてみたり、視線を誘導するために縦横に伸びるパイプを背景にしたり、風が吹いているのを感じさせるためにタンポポの綿毛を飛ばしてみたり、アイテムを使うことで作品のレベルが格段に上がります。

イラストやマンガの雰囲気・テーマ・印象・感情・性格・年齢・関係性などを生み出すアイテムとその演出アイデアをまとめた図鑑、イラスト書を紹介します。

物語が動き出す 演出アイテム図鑑

続きを読む

2024年、日本語の新作フリーフォントのまとめ! 今年も新しいフリーフォントがたくさんリリースされました

2024年もいよいよ年の瀬ですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。

ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです!

2024年、日本語の新作フリーフォントのまとめ

続きを読む

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。

このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

Control the Viewport Resize Behavior on mobile with interactive-widget
by Bramus!

続きを読む

2025年のトレンドカラーは温かみのある極上の茶色「モカムース(Mocha Mousse)」、HTMLのコードは「#A47864」

2025年のトレンドカラーがPantoneから発表されました。
トレンドカラーは、温かみのある極上の茶色「モカムース(Mocha Mousse)」、穏やかなひとときを誘う控えめな色合いです。

モカムースのリッチなブラウンは大地の洗練を感じさせ、贅沢さと繊細で優雅な雰囲気を生み出すカラーです。

2025年のトレンドカラー「モカムース(Mocha Mousse)」

Pantone Color of the Year 2025

続きを読む

top of page

©2024 coliss