HTMLのタグに属性を書く時に先頭に来るのはidとclassどちらか気になったのでいろいろ見てみた。
<select>
が上手くいかないときは
設定したスタイルが無視されたら
-
{タグ}:first-child
は「{タグ}の最初の子要素」ではなく「最初の子要素」なので「最初の子要素が{タグ}だったら」ということになる -
<span>
にheight:
とvertical-align: middle;
を指定するときはdisplay: table-cell;
を添えないと無視される - スタイル(CSS)の適用される優先順位を知る - Qiita
- CSSでheight:100%を使う方法について。 | Ginpen.com
- CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう
- display:table-cell の親に display:table を指定しないと意味無い | *Web Design 覚え書き*
子要素が親要素からはみ出してしまった時
- widthを使っていたら
- positionを使っていたら
- floatを使っていたら
スマートフォンに対応したい時
スマホでデバックしたい!
tableをうまく設定できない時
- 行(tr)の高さ(height)を広げたいのにうまくいかない・・・
- CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary
何だこれって思ったら
SASSを使おうと思ったら
要素の位置を調整したい時
セレクタの書き方を忘れたら
長い文字列を改行したい
- テーブルのセル内で改行したいとき
- テーブルの列幅を設定しないといけません。
- URLがはみ出して困ったとき
- よく出てくるスタイル
- colgroupって何?って思ったら
- word-breakって何?って思ったら
- overflow-wrapって何?って思ったら
- word-wrapって何?って思ったら
- text-wrapって何?って思ったら
失敗事例 : とにかくうまくいかないとき
- 上位の要素に white-space: nowrap が設定されていました
- 折り返ししたい列で white-space: normal を設定してスタイルを上書きました。
- 連続した英字や数字が word-wrap: break-word で折り返されなかった・・・
- word-break: break-all にしたら折り返されました
はまりポイントです。
word-wrapプロパティは、text-wrapプロパティの値がnormal、または、suppressのときにだけ有効となります。