CSS

[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック

2018/11/02(Fri) 09:55

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？

https://coliss.com/articles/build-websites/operation/css/using-feature-detection-with-selectors.html

【コピペ改変OK】CSSだけで作れるボタンデザイン10選

2018/10/31(Wed) 09:53

HTMLとCSSだけで作れるボタンのデザインのサンプルをまとめました。カーソルを合わせたあとのスタイルもクリックしたあとのスタイルもすべて用意してあるので操作感もバッチリです。そのままコピー＆ペーストで使っても、大きさや色を変更してもOKです。

https://creive.me/archives/15410/

CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法

2018/10/23(Tue) 09:53

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。

https://coliss.com/articles/build-websites/operation/css/css-border-radius-can-do-that.html

【CSS】beforeとafterなど擬似要素の使い方

2018/10/03(Wed) 09:57

「擬似要素って、なんとなくとっつきづらい」「擬似要素で表現できるものは、CSSに書けばよくない?」こんなイメージを「擬似要素」に持っていませんか？ 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの、という疑問はCSSを最初に学習し始めた人が素朴に抱きがちです。

https://creive.me/archives/14779/

カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法

2018/10/02(Tue) 10:02

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/color-system-in-css.html

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

2018/09/28(Fri) 09:58

CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。

https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html

【コピペOK】ちょい足しで使えるCSSアニメーションのサンプル8選（解説つき）

2018/09/21(Fri) 10:08

この記事ではCSSアニメーションについて解説をしながらサンプルを掲載していきます。CSSは書けるけどアニメーションは詳しくない。CSSのアニメーションに興味がある。だけどどう実装すればいいかわからない

https://creive.me/archives/14275/

コピペで実現！思わず押したくなるCSSボタンエフェクト42個まとめ

2018/09/19(Wed) 09:52

CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。

http://photoshopvip.net/111009

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

2018/09/19(Wed) 09:51

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/pure-css-progress-bar.html

CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方

2018/09/14(Fri) 09:59

CSSのscroll-snapプロパティを使用すると、縦長ページなどでスクロールをしてコンテンツの中途半端な位置で終了しても、ちょうどよい位置にぴたっとスナップさせることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。

https://coliss.com/articles/build-websites/operation/css/how-to-use-css-scroll-snap.html