CSS

Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】

2024/07/03(Wed) 08:58

Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。

https://photoshopvip.net/158804

CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

2024/06/26(Wed) 08:56

たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。

https://coliss.com/articles/build-websites/operation/css/css-gradient-overlay-with-border-image.html#google_vignette

これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

2024/06/17(Mon) 09:00

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。

https://coliss.com/articles/build-websites/operation/css/type-fluidity-clamp-calculator.html

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