CSS

HTMLとCSSの人が、Reactを学ぶのにぴったりな最高の一冊！ 解説がていねいで、すごく分かりやすい

2022/08/01(Mon) 08:56

HTMLとCSSだけではキャリアアップの限界を感じている、JavaScriptを今より使えるようになりたい、Next.jsやReactも気になるけどどこから手をつければよいか分からない、そんな人にお勧めの解説書を紹介します。

https://coliss.com/articles/book-review/isbn-9784839980177.html

最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

2022/07/27(Wed) 09:00

Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。

https://coliss.com/articles/build-websites/operation/css/lever-css-tricks-by-steve8708.html

【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。

2022/07/20(Wed) 08:58

みなさんは、このドロップシャドウを見てどう思いますか？ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、あまり綺麗なドロップシャドウとは感じないですよね？この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！

https://qiita.com/degudegu2510/items/8f2a5cce3de08096e06b

CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

2022/07/14(Thu) 08:51

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/css-only-extended-border-and-background.html

【定番】UIデザインで効果的なドロップシャドウ、影の付け方５選

2022/07/13(Wed) 08:52

文字や画像に、まるで影が落ちているような立体感を表現できる、「ドロップシャドウ（英： Drop Shadow）」。美しい影をデザインするテクニックや、コピペ可能なCSS便利コレクションや色付きの影生成ツールなど、さまざまな「影」を紹介してきました。

https://photoshopvip.net/135895

IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css

2022/07/06(Wed) 08:52

IEのサポートが終了し、Web制作でサポート対象がモダンブラウザとなりました。これにより、CSSにおけるブラウザの互換性の問題は以前に比べてはるかに少なくなります。無理なCSSリセットやすべてをリセットする必要もなくなります。現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。CSSのテクニックや知見も満載です！

https://coliss.com/articles/build-websites/operation/css/css-reset-by-ellyloel.html

【CSS】あっという間に悩み解決！新常識な最新テクニック24選

2022/07/04(Mon) 09:04

この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。

https://photoshopvip.net/135781

縦書きHTMLにおける文字の向きはどのように定まるか

2022/07/04(Mon) 08:58

この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。

https://blog.nnn.dev/entry/2022/07/01/180000

コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編）

2022/06/29(Wed) 08:57

仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。

https://photoshopvip.net/135692

これは朗報！ CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

2022/06/23(Thu) 08:52

これを待ち望んでいた人も多いと思います。ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。

https://coliss.com/articles/build-websites/operation/css/media-query-range-syntax.html