CSS

CSSの新しいセレクタが便利！複数のセレクタを1つにまとめられる:is()、さらに詳細度を0にする:where()の使い方

2021/04/07(Wed) 10:06

CSSの新しいセレクタが、主要なすべてのブラウザにサポートされました（ただし、IEは除く）。複数のセレクタを1つにまとめられる:is()、同機能でさらにセレクタの詳細度を0にする:where()をどのように使い分ければよいのか紹介します。

https://coliss.com/articles/build-websites/operation/css/where-pseudo-selector-has-a-cool-specificity-trick.html

Flexboxで実装する定番レイアウトのコードのまとめ

2021/04/01(Thu) 09:57

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。

https://coliss.com/articles/build-websites/operation/css/evergreen-css-flex-layouts.html

CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説

2021/03/25(Thu) 09:54

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。

https://coliss.com/articles/build-websites/operation/css/css-logical-properties.html

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css

2021/03/22(Mon) 09:59

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。

https://coliss.com/articles/build-websites/operation/css/charts-css-for-data-visualization.html

2021年版、CSS Gridでどのように配置されるかをまとめたチートシート

2021/03/18(Thu) 09:54

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。

https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheets.html

CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック

2021/03/12(Fri) 10:36

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？

https://coliss.com/articles/build-websites/operation/css/table-with-both-a-sticky-header-and-a-sticky-first-column.html

美しいドロップシャドウ影を作成できるデザイン小技テクニックまとめ

2021/03/10(Wed) 09:58

ドロップシャドウ（英: Dropshadow）は、今どきのウェブサイトやユーザーインターフェースにおいて重要なデザイン要素です。整理された長方形にドロップシャドウを適用することで、奥行き感と階層づくりに役立ちます。

https://photoshopvip.net/127766

【第4弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス

2021/03/04(Thu) 09:54

CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！

https://www.webcreatorbox.com/tech/css-tips-4

JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック

2021/03/01(Mon) 09:58

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。

https://coliss.com/articles/build-websites/operation/css/shrinking-header-on-scroll-without-javascript.html

CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍

2021/02/17(Wed) 09:53

先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/how-to-use-aspect-ratio-css-property.html