別冊webメモ

自分用リファレンス&アウトプット

css

remでフォントサイズ指定

css

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

モダンブラウザ用のclearfix 

css

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

サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む

css

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

テキストをドラッグ(反転)したときの背景色を変える

css

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

[iPhone]safariでボタンの角丸とグラデのスタイルを指定したい

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

CSS3のグラデーションを無効化するには

css

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

font-size:13pxのときの、相対フォント%リスト

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