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

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

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

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

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

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

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

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

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

scss-lint に QualifyingElement といわれた。

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

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

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

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

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

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

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

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

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

Sass (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;…

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

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 アニメーションのメモ

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

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

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

IE HTMLのIE分岐の条件付きコメント <!-- [if IE] -->が効かなくなってた。

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

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

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

PHP if文の条件の判定順

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

印刷用CSSのメモ

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

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

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

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

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

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

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 …

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

コーディングをしていて IE で崩れていると連絡を受けてしまいました。 IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。 マイクロソフトを信じたのが間違いだった... 発生…

IEバグ inline-block 内の要素に max-width が効かないにハマる

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。 月部分以外が透過になっている三日月をCSSで描…

CSSで三日月を描く

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート…

CSSで文字にボーダー(縁取り)をつけたい。

所謂Bootstrapの.row・.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。 横ス…

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。 flex サポート状況 なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロ…

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。 しかし、色のバリエーションがある時に $primary = #158cba $primary-dark = #127ba3 $success = #28b62c $…

Stylus Objectでらくちんカラー管理したい

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。 Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。 NGな例 変数名のまま出力される $posX = 100 .myClass back…

Stylus 変数の計算で不等号を変更するときのメモ。

CSS animation でアニメーション完了後にアニメーションの最後の状態で止まってほしい時のメモ animation-fill-mode プロパティを forwards にする。 .box { animation: my-anime 5s ease -webkit-animation-fill-mode: forwards; animation-fill-mode: forw…

CSS Animation アニメーション完了後にアニメーションの最後の状態のままで止めたい