Chrome のデベロッパーツールでサンプル CSS を編集してみる ― 習うのも良いが、慣れた方がもっと良い【検証】の話

【検証】の機能を理解したければ、何でも良いからとにかく使ってみるのが早道だ ―― WordPress での実例。

今回はスタイルシート(CSS)のスタイルの、特にプロパティの編集について説明するが、サンプルとして簡単な  div 要素のレイアウトと、その表示をコントロールする CSS を用意したので、【検証】を使って色々遊んでみて頂きたい。

ブラウザの幅を縮小していくと、このサイトの 2 個のサイドバーの表示状態に同期してサンプルのレイアウトも変化する。これは、このサイトで実際に使っている Twenty Fourteen の style.css の子クラス、custom-style.css の動作を簡単にシミュレートした動きだ。

ただし、このシミュレーションは PC でしか確認できない。モバイルデバイスでは、残念だが画面変化は見られない。
…このページを読む