CSS

便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

2023/01/19(Thu) 09:05

Webサイトやスマホアプリでよく使用される、ボタン、カード、検索ボックス、チェックボックス、ローダーなど、HTMLとCSSで実装されたUI要素がオープンソースで利用できるUIverseを紹介します。

https://coliss.com/articles/build-websites/operation/work/open-source-ui-elements-uiverse.html

2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど

2022/12/21(Wed) 09:02

CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。

https://coliss.com/articles/build-websites/operation/css/the-state-of-css-2022.html

HTMLとCSSを真剣に学びたい人におすすめ！ 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング

2022/12/19(Mon) 08:58

HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気をつけることなど、各ステップごとに詳しくていねいに解説されています。

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

CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項

2022/12/09(Fri) 08:54

先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。この新しいビューポート単位の基本的な使い方と注意事項を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-large-small-dynamic-viewport-units.html

CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート

2022/12/08(Thu) 08:55

レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。

https://coliss.com/articles/build-websites/operation/css/layout-breakouts-with-css-grid.html

知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

2022/11/30(Wed) 09:00

CSSはどんどん便利になってますね！:has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7〜9個の場合などに親要素に異なるスタイルを設定するのが簡単です。

https://coliss.com/articles/build-websites/operation/css/style-a-parent-element-using-css-has.html

CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

2022/11/25(Fri) 09:00

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的なテクニックについても解説されています。

https://coliss.com/articles/build-websites/operation/css/inside-frontend-developer-mind.html

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/21(Mon) 08:56

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました。次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

https://zenn.dev/moneyforward/articles/css-nesting-without-sass

【CSS】1行のテキストを両端揃えする方法

2022/11/09(Wed) 08:54

1行のテキストを両端揃えしたいことってありますよね。たとえば以下のようなデザインに出会ったことはないでしょうか。「うどん」「そば」「ラーメン」のテキストが両端揃えになっています。

https://zenn.dev/yend724/articles/20221105-osx4fnh0l44mn3ii

今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ

2022/11/07(Mon) 08:55

HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。

https://photoshopvip.net/140529