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

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

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>

まとめ

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

郵便番号から自動的に住所入力させる

cakePHP3 + bootstrap5 プロジェクトで郵便番号入力から自動的に住所欄を入力できるようにしてみました。

ふだん、css/jsはバージョンによって動きが変わったりしないよう、サーバ上にコピーして利用するようにしてますが 市区町村合併などで郵便番号が変化する場合があるので、こちらはgithubのサイトを参照するようにしてます。

[slip.ctp]

≤?php

$this->Html->script("//yubinbango.github.io/yubinbango/yubinbango.js", ['block' => true]);

?>

≤div class="col-md-6 h-adr">
    ≤span class="p-country-name" style="display:none;">Japan≤/span>
    ≤table class="table_client_info as_bd_cl">
        ≤tr>
            ≤th>≤input type="button" class="form-control as_button" value="着住所">≤/th>
            ≤th style="text-align: right;">郵便番号≤/th>
            ≤td>
                ≤input type="text" class="form-control p-postal-code" placeholder="郵便番号を入力" />
            ≤/td>
        ≤/tr>
        ≤tr>
            ≤th>住所１≤/th>
            ≤td colspan="2">
                ≤input type="text" class="form-control p-region p-locality p-street-address" placeholder="住所を入力" />
            ≤/td>
        ≤/tr>
        ≤tr>
            ≤th>住所２≤/th>
            ≤td colspan="2">
                ≤input type="text" class="form-control p-extended-address" placeholder="建物名、部屋番号を入力" />
            ≤/td>
        ≤/tr>

cssクラス部分は、サイズとか罫線を設定してます。
いやー。しかし、こりゃ便利だｗ
めでたしめでたし。

【追記】
最近になって、郵便番号での住所入力が必要になって、自分のブログを参照にしてみたら、なかなか動いてくれなかった(笑)
原因は、class="h-adr" を付加してなかったからでした。
上記の例では上部の div タグに設定してますね。
ここ、忘れないようにしてくださいｗ

cakePHP3:javascript ３桁単位でカンマを表示する数字入力

cakePHP3.9 + bootstrap5 の環境で金額入力のために３桁単位で自動で数字を入力できるようにしようとしたんですね。

cleave.js ってのが便利そうだったので使ってみました。

参考
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
https://coliss.com/articles/build-websites/operation/javascript/format-input-text-content-cleave.html

cleave.js
https://github.com/nosir/cleave.js

上記のサイトなどを参考にして、次のようなコードを javascript に記述してました。
[project.js]

    var cleave = new Cleave('.input-decimal', {
      numeral: true,
      numeralThousandsGroupStyle: 'thousand'
    });

[project.css]

    .input-numeral {
        text-align: right;
    }

[slip.ctp]

    ≤div class="row">
        ≤h6 class="col-4 d-flex align-items-center">小計≤/h6>
        ≤div class="col-8">≤input type="text" class="form-control input-numeral input-decimal" value="10,000" />≤/div>
    ≤/div>
    ≤div class="row">
        ≤h6 class="col-4 d-flex align-items-center">消費税≤/h6>
        ≤div class="col-8">≤input type="text" class="form-control input-numeral input-decimal" value="1,000" />≤/div>
    ≤/div>
    ≤div class="row">
        ≤h6 class="col-4 d-flex align-items-center">合計≤/h6>
        ≤div class="col-8">≤input type="text" class="form-control input-numeral input-decimal" value="11,000" />≤/div>
    ≤/div>

困ったことに、数字入力のinputタグが複数あると、上手く動いてくれなかったんです。
chrome の開発者ツールでは、以下のようなメッセージが出てしまいました。

cleave.min.js:8 [cleave.js] Multiple input fields matched, cleave.js will only take the first one.

いやいや、伝票入力画面に数値入力が一か所しかないなんてありえないでしょ！
ということで調べた結果、javascript を次のように変更しました。

[project.js]

    $('.input-decimal').toArray().forEach(function(field){
      new Cleave(field, {
        numeral: true,
        numeralThousandsGroupStyle: 'thousand'
      });
    });

伝票用のフォーム画面では、金額入力フィールドを動的に追加できるようにしましたが、追加の都度 new Cleaveするようにして、ちゃんと動いてくれました。
めでたしめでたし。

A4横 CSS（スタイルシート） の landscape がうまく行かない

「A4横」左図の帳票レイアウトを作成して印刷しようとしたら、横幅が狭く表示されてうまく行きませんでした。

ＷＥＢサイトを検索すると、あちこちにこうすればできると書いてある。

ちなみに、bootstrap5 を使ってレイアウトしてます（帳票なのでレスポンシブは考慮してない）

@page {
    size: A4 landscape; 
    size: 297mm 210mm;
    margin: 0mm;
}

Ａ４横に、なるにはなるんだけど、コンテンツの横幅がどう見ても狭い。
Ａ４縦の時の横幅を超えない（程度の）横幅でしか印刷されない・・・・
なぜじゃ！？

いろいろ調べたり、調べてもらったりして bootstrap がまずいことがわかりました。
（Hさん、ご協力、ありがと。）

bootstrap の次の部分が影響してましたよ、と。

.container, .container-lg, .container-md, .container-sm{
 max-width: 960px;
}

以下のようにスタイルシートを追記すると、ちゃんとＡ４横で印刷されるようになりました。

@media print {
    .container {
         max-width: 297mm !important;
    }
}

めでたし、めでたし。

HTMLで炎に燃える文字

野球中継を見ていたら、バックスクリーンに炎に燃える文字が出てまして。

文字が燃えてるんじゃなくて、文字のフォント部分の背景が燃えてるんですね。

で、こいつをHTMLでできるんじゃないかとやってみたよ。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
<!--
.fireback
{
text-align: center;
line-height: 1.1;
font-size: 5em;
font-weight: bold;
display: inline-block;
margin: .45em;
padding: .5em .75em;
color: #fff;
background-color: #000;
background-image: url(./fire.gif);
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-->
</style>
</head>
<body>
<div class="fireback">
熱男<br>
</div>
</body>
</html>


ここから実際の表示を見ることができます。