CSS

CSSのメディアクエリでcalc()が使用できるの知ってた？

2024/06/13(Thu) 08:59

CSSのメディアクエリでcalc()が使用できるのを知ってましたか？これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。メディアクエリは比較演算子が使えるようになったり、実はcalc()も使えたりと、まだまだ活躍の場がありますね。

https://coliss.com/articles/build-websites/operation/css/use-calc-in-a-media-query.html

CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい

2024/06/07(Fri) 09:06

ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。

https://coliss.com/articles/build-websites/operation/css/old-dogs-new-css-tricks.html

line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい

2024/05/31(Fri) 08:50

最近Xで投稿したline-heightの上下の余白（ハーフ・レディング）を打ち消す方法が反響を得ていましたが、こちらで紹介したcalc((1em - 1lh) / 2)はグローバルスコープのCSS変数で定義しておくと便利です。

https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/

UIデザインで中央配置がずれてしまう理由と解決方法

2024/05/31(Fri) 08:49

UIデザインには、至る所に中央揃えが使用されます。しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。

https://coliss.com/articles/build-websites/operation/work/about-centering.html

Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ

2024/05/29(Wed) 08:51

CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。

https://coliss.com/articles/build-websites/operation/css/css-cheatsheets-for-web-development.html

誤解しているかも！ CSSの詳細度について、よくある誤解を解説

2024/05/27(Mon) 08:57

CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。

https://coliss.com/articles/build-websites/operation/css/misconceptions-about-css-specificity.html#google_vignette

これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）

2024/05/23(Thu) 09:21

このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。

https://photoshopvip.net/157774#google_vignette

CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

2024/05/23(Thu) 09:19

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。

https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集

2024/05/20(Mon) 09:02

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。

https://www.tak-dcxi.com/article/html-css-techniques-to-improve-usability-and-accessibility-with-minimal-code/

令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/15(Wed) 09:08

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。

https://zenn.dev/necscat/articles/bc9bba54babaf5