https://b.hatena.ne.jp/coliss/css/ cssに関するcolissのはてなブックマーク (721) https://coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html HTMLとCSSだけで実装できる、あるいはごくわずかなJavaScriptで実装できるUIコンポーネントのまとめ coliss 2026-07-16T01:46:57Z css 26 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html" title="進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Freduce-the-js-workload-ui-component.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html">進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a165ca0ce439e634937e4186c877d55d043515e9/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202603%2F2026071201-01%402x.png" alt="進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS" title="進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS" class="entry-image" /></a></p><p>最近では、HTMLとCSSは非常に進化し、強力になってきました。これからの時代はJavaScriptは本来のJavaScriptでしかできないことに使い、HTMLとCSSで可能なものはCSSとHTMLで実装すべきです。 HTMLとCSSだけで実装できる、あるいはごくわずかなJavaScriptで実装できるUIコンポーネントのまとめを紹介します。 NoLoJS NoLo...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html" alt="はてなブックマーク - 進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS" title="はてなブックマーク - 進化したHTMLとCSSで実装できるさまざまなUIコンポーネントのまとめ、JavaScriptはなし、もしくは最小限 -NoLoJS" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/reduce-the-js-workload-ui-component.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html 線形、放射状、円錐状、それぞれの繰り返しバージョンに加え、複数のグラデーションの重ね合わせ、円錐状グラデーションのストップのみを使用した円グラフなどの実装コードをまとめたチートシート coliss 2026-07-15T01:46:01Z css 9 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html" title="これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-gradients-cheat-sheet-by-programoreno.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html">これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9465dccd375aa8157aad9f57f3400ecfcc61dbeb/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202603%2F2026071100%402x.png" alt="これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート" title="これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート" class="entry-image" /></a></p><p>CSSでグラデーションを実装するときに実装コードを毎回調べている、そんな人にお勧めのチートシートを紹介します。 CSSで実装できるグラデーション、線形、放射状、円錐状、それぞれの繰り返しバージョンに加え、複数のグラデーションの重ね合わせ、円錐状グラデーションのストップのみを使用した円グラフなどの実装コー...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html" alt="はてなブックマーク - これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート" title="はてなブックマーク - これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-gradients-cheat-sheet-by-programoreno.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html 今回はかなりの数のアップデートがされており、さまざまなCSSのプロパティや関数に便利な機能が追加されています coliss 2026-07-05T23:07:15Z css chrome 24 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html" title="今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fchrome-150-adds-18-new-css-feature.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html">今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3f22fab60c44b9e9a02066e349cbfb74b9988e7a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202603%2F2026070401%402x.png" alt="今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能" title="今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能" class="entry-image" /></a></p><p>先週アップデートされたChrome 150に追加された、CSSとUIに関する新しい機能を紹介します。 今回はかなりの数のアップデートがされており、さまざまなCSSのプロパティや関数に便利な機能が追加されています。Web制作者は要チェックです！ New in Chrome 150 Chrome 150 beta 下記は各ポイントを意訳したものです。 ※元サ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html" alt="はてなブックマーク - 今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能" title="はてなブックマーク - 今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-150-adds-18-new-css-feature.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html CSSのborder-shapeプロパティは、ボーダーに任意の形状（多角形・円など）を設定できます coliss 2026-06-29T01:48:13Z css 67 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html" title="CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fconnecting-circles-with-border-shape.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html">CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2df64366a364380fd085a9a836d48c4e2a9a9a91/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026061301.gif" alt="CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます" title="CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます" class="entry-image" /></a></p><p>CSSで2つの円を線でつなぐボーダーを実装できると思いますか？ 可能になりました！ Chrome 147+のアップデートでサポートされたborder-shapeプロパティを使用すると、ボーダーにあらゆる形状（多角形・円など）を設定できます。 まずは、実際の動作をご覧ください。ドラッグの操作にはJavaScriptが使用されていますが、...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html" alt="はてなブックマーク - CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます" title="はてなブックマーク - CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/connecting-circles-with-border-shape.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html CSSのcolumn-ruleプロパティは、ボーダーや疑似要素を使用せずに、CSS Grid, Flexbox, マルチカラムレイアウトでギャップをCSSで装飾できます coliss 2026-06-25T01:53:54Z css 23 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html" title="CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fgap-decorations-used-css.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html">CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c210a8368d943e8fffb11be23273d400968ed784/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026053001%402x.png" alt="CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります" title="CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります" class="entry-image" /></a></p><p>この機能を待ち望んでいた人は、多いと思います！ 6月にアップデートされたChrome 149で、CSS GridやFlexboxのギャップをCSSで装飾できるようになりました。言い換えると、コンテナ間に区切り線をスタイルできます。 これまでは罫線を描いた背景画像を使用したり、ボーダー用のdivを加えたり、疑似要素を使用したりと工...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html" alt="はてなブックマーク - CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります" title="はてなブックマーク - CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/gap-decorations-used-css.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ coliss 2026-06-23T02:04:02Z css 20 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html" title="CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fstandalone-css-editor-inspec.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html">CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3ea2d9a61323c0da40bd2e2ce06a82928ddceaed/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026060701%402x.gif" alt="CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec" title="CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec" class="entry-image" /></a></p><p>CSSの検証やデバッグにデベロッパーツールを使用している人が多いと思います。しかし、デベロッパーツールではリロードするとその変更内容が消えてしまうという大きな弱点があります。 macOS用のインスペクター、CSSに特化されたエディタを紹介します。基本的な機能はデベロッパーツールと同等で、要素をクリックすると...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html" alt="はてなブックマーク - CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec" title="はてなブックマーク - CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/standalone-css-editor-inspec.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/css-clamp-generator.html clamp()の手作業だと面倒な計算式を1クリックで生成できるツール。 font-sizeの設定だけでなく、line-height, margin, padding, gapなどCSSのあらゆるプロパティをサポート coliss 2026-06-16T01:49:32Z css 24 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-clamp-generator.html" title="レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-clamp-generator.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-clamp-generator.html">レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-clamp-generator.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c410d866f71e8d77b3c28a0fa6be3eccd6184c2a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026060602-01%402x.png" alt="レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator" title="レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator" class="entry-image" /></a></p><p>レスポンシブ対応の最近の実装方法は、メディアクエリとclamp()の使い分けが明確になってきました。メディアクエリは構造的なレイアウトを変更するとき、そしてclamp()はビューポートに対して比例的に変更するとき、といった感じです。 clamp()の需要が高まる現在、面倒なのが値の計算式です。フォントサイズをはじめ、...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-clamp-generator.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-clamp-generator.html" alt="はてなブックマーク - レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator" title="はてなブックマーク - レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-clamp-generator.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html 絵文字をclass名としてBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワーク coliss 2026-06-10T01:43:12Z css 16 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html" title="このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fbem-methodology-using-emoji.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html">このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b5a7ad06e05f985a748efbc7b9d272bd3f8cda54/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026051801%402x.png" alt="このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji" title="このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji" class="entry-image" /></a></p><p>ぱっと見、なんじゃこりゃ！ と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。 完全なデザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、さらにビルドツールチェーンも付属していま...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html" alt="はてなブックマーク - このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji" title="はてなブックマーク - このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/bem-methodology-using-emoji.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク coliss 2026-06-09T01:54:18Z css 24 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html" title="HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fclassless-framework-devcss.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html">HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd768412de5e1b3d116f7b01083eefc80c273e2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026060710%402x.png" alt="HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css" title="HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css" class="entry-image" /></a></p><p>プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。 dev.css dev.css -tangled dev.cssの特徴 dev.cssのデモ dev.cs...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html" alt="はてなブックマーク - HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css" title="はてなブックマーク - HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/classless-framework-devcss.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html UIをシェイプできるようになり、CSS GridやFlexboxのコンテナ間に罫線などを簡単に実装、拡大縮小された画像をくっきり表示、テーブルのデフォルトだったboder-color: gray;が削除されたなど coliss 2026-06-08T02:03:52Z css 29 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html" title="CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fchrome-149-adds-9-new-css-feature.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html">CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/86e912ff8f3f806d8ba2462632470ba90ecfc4d1/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026060301%402x.gif" alt="CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能" title="CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能" class="entry-image" /></a></p><p>先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべき点は、たくさんあります！ まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さらにCSS GridやFlexboxのギャップをスタイルできるようになり...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html" alt="はてなブックマーク - CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能" title="はてなブックマーク - CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-149-adds-9-new-css-feature.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html 数行のCSSで、インターフェイスの使い心地を向上させるテクニック。生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこともできます coliss 2026-06-04T01:52:11Z css 33 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html" title="数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fmake-interfaces-feel-better-by-jakubkrehel.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html">数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/44ff31a2d8cd848b4035532847c08b46335dc5bf/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026050901%402x.png" alt="数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ" title="数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ" class="entry-image" /></a></p><p>優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこともできます。 Details that make interf...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html" alt="はてなブックマーク - 数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ" title="はてなブックマーク - 数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/make-interfaces-feel-better-by-jakubkrehel.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html CSSのpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます coliss 2026-06-02T01:41:54Z css 21 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html" title="CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Ffluid-modular-type-scale.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html">CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c0fb07ab46738596a91fc9d996ed664bbcd239af/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026051701%402x.png" alt="CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック" title="CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック" class="entry-image" /></a></p><p>CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。 メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。 Fl...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html" alt="はてなブックマーク - CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック" title="はてなブックマーク - CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/fluid-modular-type-scale.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html AliveUIは、モーションを最優先にしたCSSのフレームワーク coliss 2026-05-25T02:16:52Z css 37 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html" title="HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fmotion-first-css-framework-aliveui.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html">HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5a06eece1d51342335d40867f67272ccf2bd9e2e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026051301%402x.gif" alt="HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI" title="HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI" class="entry-image" /></a></p><p>HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促す...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html" alt="はてなブックマーク - HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI" title="はてなブックマーク - HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/motion-first-css-framework-aliveui.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素を配置 coliss 2026-05-19T01:47:11Z css 10 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html" title="Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fdairy-css-flexbox-puzzle.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html">Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/36d85b048a6cd2505b728eceede650e558401ce4/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026051602-01%402x.png" alt="Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle" title="Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle" class="entry-image" /></a></p><p>flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素 […]</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html" alt="はてなブックマーク - Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle" title="はてなブックマーク - Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/dairy-css-flexbox-puzzle.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html CSSの各プロパティや値をデザインしてアイコン化したCascade Icons coliss 2026-05-18T01:50:15Z css MITライセンス 17 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html" title="職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcascade-icons-for-css-properties.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html">職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e65de4b89ec54961fbc8e1d5bd6d513927c591f1/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026051610%402x.gif" alt="職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons" title="職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons" class="entry-image" /></a></p><p>コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。 display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインさ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html" alt="はてなブックマーク - 職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons" title="はてなブックマーク - 職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/cascade-icons-for-css-properties.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html コンテナクエリをcontainer-typeを設定しなくてもコンテナ名のみで機能するようになったこと、video要素やaudio要素も遅延読み込みに対応したこと、ユーザー操作によるテキストのオーバーフローの切り取りなど coliss 2026-05-12T01:51:40Z css chrome 7 <blockquote cite="https://coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html" title="Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Farchitectonics%2Fchrome-148-adds-7-new-css-feature.html" alt="" /> <a href="https://coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html">Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能</a></cite><p><a href="https://coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4993b1e0792d5d2e5837a7a65427b8c77ae405a8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026050610%402x.png" alt="Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能" title="Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能" class="entry-image" /></a></p><p>5/6にアップデートされたChrome 148に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、コンテナクエリをcontainer-typeを設定しなくてもコンテナ名のみで機能するようになったこと、video要素やaudio要素も遅延読み込みに対応したこと、ユーザー操作によるテキストのオーバーフ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html" alt="はてなブックマーク - Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能" title="はてなブックマーク - Web制作者は要チェック！ コンテナクエリの進化、動画の遅延読み込みなど、Chrome 148で新しく追加されたCSSの機能" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/architectonics/chrome-148-adds-7-new-css-feature.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html fieldsetのコンポーネントを最小限のHTMLとモダンCSSで実現したテクニック。レスポンシブに完全対応で、方向directionにも対応 coliss 2026-04-23T02:03:37Z css 27 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html" title="最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fcss-fielset-compornent.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html">最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f2977b6945b9acf850fada348d7620b247e7dc86/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026042101%402x.png" alt="最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック" title="最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック" class="entry-image" /></a></p><p>テキストや画像をボーダーで囲って、ボーダーの上部にタイトルを配置したいと思ったことはありませんか？ 以前はこれをCSSで実装しようとしてもかなりトリッキーな実装でした。またfieldsetとlegendでも実装できますが、そもそもフォームではない上に、CSSによる装飾も貧弱です。 fieldsetのコンポーネントを最小限のHTM...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html" alt="はてなブックマーク - 最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック" title="はてなブックマーク - 最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/css-fielset-compornent.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html カード、ボタン、ナビゲーション、タブ、アコーディオン、モーダル、フォーム、テーブルなどのUI要素やコンポーネントをLiquid Glassの美しいデザインにしたUI Kit coliss 2026-04-22T02:16:28Z css 23 <blockquote cite="https://coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html" title="CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fcss%2Fpure-css-liquid-glass-ui-kit.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html">CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8cfd0836d400e2e4111b88cac9b957c8371a78ef/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026041801%402x.png" alt="CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit" title="CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit" class="entry-image" /></a></p><p>iOSにLiquid Glassが採用されてから早半年が過ぎました。 慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。 WebサイトやスマホアプリのUIで使われるカード、ボタン、ナビゲーシ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html" alt="はてなブックマーク - CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit" title="はてなブックマーク - CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/css/pure-css-liquid-glass-ui-kit.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html View Transitionsを使った最近のナビゲーション、スクロール位置に基づいて要素をアニメーションで変化させたり、アニメーションの制御をコントールするなど、よく使うコードがまとめられています coliss 2026-04-14T02:00:07Z css view transitions 17 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html" title="Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fcss-view-transitions-toolkit.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html">Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c695f8cee69e8d6a466cde726c5a5480938e7092/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026041102-01%402x.png" alt="Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit" title="Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit" class="entry-image" /></a></p><p>View Transitionsをより簡単に操作するためのコードや関数をまとめたView Transitions Toolkitを紹介します。 View Transitionsを使った最近のナビゲーション、スクロール位置に基づいて要素をアニメーションで変化させたり、アニメーションの制御をコントールするなど、よく使うコードがまとめられています。 View Tran...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html" alt="はてなブックマーク - Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit" title="はてなブックマーク - Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/css-view-transitions-toolkit.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html 要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など coliss 2026-04-13T01:54:17Z css 23 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html" title="これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fchrome-147-adds-4-new-css-feature.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html">これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/67e621b9fb95fcc254c5adbce01236bce7295a08/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202602%2F2026040701%402x.gif" alt="これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能" title="これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能" class="entry-image" /></a></p><p>4/7にアップデートされたChrome 147に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など、Web制作者は要チェッ...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html" alt="はてなブックマーク - これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能" title="はてなブックマーク - これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/chrome-147-adds-4-new-css-feature.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>