Chrome の開発ツール【検証】を使ったテストの内容などの報告です。
久しぶりに DevTools を使う機会があったので、ついでに Local Overrides をチェックしてみたら、Chrome DevTools の Local Overrides の仕様がまたしても変更されていた。より洗練されて使い易くなったというのなら別に何も言うことはないが、逆方向に進んでいるとなれば、少し文句を言いたくなるのは仕方ないのでないだろうか。
この記事を書いている時点で、レギュラー版 Chrome DevTools のバージョンは 71.0.3578.98 で、Canary の方は 73.0.3655.0 となっている。
しかし、今年のエントリーは Chrome Canary DevTools の Local Overrides の記事で始まったのだが、まさか今年の締めも同じ題材の記事になるとは思わなかった。…このページを読む
タイトルを以前の記事【Mapping に代わるネットワークリソースの永続化機能 ― Chrome Canary DevTools のローカルオーバーライドを使用可能にする】（参考記事）とほぼ同じにしたのには、もちろんそれなりの理由がある。
今この記事を書いている時点（2018年 2月28日）で、通常版（ノーマル） Chrome DevTools が参考記事を書いた時と同じ状態になっていることが分かったからだ。
注意：（2018/03/09）
今日確認したところ、通常版の Chrome のバージョン 65 ではローカルオーバライドを使用可能にするために、特別な設定を実行する必要はなくなったことが分かった。つまり、この記事の内容はすべて昔話になったということだ。
Chrome Canary の時はかなり時間がかかったが、今回はかなり素早くアップグレードを完了したようだ。
12月に入ってから、Chrome Canary DevTools の Local Overrides（ローカルオーバーライド）の仕様変更とノーマル版 Chrome の Mapping（マッピング）の廃止という、それなりの頻度で DevTools を使っている私にとってあまり有難くないイベントのコンボが発生した。
この記事では、マッピングに代わる Chrome Canary DevTools の新しい機能ローカルオーバーライドについて、具体的な応用例を交えて説明するが、この機能を利用するためには、Chrome Canary と DevTools の両方で幾つかの項目を設定することが必要になった。両方で ―― ということは、Chrome Canary のインストールが必須になったということだ。
そのあたりの事情と設定については、前回の記事【Mapping に代わるネットワークリソースの永続化機能 ― Chrome Canary DevTools の Local Overrides を使用可能にする】にまとめておいたので、そんなの知らなかったというあなたは、そちらを先に読んで頂きたい。
それと、この記事の説明とテストが WordPressサイト上の実例・応用例になっているのは、私が WordPress ウェブサイトしか持っていないからだ。なので、以下の説明は WordPress 以外のプラットフォームでは実情と合わない可能性があるが、たいていのことはひと工夫すれば何とかなる。…このページを読む
注意 !!
今日（2018年 1月20日） 確認したところ、Sources パネルに Local Overrides タブがデフォルトで表示されるようになっている。
なので、以下の内容はすべて昔話になった。ただし Chrome Canary では思いがけないことが結構頻繁（ひんぱん）に起きるので、油断はできない。
11月 7日付けの前回の記事で、Chrome Canary DevTools の新機能 Local Overrides（ローカルオーバーライド）を紹介したが、12月 5日付けの注意事項として、その新機能が使えなくなっていることを追加報告した（※）。
その時点では ノーマル版の Chrome の Mapping（マッピング）が使用できていたが、今日（12月27日）チェックしてみると、Chrome Ver 63.0.3239.108 では既にそれも使用不可になっていた。マッピングの舞台となる Workspace は Network タブから Filesystem タブに移動し、マッピング自体はすべて無効になった。この状況はバグレポート 774823 で報告した内容とまったく同じだ。
つまり従来のマッピングを活用していた人は、今後は local host 上に開発用ウェブサイトを構築して Filesystem タブを利用するか、または Chrome Canary DevTools のローカルオーバーライド機能が利用可能になるのを待つかの、二者択一を迫られることになったということだ。…このページを読む
始めに：
追記：（2017/12/28）
ここで紹介する Local Overrides をめぐる状況は 12月に入ってから色々と変わっている。概略は「Mapping に代わるネットワークリソースの永続化機能」を参考にして頂きたい。
この記事は前回の続きだ。
ただし引く継ぐのはバグレポートの件で、ここでは chromium のコメンテータから代替案として示された Google Chrome Canary（Chrome Canary）の DevTools の Local Overrides（ローカルオーバーライド）機能について説明する。
バグレポートで「今まで使っていたマッピングが使えなくなった」ということを報告した訳だが ―― バグとしては認められたようだ ―― それを提出しなかったら、 ローカルオーバーライドの使い方を独力で突き止めるのに、もっと長い時間がかかっただろう。
それどころか、まともに取り組まなかった可能性すらある（注1）。ちょと文法的にアレな英文レポートを一個提出しただけなのに、その見返りは思っていた以上に価値のあるものになった。…このページを読む
はじめに：
注意！
ここで説明している Chrome DevTools のマッピング機能は 2017年12月に削除されたため、local host 上のウェブサイトを Filesystem タブ上で開発する場合を除いて、この記事の内容はほとんど無効になった。
マッピングに代わる Local Overrides（ローカルオーバーライド）機能が、Chrome Canary DevTools にインプリメントされている。
外部サーバー上のウェブサイトを開発する場合は、Overrides タブ上でこの機能を使うと良い。ローカルオーバーライドの設定と使い方については、次の記事を参考にして頂きたい。
追記：（2018/03/08）
参考記事リストの末尾の記事は 2018年 2月28日の投稿だ。
この中で通常版の Chrome DevTools でもローカルオーバーライドが使用可能になったことを報告しているが、今のところリストの先頭の記事に書いてある設定が必要条件になっている。これもいずれアップデートにより変わるものと予測しているが、今はとりあえずその設定を参考にして頂きたい。
参考記事：
最近ちょっと理由があって、固定ページのレイアウトを『Twenty Fourteen を使って Twenty Sixteen ライクに』する計画を立てていた。
で、この記事を書きながら、そちらの方を ―― マッピング活用の実地研修を兼ねて ―― 色々いじっていたら、思いのほか短時間でテスト運用ができるまで仕上がってしまった。
今は、そのスタイルを【VST プラグイン関連のメモ帳】の 3 本のページに適用して様子を見ている。サブタイトルには、その時に、複数の CSS を処理しようとして混乱してしまった自分自身への反省の意が込められている。…このページを読む
注意！
ここで説明している Chrome DevTools のマッピング機能は 2017年12月に廃止されたため、この記事の内容は全面的に無効になった。
マッピングに代わる Local Overrides（ローカルオーバーライド）機能が、Chrome Canary DevTools にインプリメントされている。この機能の使い方については下のリンクを参考にして頂きたい。
ただ、Chrome Canary では今後何が起きるかわからないので、私自身は今でもこの記事の設定を継続している。
参考記事：
去年の 4月 11日の記事「Chrome のデベロッパーツールでサンプル CSS を・・・以下省略」の追記（今年 5月 28日付け）で、通常の Chrome では実行できなくなったサーバーとクライアント側（local）の CSS ファイルのマッピングは、 Google Chrome Canary では実行可能である云々・・・と書いた。
ところがだ・・・その追記からひと月も経たないうちに、Chrome Canary でもマッピングができない事案が発生していたので、とても驚いた。
この問題はこれから説明する解決方法で片付いたのだが、思いがけない付録まで付いてきた。どういう訳か、通常の Google Chrome でも再びマッピングができるようになっていたのだ！いったい何が起きているのだろう・・・？
これは WordPress のテーマ Twenty Fourteen の子テーマを作ろうと思い立った時の話だ。…このページを読む
この章では、第 1 章で作ったクラス型スタイルを利用して、アクション疑似クラス型スタイル（アクション疑似クラス）を作ってみる。
応用例では、div 要素のアコーディオン的な【展開/折り畳み】を、WordPress では順必須の簡単なショートコードと、幾つかのスタイルを組み合わせることで実現している。
そのサンプルコード中では、クラス型、ID 型、要素型の各スタイルをあえて混在させてあるので、そこをいじると動作がどう変わるのか ―― または変わらないのか、ということを各位ご自分で試してみて頂きたい。…このページを読む
前回は、習うより慣れた方が速い・・・という趣旨で書いた。その方向性は今後も変わらない。
特に、これから CSS に取り組みたいと考えている人には『解説なんか読む前に、ひたすら【検証】をいじり倒してみる』というやり方を強くお勧めする 。
画面の収拾がつかなくなったら、画面更新ですべてをマッサラに戻して、またチャレンジすれば良いのだ ―― ということで、今回は新しいスタイルの作成にチャレンジする。…このページを読む
今回はスタイルシート（CSS）のスタイルの、特にプロパティの編集について説明するが、サンプルとして簡単な div 要素のレイアウトと、その表示をコントロールする CSS を用意したので、【検証】を使って色々遊んでみて頂きたい。
ブラウザの幅を縮小していくと、このサイトの 2 個のサイドバーの表示状態に同期してサンプルのレイアウトも変化する。これは、このサイトで実際に使っている Twenty Fourteen の style.css の子クラス、custom-style.css の動作を簡単にシミュレートした動きだ。
ただし、このシミュレーションは PC でしか確認できない。モバイルデバイスでは、残念だが画面変化は見られない。
…このページを読む