要素の偶数個だけ、背景色変えたいとかで使える nth-child と nth-of-type <div> <h1>見出し</h1> <p>1つ目の段落</p> <p>2つ目の段落</p> </div> nth-child 親要素のn番目の要素に適応する p:nth-of-chile(2)の場合 親要素の2番目がPであれば、適応する 今回であれば、1つ目の段落 nth-child p…

実は各ブラウザには、デフォルトである程度CSSの設定がされている。 自分のデザインを当てていると、これが邪魔になる。 そこで出てくるのが - reset.css - normalize.css reset.css その名の通り 元の設定を限りなく消してしまう。 ネット上にいくらでも 既…

htmlでmain要素を使うと、ieでデザインがくずれるみたい css側で .main { display: block; } で、ブロックレベル要素として指定する

flexboxの時代だが、floatとclearfix floatの影響 floatを書けた要素の高さを親要素が認識できなくなる これにより、要素どうしがかぶったりする こんなとき <div class="main-body"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> .left { float: left; } .right{ float: right; } なので、余分な回り込みをなくす（clear）…

cssのフォントサイズ指定問題 レスポンシブとかでいろいろある % まんま 親要素のなん％やねん html{ font-size: 100%; /* 16px */ } div { font-size: 100%; /* 16px */ } div > a { font-size: 50%; /* 8px */ } em 親要素の何倍か フォントサイズ以外の指…

よくある width: 100%; padding: 10px; を子要素に適用して、親要素からはみ出てしまう現象 box-sizing : border-box; width: 100%; padding: 10px; box-sizing : border-box; で解決する。 だいたいこうやって、全部に適応するけど *, *::before, *::after …

よくある文章長過ぎるから折り返し、又は 3点リーダ...みたいにしたいやつ 今回は、3点リーダ text-overflow: ellipsis; だいたい p { overflow: hidden; /* スクロール防止 */ text-overflow: ellipsis; /* 見えなくなる手前で... にする*/ white-space: no…

css側でcount upする ランキングとかで使えるかな？ cssカウンタ やることは４つ - カウンタの値の名前を決める - カウンタの値を0に初期化 - カウンタの値を表示する - カウンタの値を増加させる ranking-num counter-reset: ranking-num; cntent: counter(…