スタイルシートに指定している色で表示されない

Color picker で異なる色が表示される

WEBページの設計では、色にこだわるケースが多いですね。
顧客から指定された色でデザインをしていたんですが、おかしな現象がでました。
スタイルシートに指定している色で、表示されないのです。

コードでは次のように指定しています。

--color-main-bg: rgb(3, 180, 198);

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    padding: 1rem;
    margin: 0 auto;
    background-color: var(--color-main-bg);
}

Chrome color picker で別の色が表示される

Chrome で表示させて、開発者ツールを開くと、図のようにちゃんとコーディングした内容が反映されています。

ところが、Chromeの拡張機能の Color Picker で表示されている部分を調べると

おいおい、どーして色が違うんだよ・・・
おれさまのコードのどこに問題があるって言うんだよ～・・・
使ってる bootstrap とか normalize とか milligram なんかが悪さしてるのかな～・・・
と、必死にデバッグするも、問題点が見つからない・・・・

マルチディスプレイ

ディスプレイを２つ並べて開発してるんですが、表示してるページをもう一方のディスプレイにスライドすると・・・
あら不思議。ちゃんと指定された色で表示されちゃいます。

いったい、どういうことヨ？
どうやら、ディスプレイがおかしいのだということで、調べてみたよ。

画面の色調整

コントロールパネルに「色の管理」というのがありまして。
「詳細設定」－「ディスプレイの調整」というボタンがありました。
ぽちっ！

なんだかわからないけど、とりあえず、「次へ」ボタンで進めていきます

まとめ

するってえと、見た目も Color Picker でもちゃんと表示されるようになりましたよ！

いやあ、てっきり自分のプログラムが悪いんだろうと、とっても長い時間悩みましたよ
ほんと、こーゆーの勘弁してほしいですわ。
ま、なおってくれたので良しとしましょう。
めでたしめでたし。

c.f.
https://support.hp.com/jp-ja/document/c04249810

SQLiteを使ったプログラムで Out of memory 例外が発生する

メモリいっぱいあるのに、Out of memory

C# で開発したファイル処理プログラム。
SQLite を使ってインデックスを貼り高速検索するようにしてます。
SQLite の便利な機能に、データベースをメモリ内で処理させるってのがあります。

   SqlConnectionSb = new SQLiteConnectionStringBuilder { DataSource = ":memory:" };
   SqlConnection = new SQLiteConnection(SqlConnectionSb.ToString());
  

こうすることで、オンメモリ処理になり、さくさく動くようになります。
DataSource をハードディスク上のファイルに置き換えることもできますが、それだと遅くて使い物にならないような機能のプログラムなんです。
このプログラムにちょっとばかり大きなファイルを処理させると、途中で Out of memory 例外でエラーになって落ちてしまう問題が出ました。
どーして？
タスクマネージャで見ててもメモリの空き容量は十分にあるのに。
そんな、ばなな。

キャッシュを大きくしてみたり

SQLite out of memory で検索しても、どういうわけかなにもヒットするページがありません。
しかたなく接続時のパラメータを変更してみたり。

SqlConnectionSb = new SQLiteConnectionStringBuilder { DataSource = ":memory:", CacheSize = 10000 };

PageSize とか MaxPageCount といったパラメータも変更してみたけど、効果なし・・・困りました。

32ビットを選ぶ？

Visual Studio のプロジェクトは「AnyCPU」としていて、32bitでも64bitでも動作するようにしてるつもりだったけど。
プロジェクトプロパティ「ビルド」の項目に、「✅32ビットを選ぶ」ってのがありました。

なんじゃ、こりゃあ？ってなくらい、知りませんでしたよ。(笑)
このオプションのせいで、AnyCPU が 32bit プロセスとしてビルドされてしまうわけです。
これまでリリースしてたプロダクト、全部再確認が必要になりましたよｗ

上記チェックボックスをOFFにして、64bitOSで動作させたら、Out of memory例外は出なくなりました。
あ、プロジェクトプロパティは Debug と Release の両方の構成を変えなきゃならないから、注意してくださいまし。

今回の問題は、問題を再現するのにもトライアンドエラーするのにも１時間以上かかるので、大変でした。

ま、解決できてよかった。
めでたしめでたし。

bootstrap（v5） でブレークポイントが正しく表示されない

スマホサイズで改行されてしまう！

bootstrapでデザイン中に、スマホサイズでrow の col が12以内なのに改行されてしまう問題に遭遇しました。

<div class="container-fluid">
    <div class="row">
        <div class="col-6 col-sm-4 col-lg-2">
          ll
        </div>
        <div class="d-none d-sm-block col-sm-4 col-lg-4">
          lr
        </div>
        <div class="d-none d-lg-block col-lg-4">
          rl
        </div>
        <div class="col-6 col-sm-4 col-lg-2">
          rr
        </div>
    </div>
</div>

これ実行すると、スマホサイズの時、ll と rr 部分が改行されて出力されてしまいます。
なぜじゃあ？

解決方法

row の部分を次のように変更することで、無事行内に収まるようになりました。

<div class="container-fluid">
    <div class="d-inline-flex w-100 justify-content-between">
        <div class="col-6 col-sm-4 col-lg-2">
          ll
        </div>
        <div class="d-none d-sm-block col-sm-4 col-lg-4">
          lr
        </div>
        <div class="d-none d-lg-block col-lg-4">
          rl
        </div>
        <div class="col-6 col-sm-4 col-lg-2">
          rr
        </div>
    </div>
</div>

まとめ

けっこう格闘してしまった
動いたから、よし！
めでたしめでたし。