CSS
今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っ…
PostCSS はデフォルトでは Sass のようなネストでスタイルを書くことができません。 Global 用のスタイルを書くときなどにネストできないとちょっと不便なので PostCSS を使ってネストして CSS を書けるようにしたメモ Vite (react) のプロジェクトに PostCS…
スクリーンリーダーが読み取れない隠しテキストはスパム判定でペナルティを受ける可能性がある
input[type="radio"] を利用した CSS だけで作るタブ 作ったやつ！ See the Pen Tab without JavaScript by KIKIKI (@kikiki_kiki) on CodePen. HTML <div class="tab"> <input type="radio" id="tab1" name="tab" checked /> <input type="radio" id="tab2" name="tab" /> <input type="radio" id="tab3" name="tab" /> </div>
あるCSSカスタムプロパティ(CSS変数)で定義してある数値を反転させた値で使いたいケースが稀にあります。 例 例えば親要素の padding をネガティブマージンで打ち消したいような場合、padding, negative margin の量を CSSカスタムプロパティ(CSS変数)にでき…
CSS 完全に理解した！！！！ [ネタ投稿]
タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { c…
自動で JS, CSS の整形をしてくれる Prettier とても便利で愛用しています。 同じクオートの設定を JS の時は ' (Single Quote), CSS の時は " (Double Quote) とで分けたい時のメモ overrides, files を使って設定の場合分けができる .prettierrc.json { "s…
領域外への無限スクロールは `overscroll-behavior-y: none;` を body に付けると抑制できるっぽい！
Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ Sass の変数を #{} で囲ってあげればOK $textColor: #000; $backgroundColor: #FFF; // カスタムプロパティを定義 :root { --text-color: #{$textColor}; --background-color: #…
ダークモード…やってこなかったので今更の入門したのでメモ。 prefers-color-scheme を使う prefers-color-scheme をメディアクエリの中で使用することでデバイスのダークモード/ライトモードの設定を識別できます。 light ... ユーザーがシステムに、明色の…
Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /></div>…
フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち？ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…
CSS Modules とゎ？ ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…
CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…
CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ 相談を受けたHTML と CSS HTML <body> <header></header> <section>section 1</section> <section>section 2</section> <section>section 3</section> </body> CSS section:nth-child(2)…
text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう！
ことの発端 macOS CatalinaのChrome 77のフォント問題。勘違いしている人が多いので説明。Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる↓該当するフォントがなくなったため、Sans Serifが明朝体で表示される↓フォント指…
変数に !default フラグを付けて定義すると、変数が定義されてないか値が null の場合のみ値が設定されるようになる g.e. !default フラグなし $base-color: #333; $base-color: #000; // 後から出てきたもので上書きされる body { color: $base-color; // =…
%, em, rem % ... 親要素の値を 100% として計算する相対値。 em ... フォントサイズを基準にした単位。親要素の font-size を基準にする。 rem ... root em. ルート要素 (html) の font-size を基準とする。 %, em で指定している値の実際のサイズは親要素…
こんな感じで怒られた。 QualifyingElement: Avoid qualifying attribute selectors with an element. 「属性セレクタで要素を修飾しないで」ということらしい。 input[type="radio"]:checked, input[type="checkbox"]:checked { + label { color: $highligh…
Sass で if文中で変数を使う時にスコープのトラップがあったのでメモ。 if文 ( @ifディレクティブ ) の中で作成された変数は、if文外でアクセスできない 次のような書き方だと変数が存在しないというコンパイルエラーになります。 .foo { @if $is-error { $c…
Sass で使える比較演算子は ==, !=, <, <=, >, >=。論理演算子は and, or, not。つまり、Sass には &&, || という演算子は存在していない。 Sass の if 文で複数条件を設定したい時は and, or を使う e.g. リンクカラーを設定するような mixin で、文字色だ…
React のプロジェクトを作る時に create-react-app とても便利です。 しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…
CSS を Sass (SCSS) + BEM ( Block-Element-Modifier ) で書いているプロジェクトに参加してて、BEMに合うようにするために @at-root を使ってくださいと言われ、 @at-root というものを知らなかったので調べたメモ。 結論としては現在では Sass で BEM な C…
5年ぶりくらいにSass (SCSS) を触る機会があってすっかり忘れてて手間取ってしまったので、基本的な事を思い出す意味も込めてメモ。 Sass Sassには{}の不要なSASS記法と、{}が必要でCSSに近いSCSS記法の2つがある。 このエントリーは SCSS にについて。 { } …
恥ずかしながら空要素だけに適応できる:blank, :empty って疑似要素があることを知らなかったので試して見たメモ。 1. <div class="square"> </div> 2. <div class="square"> </div> 3. <div class="square"></div> .blank .square:blank { background-color: #ec4727; } .blank .square:-moz-only-whitespace { background-color: #ec4727;…
transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈… transition transition: <property> <duration> <timing-function> <delay> transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指</delay></timing-function></duration></property>…
CSSのプロパティリセットする時に使うやつ。 initialとinherit CSS書かない日が続くとどっちが何だっけ？ってなることがあるのでメモ。(メモすれば忘れにくくなる！かも initial は 初期化 英語で initial は「初めの、最初の、初期の」とか。 プログラムと…
表題のとおりです。 画像をレスポンシブで100%表示するのにObject-fitが便利なのですが、IE11ではObject-fitがサポートされてないので、HTMLのIEを判別させる条件付きコメントを使ってIEの時だけ上書きするCSSを読み込ませようとしていました。 Windowsの実…
![はてなブックマーク - IE HTMLのIE分岐の条件付きコメント <!-- [if IE] -->が効かなくなってた。](https://b.hatena.ne.jp/entry/image/https://chaika.hatenablog.com/entry/2018/04/06/120000)