サイト構築 -実装
Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
Post on:2025年4月3日
Chrome 135で追加された、CSSの新しい機能14個を紹介します。 今回のアップデートで目玉はスクロールオフセットのサポート、レスポンシブな自由形式のシェイプを作成できるshape()関数、インタラクティブなスクロ […]
AIだと簡単で便利！ UIデザイン用に色彩理論に基づいたカラーパレットやUIコンポーネントを生成してくれる無料ツール -ColorMagic
Post on:2025年3月27日
AIを使って日本語テキストや画像からカラーパレットやグラデーションやUIコンポーネントを生成してくれるツールColorMagicの日本語版が登場したので、紹介します。 入力されたプロンプトや画像を元に色彩理論に基づいてカ […]
HTMLは非常にシンプル！ 圧倒的な速さでMaterial Design 3のUIを実装できるCSSの超軽量フレームワーク -Beer CSS
Post on:2025年3月26日
ここ数年で数多くのCSSのフレームワークが登場しました。BootstrapやBulmaをはじめ、Tailwind CSSなど、それらを使用したことがある人も多いと思います。 しかし、これらの人気が高いフレームワークはバー […]
実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
Post on:2025年3月25日
CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？ 下記のデモはうまく機能していますが、角丸 […]
AIなら超簡単で早い！ Webサイトの構造を視覚化し、サイトマップを生成できる無料ツール -AI Sitemap Generator
Post on:2025年3月18日
最近はAIによる便利ツールが増えてきましたね。既存サイトの構造を視覚化し、ヴィジュアルサイトマップを生成できるAIツールを紹介します。 サイトマップを生成するだけでなく、コンテンツもAIで生成できるので、既存サイトの改善 […]
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
Post on:2025年3月13日
CSS GridやFlexboxで配置するプロパティや値は？ 最初の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのよう […]
これは簡単で便利！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズの定義ができるツール -Type Scale Generator
Post on:2025年3月12日
フォントのサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィのテクニックです。CSSのclamp()関数を使用するとビューポートをベースにしてフォントサイズの […]
Web制作者必見の便利な機能が追加！ Chrome 134で新しく追加された5つのCSSの機能
Post on:2025年3月10日
Chrome 134で追加された、CSSの新しい機能5つを紹介します。 今回のアップデートで目玉となるのは、dialog要素にclosedby属性が追加されダイアログの閉じる動作が制御可能になり、select要素のスタイ […]
CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります
Post on:2025年3月6日
先週、CSSで関数を自分で定義できるカスタム関数が使えるようなる（紹介記事）ことをお伝えしましたが、続報として、なんとif()関数も使えるようになるそうです。すでにChrome Canaryではif()関数をCSSで使用 […]
CSSの進化がすごすぎる！ CSSで関数を自分で定義できるカスタム関数が使えるようになります
Post on:2025年2月27日
CSSの関数って、便利なものが多いですよね。calc()が登場したときも衝撃でしたが、最近ではattr()関数がパワーアップしたり、レスポンシブ対応に必須のmin(), max(), clamp()関数、ライトテーマとダ […]
sponsors
