コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSS

CSSにてスタイルシート内だけで値を数式で割り当てるcalcの使い方

CSS

逆引きのことばを言い換えて記事として残そうシリーズ 出典元 calc() - CSS: カスケーディングスタイルシート | MDN MDNには詳細な記述はないが、InternetExplorer9も部分対応している 記述例 全体の幅よりも20px小さくしたい場合 width: calc(100% - 20px);…

FLOCSSではJavaScript由来の状態を司るのに is-* プレフィックスを使うと良さそう

CSS

ここだけコンセプト説明が手薄なので補ってみる 出典 Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというよう…

CSSの!importantはなるべく使わないためには

CSS

案外、これに関して言及しているところがないので書いてみる CSSの!importantとは CSSの反映されるものを決める 詳細度 という概念があるが、そこで決まる順番とは関係なく設定できる記述 例 cssは後勝ちなので、後の記述のほうが優先されるが、以下の例の場…

FLOCSSのレイヤを表に簡単にまとめる

CSS

一覧でドーンみたいのがほしかったので 分類表 レイヤーの分類 大きく「Foundation」「Layout」「Object」のレイヤーに別れ Objectは3つの種類がある。 分類 粒度感 主な例/パーツ 接頭辞 Foundation ブラウザ全体にかかる打ち消し用や修正の部分 reset.css …

cssのfont-size 100%を最上段のhtmlタグに対してセットするとブラウザの種類や状態によって変わってくれる

あー、そうやって相対値をはじき出すほうほうもあるんだ。というメモ 情報の出元 パーセンテージ指定でフォントサイズを指定しておくと、ブラウザのデフォルトのフォントサイズ(通常は 16px = 12pt)や、ユーザが設定したフォントサイズが正しく反映されて…

BEMとMindBEMdingの命名規則の違い

BEMを元にした考え方がMindBEMdingなんですが、地味に命名規則というかModifireの使い方が違うのでメモ 比較元 BEM Quick start / Methodology / BEM MindBEMding MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS Architecture, We…