CSS

簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】

2022/06/10(Fri) 08:54

グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。

https://liginc.co.jp/595446

覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

2022/06/09(Thu) 08:55

CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。

https://coliss.com/articles/build-websites/operation/css/css-conic-gradient-border.html

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/08(Wed) 09:00

CSSの単位px、em、remは、どれをどこで使用するのがよいか。font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。

https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html

コーディングが少し楽になる、意識したい命名規則とCSS設計。

2022/06/06(Mon) 08:55

今回はHTMLに付けるclassの名前について考えてみたいと思います。classに付ける名前によってタグの組み方もコーディングの速さも変わってきますし、拡張性の高さも変わってきます。classの命名についてちょっと知識をつけていただいたら、コーディング時間が短くなってもっと楽しく開発できるようになりますよ！ というわけでいってみましょう。

https://liginc.co.jp/595341

HTMLとCSSの疑問が一気に解ける！ 真剣に学びたい人にお勧めの解説書 -プロを目指す人のためのHTML＆CSSの教科書

2022/06/06(Mon) 08:54

最新のHTML Living Standardの仕様に準拠したHTMLとCSSの基礎知識を身につけ、なぜそこにそのHTMLを、そのCSSを使用するのかまで実践的な知識までしっかりと学べる解説書を紹介します。

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

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

2022/06/01(Wed) 08:54

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。

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

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

2022/05/30(Mon) 08:58

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。

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

これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

2022/05/30(Mon) 08:57

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。

https://coliss.com/articles/build-websites/operation/css/100-modern-css-buttons.html

これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

2022/05/12(Thu) 08:55

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。

https://coliss.com/articles/build-websites/operation/css/centering-side-aligned-using-modern-css.html

これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball

2022/04/28(Thu) 09:09

コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。

https://coliss.com/articles/build-websites/operation/css/uiball-loaders.html