昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。
display:table
table-layout: fixed;で均等幅になる。%指定しなくていいかも。
また間隔を開けたいときは下記のように挿入
|
1 2 |
border-collapse: separate; /* セルの間隔を空ける */ border-spacing: 2px 0; /* |
背景を透明に
|
1 |
background-color: transparent; |
inputのfocus時の青を消す
|
1 |
outline:none; |
marginの相殺
垂直marginを指定した2つのブロックレベルの要素が並んだ時大きいほうが1つのmarginとしてみなされる。
[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック
対応策
marginを1方向にする。
要素をブロックレベル以外にする
上記方法で回避できない場合、paddingで対応する。
text-overflow
エリアの中に入っている文字がはみ出た時にどう対応するか。
|
1 2 3 |
overflow: hidden; //はみ出した文字を隠す white-space: nowrap; //改行させない text-overflow: ellipsis; //3点リーダーにする |
CSSではみ出した文字を省略する「text-overflow: ellipsis;」がいつの間にかPCでも使えるようになってた！
font-size
- px ・・ 絶対値の指定
- em ・・親要素に依存するため、親要素×font-size
- rem ・・ rootサイズのemつまりhtml要素のfont-sizeに掛け算をする
margin上下の%指定は横幅が基準
これはびっくりしました。marginに限らず%指定って親要素を基準にするものだとおもってましたが、marginとpaddingの上下の%はなんと横幅を指定するようです。
使いどころとしてはJSなしでスマホサイトの高さを横幅に合わせ動的に変えたい時でしょうか。paddingとかでコントロールできそうです。特に背景画像のみの部分はこれで回避できそう。
