Chromeのデベロッパーツールを使ってCSSのデバッグをする
ページ分割すべきかなMijikko.icon
よくわからないので分けてないない
あと何か書いたほうがいいものってあったかな？Mijikko.icon
助かりそうなページyosider.icon
https://gyazo.com/2bad1fcb4072cd13ddc85293780d2a0b
左上のhttps://gyazo.com/732dbf6db928dace000f1fbf84761191を押すことで要素を直接選択できるようになる
https://gyazo.com/5be7dc411b2688367496b27bd4e1f825
クリックするとデベロッパーツールの要素タブでハイライトされる
CSSのチェックをする時にはよく使う
DOM要素を選択すると右(または下)のスタイルタブにCSSが表示される
https://gyazo.com/a6d93f1a9afd89ab7120fc75f4ac84a3
適用されていないプロパティは取り消し線が引かれている
直接書き換えることもできる
https://gyazo.com/2772ba5aae83fb84732ae7495aa137e7
https://gyazo.com/64129ca47133fdf708c9b59928226e09
「計算済み」タブを開く
https://gyazo.com/8f47bc93723c4368c175cb9de2411da9
実際に計算された値がずらっと表示される
CSSソースのどこに記述したプロパティが反映されているのかも確認できる
https://gyazo.com/1a69587c3e0406390bd1ae7d1afd921b
右側のcssへのリンクをクリックすると「ソース」タブにてソースの該当箇所が表示される
デフォルトで設定されている値も確認できる
想定通りの表示にならない時は見てみるといいかもMijikko.icon
上の方には要素の位置(や大きさ)を決めているプロパティの値が図で表示されている
https://gyazo.com/5eaf33ee4e85c6a7bfaa91b59093c8f2