サイト構築
Futuraの初期型の字形「Formera」がオープンソースのフリーフォントでダウンロードできます
Post on:2025年1月15日
Futuraの初期型の字形が、オープンソースのフリーフォントでダウンロードできるので、紹介します。 「Formera」はFuturaの原形とされるもので、大きな特徴としては、mが直線で構成されていたり、rが棒と点で構成さ […]
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
Post on:2024年12月19日
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェック […]
これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit
Post on:2024年12月18日
CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ […]
CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる
Post on:2024年12月10日
スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバ […]
2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」、HTMLのコードは「#A47864」
Post on:2024年12月9日
2025年のトレンドカラーがPantoneから発表されました。 トレンドカラーは、温かみのある極上の茶色「モカムース（Mocha Mousse）」、穏やかなひとときを誘う控えめな色合いです。 モカムースのリッチなブラウン […]
UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
Post on:2024年12月5日
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトで […]
CSSの新しい公式ロゴが誕生しました、メインカラーに採用されたレベッカパープルの知られざる感動秘話
Post on:2024年12月4日
CSSのロゴといえば、「3」という数字が中央に配置されたブルーの盾を思い浮かべる人が多いと思いますが、この度CSSの開発元であるCSS-Next Community GroupでCSSのロゴのアイデアを募り、CSS3だけ […]
CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
Post on:2024年11月21日
幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCS […]
Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能
Post on:2024年11月14日
Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを […]
CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります
Post on:2024年11月12日
CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを […]
sponsors
