Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS Tailwind CSS HTML コンポーネント化

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

Safari 13.1 以降では San Francisco の Mono や Rounded な variant とかを CSS で指定できるようになっている - polamjaggy nikki

2021/05/02 13 users variant mono polamjaggy nikki

WWDC20 の The details of UI typography という動画をなんとなく見ていたところ偶然気がついた。 developer.apple.com Transcript 的にはこの辺: Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-se... 続きを読む

1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo

2009/12/21 442 users CSS outer margin inner div

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0p... 続きを読む