3年ぶりにコーディングしたら、設定から記述の仕方まで、いろいろ忘れていたのでググりながら書きました。

CSS3から新しく追加された「rem (root em)」という単位で、フォントサイズを指定するのが便利です。 rem使用のメリット 従来の%やemは、親要素を基準にサイズが計算されます。なので、入れ子にすると親要素の影響をうけて、サイズが分かりづらくなってしまい…

floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。 .clearfix:after { content: ""; display: block; clear: both; } コレを書いて、.clearfixをf…

ChromeやSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。 ただし、それぞれの値は異なるので、ブラウザごとに余白な…

文章をドラッグ（反転？ハイライト？）したときの色はcssで変更できます。 背景色と文字色を設定すれば、ガラッと雰囲気がかわりますね。 ::selection { background:#eeff44; color: #009940; } ::-moz-selection { background:#eeff44; color: #009940; } …

ブラウザなどで見ると大丈夫なのに、iPhone実機で確認すると ボタンの角丸と色のスタイルがあたってない事案が発生。 iPhone Safariの仕様だった iPhone Safariのinputのsubmitボタン要素には 角丸とグラデーションが自動的に適用される、のだそうです。 解…

cssでグラデがかかっている要素を、cssで打ち消すには 元が CSS の linear-gradient() 関数は、色の線形グラデーションを表す <画像> を作ります。この関数の結果は CSS の <グラデーション> データ型のオブジェクトになります。 ということなので背景画像を…

よく使うけど、確認しないと覚えてないリスト。 基準文字サイズは13pxで指定しています。 body { font-size: 13px; } cssにコメントでメモしておくと便利。 /* Font-size list (base: 13px) 62% = 8px 70% = 9px 77% = 10px 85% = 11px 162% = 21px 239% = 3…