Web制作に役立つ情報一覧

Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能

2026/03/13(Fri) 08:56

スマホでもテキストの拡大縮小ができるようように これまでiOSやAndroidではテキストサイズを変更しても、Webページのテキストサイズに反映されないことがありました。これはブラウザと作成されたコードに依存しており、推奨されるアプローチとは異なります。Chrome 146でmetaに新しくtext-scaleが導入されました。これにより、ユーザーはOSでフォ​​ントサイズの設定を大きくした場合に、フォントサイズを大きくできるようになります。

https://coliss.com/articles/build-websites/operation/work/chrome-146-adds-5-new-css-feature.html

これでSVGアイコンを探すときに困らない！ 無料で商用利用できるライブラリを横断検索できる便利サイト -All SVG Icons

2026/03/12(Thu) 08:52

SVGアイコン、特に無料で利用できるオープンソースのSVGアイコンをまとめて検索・閲覧できる便利なサイトを紹介します。さまざまなSVGアイコンのライブラリを横断検索することもでき、好みのデザインを見つけて、SVGアイコンをダウンロードすることもできます。

https://coliss.com/articles/build-websites/operation/work/all-svg-icons.html

シンプルだから使いやすい！ ページの途中で上方向にスクロールするとヘッダを上部から表示する超軽量スクリプト -Peek

2026/03/11(Wed) 08:56

ユーザーが下方向にスクロールするとヘッダを自動的に非表示にし、ページの途中で上方向にスクロールするとヘッダを表示する、超軽量のスクリプトを紹介します。実装は非常に簡単で、カスタマイズも簡単、既存のWebページに導入することも簡単です。依存関係はなく、単独で動作します。

https://coliss.com/articles/build-websites/operation/javascript/headroom-style-scroll-intent-library.html

これはかなり万能に使える！ たった3行のCSSで、要素を中央に絶対配置する新しい記述方法

2026/03/06(Fri) 08:50

CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。また、中央以外に左上・右上・左下・右下などにも配置できます。

https://coliss.com/articles/build-websites/operation/css/css-center-absolute-element.html#google_vignette

スマホユーザーを逃さない！CSSで作る縦スクロール設計

2026/03/05(Thu) 08:53

最近、息子（小学生）がスマホでYouTubeショートを見ているのをよく観察するんですが、もうずーっと縦にシュッシュッとスワイプしているんですよね。興味なければ即スワイプ、面白ければ止まる。この「縦にスワイプして次へ」という動作が完全に体に染みついているんだなって思いました。

https://fastcoding.jp/blog/all/ui-ux/css-vertical-scroll-mobile-design/

CSSのハックやベンダープレフィックスなどの古い記述方法をチェックしてくれる「ReliCSS」

2026/03/04(Wed) 09:06

長年運用を続けているWebサイトなど、CSSのハックやベンダープレフィックスなど、現在は不要になっている記述が残ったままになることはよくあります。そんなCSS内の最新の記述では不要になっているものをピックアップして、対策のランク付けふくめ改善提案をしてくれる「ReliCSS」が便利そうだったのでメモ書きとして紹介します。

https://black-flag.net/web_devel/20260303-8360.html

検索エンジンはHTMLをどのように解析するのか？ 正しいHTMLはSEOで重要なのか？

2026/03/02(Mon) 08:53

Search Off the Record ポットキャストのエピソード 105 では、ブラウザが HTML をどのようにパース（解析）するか、そして SEO やウェブサイトのパフォーマンスにとってそれが何を意味するかをテーマに Google のMartin Splitt（マーティン・スプリット）氏と Gary Illyes（ゲイリー・イリース）氏がディスカッションしました。

https://www.suzukikenichi.com/blog/google-explains-how-googlebot-parses-html/

角の形を自在に変える！CSS corner-shapeプロパティ入門

2026/02/27(Fri) 08:53

CSSのcorner-shapeプロパティは、border-radiusで定義された角の領域に対して、「どのような形状で処理するか」を指定できるプロパティです。これまで、角の形状を変えるデザインを実現するには、用途に応じて複数の手法を組み合わせる必要がありました。

https://ics.media/entry/260226/

これ1つでOK！ CSSでLiquid GlassやGlassmorphism、Nuemorphismを実装できる便利ツール -Aether CSS

2026/02/25(Wed) 08:52

iOSにLiquid Glassが採用されてから早半年が過ぎました。当初はiPhoneやiPadのUIに使いにくさを感じていましたが、Liquid Glassを採用しているアプリも増えた最近では逆に採用されていないアプリのUIを見るとちょっと古くさい感じがしたりします。UIで使われるカードやボタンをLiquid Glassをはじめ、GlassmorphismやNuemorphismにするCSSをコピペで簡単に実装できるコードを生成するツールを紹介します。

https://coliss.com/articles/build-websites/operation/css/liquid-glass-css-generator.html

ブックマークしておくと便利！ さまざまなデバイスのスクリーンサイズ・解像度・ピクセル密度などの仕様が一覧できる -What Is My Screen Size?

2026/02/20(Fri) 08:57

iPhoneやiPadのスクリーンサイズと解像度とピクセル密度っていくつだっけ？ GalaxyやPixelのスクリーンサイズと解像度とピクセル密度は？もちろんそれぞれの公式サイトで探せば見つかりますが、けっこう手間です。さまざまなデバイスのスクリーンサイズや解像度やピクセル密度などの仕様が一覧できる便利なサイトを紹介します。

https://coliss.com/articles/build-websites/operation/work/screen-sizes-and-resolutions-for-different-devices.html