CSS
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)
Microsoft Edge でCSSでlist-style: noneが指定されているにも関わらず、・や 1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。 調べているとIEでもこの問題はあったようで 問題の発生条件 概ね次のような条件で発生するようです。 ul / ol / l…
if文の中に&&や||で条件を複数入れた時にどちらから処理されるか、PHPは左からであってると思ったけど、何か右から判定するのが合った気がしたので念のため調べてみました。 次のような関数を作成して、この関数を条件にすれば、出力結果から左右どちらから…
WEBページを印刷する需要ってもうそんなに無い気もするのだけれど、必要になったのでメモ。 印刷用のCSS 1. 印刷用のCSSをmedia="print"指定した別ファイルで読み込ませる <link rel="stylesheet" type="text/css" href="main.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> 印刷用のスタイルは print.css だけで完結する 2. メディアクエリ @media print で</link></link>…
レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。 Chromeの開発ツールでは意図したとおりに動作していたのですが、…
モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .m…
例えばこんな感じのCSSを出力したくて [class^="icon-"], [class*=" icon-"] { font-family: 'webfont-icon' !important; ... } icon- の部分をを変数にしたい様な時。 変数と一緒に"(ダブルコーテーション)や(半角スペース)を出力させるのが結構落とし穴で…
IE11… またお前か！ max-widthのバグが多いですねw display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。 <div class="table"> <div class="table-cell"> <img class="max-width-100per"> </div> </div> table-layout: fixed を使うと max-width が効く display: table …
コーディングをしていて IE で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった... 発生…
三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描…
Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート…
所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横ス…
IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…
StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。 しかし、色のバリエーションがある時に $primary = #158cba $primary-dark = #127ba3 $success = #28b62c $…
