Sass の npm パッケージは sass と node-sass どっちを使えばいいの？

フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち？ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…

CSS Modules やっていき

Webpack JavaScript CSS Sass (SCSS) Tips

CSS Modules とゎ？ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…

2020-10-22

webpack css-loader と style-loader の違いについて学んだ

Webpack JavaScript CSS Sass (SCSS) Tips

CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…

2020-04-07

CSS :nth-child(n) の順番についてのメモ

CSS HTML5 Design

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)…

2019-12-23

CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる

CSS Design Tips

text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう！

2019-10-29

Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ

CSS Mac Design

ことの発端 macOS CatalinaのChrome 77のフォント問題。勘違いしている人が多いので説明。Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる↓該当するフォントがなくなったため、Sans Serifが明朝体で表示される↓フォント指…

2019-10-25

SCSS の !default フラグについてのメモ

Sass (SCSS) CSS

変数に !default フラグを付けて定義すると、変数が定義されてないか値が null の場合のみ値が設定されるようになる g.e. !default フラグなし $base-color: #333; $base-color: #000; // 後から出てきたもので上書きされる body { color: $base-color; // =…

2019-10-03

今更の CSS レスポンシブに使える単位 vw, vh, vmin, vmax と計算する calc()

CSS responsive

%, em, rem % ... 親要素の値を 100% として計算する相対値。 em ... フォントサイズを基準にした単位。親要素の font-size を基準にする。 rem ... root em. ルート要素 (html) の font-size を基準とする。 %, em で指定している値の実際のサイズは親要素…

2019-08-08

scss-lint に QualifyingElement といわれた。

Sass (SCSS) CSS Tips

こんな感じで怒られた。 QualifyingElement: Avoid qualifying attribute selectors with an element. 「属性セレクタで要素を修飾しないで」ということらしい。 input[type="radio"]:checked, input[type="checkbox"]:checked { + label { color: $highligh…

2019-05-28

Sass if文 ( @ifディレクティブ ) の中で変数を使う時の罠

Sass (SCSS) CSS

Sass で if文中で変数を使う時にスコープのトラップがあったのでメモ。 if文 ( @ifディレクティブ ) の中で作成された変数は、if文外でアクセスできない次のような書き方だと変数が存在しないというコンパイルエラーになります。 .foo { @if $is-error { $c…

2019-05-28

Sass if 文の条件式で &&, || は使えない

Sass (SCSS) CSS

Sass で使える比較演算子は ==, !=, <, <=, >, >=。論理演算子は and, or, not。つまり、Sass には &&, || という演算子は存在していない。 Sass の if 文で複数条件を設定したい時は and, or を使う e.g. リンクカラーを設定するような mixin で、文字色だ…

2019-05-27

React create-react-app したプロジェクトで stylus を使いたい

React Webpack stylus CSS

React のプロジェクトを作る時に create-react-app とても便利です。しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…

2019-05-24

Sass (SCSS) BEMで書く時に @at-root は必要か？

Sass (SCSS) CSS

CSS を Sass (SCSS) + BEM ( Block-Element-Modifier ) で書いているプロジェクトに参加してて、BEMに合うようにするために @at-root を使ってくださいと言われ、 @at-root というものを知らなかったので調べたメモ。結論としては現在では Sass で BEM な C…

2019-05-23

Sass (SCSS) 書き方のメモ

CSS Sass (SCSS)

5年ぶりくらいにSass (SCSS) を触る機会があってすっかり忘れてて手間取ってしまったので、基本的な事を思い出す意味も込めてメモ。 Sass Sassには{}の不要なSASS記法と、{}が必要でCSSに近いSCSS記法の2つがある。このエントリーは SCSS にについて。 { } …

2019-04-22

CSS3 疑似要素 :blank と :empty 試してみた

CSS

恥ずかしながら空要素だけに適応できる: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;…

2019-02-06

CSS アニメーションのメモ

CSS Design

transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈… transition transition: <property> <duration> <timing-function> <delay> transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指</delay></timing-function></duration></property>…

2018-12-05

CSS 何だったけってなりがちなメモ。initial と inherit

CSS

CSSのプロパティリセットする時に使うやつ。 initialとinherit CSS書かない日が続くとどっちが何だっけ？ってなることがあるのでメモ。(メモすれば忘れにくくなる！かも initial は初期化英語で initial は「初めの、最初の、初期の」とか。プログラムと…

2018-04-06

IE HTMLのIE分岐の条件付きコメント が効かなくなってた。

HTML CSS IE-BUG

表題のとおりです。画像をレスポンシブで100%表示するのにObject-fitが便利なのですが、IE11ではObject-fitがサポートされてないので、HTMLのIEを判別させる条件付きコメントを使ってIEの時だけ上書きするCSSを読み込ませようとしていました。 Windowsの実…

2018-04-06

Microsoft Edge リスト要素の記号が消えないバグ(list-style: none が効かない)にハマる。

HTML CSS IE-BUG Edge-BUG Design

Microsoft Edge でCSSでlist-style: noneが指定されているにも関わらず、・や 1. というリスト(ul, ol)の記号が消えないバグに遭遇しました。調べているとIEでもこの問題はあったようで問題の発生条件概ね次のような条件で発生するようです。 ul / ol / l…

2017-12-24

PHP if文の条件の判定順

PHP Tips CSS

if文の中に&&や||で条件を複数入れた時にどちらから処理されるか、PHPは左からであってると思ったけど、何か右から判定するのが合った気がしたので念のため調べてみました。次のような関数を作成して、この関数を条件にすれば、出力結果から左右どちらから…

2017-12-13

印刷用CSSのメモ

CSS Design

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>…

2017-11-24

iOS javascript clickイベントが効かないにはまる。

iOS JavaScript jQuery CSS Tips

レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。 Chromeの開発ツールでは意図したとおりに動作していたのですが、…

2017-11-21

CSS Fixedしたコンテンツでスクロールさせたい

CSS HTML5

モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .m…

2017-10-20

Stylus プロパティ名に変数を使って一緒に"(ダブルコーテーション)や半角スペースを出力したい

stylus CSS

例えばこんな感じのCSSを出力したくて [class^="icon-"], [class*=" icon-"] { font-family: 'webfont-icon' !important; ... } icon- の部分をを変数にしたい様な時。変数と一緒に"(ダブルコーテーション)や(半角スペース)を出力させるのが結構落とし穴で…

2017-07-07

IE11バグ display table, table-cell 内で max-width が効かない

CSS HTML Design IE-bug

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 …