任補転退’２１

　出勤すると、机の上にメモ用紙。

全英連参加者先生 　３月中の最終勤務日、校長室においでください。 　辞令をお渡しします。 校長

　タイトルについてはこちら。
　2006.07.21、「漢字４文字－続」
　2006.07.04、「漢字４文字」

できるといいなが、できました。

　かなり前からgooブログで「蛍光ペン」のような文字飾りができないか考えていました。
　CSSを使えばウェブサイトで実現できます。でも、ブログでの実現方法がわかりませんでした。思いついては調べるを繰り返して、なんとかできるようになりました。これまで数回記事でも使用しました。そろそろまとめをします。
　背景色の設定と違いがわかるように、フォントサイズを7（48px）にしました。こんな感じです。

　ピンク

　これを、通常の背景色と比べてみます。

　ピンク

　どうですか。

＋＋＋＋＋　＋＋＋＋＋

　一つ目はこのようにHTMLを書きます。（移植する場合、「＜」と「＞」はANKにして下さい。以下同じです。）

　＜span style="background: linear-gradient(transparent 0%, #ff99cc 100%); font-size: 48px;"＞ピンク＜/span＞

　transparent 0%は、文字上端から何％が透明（色なし）か決める部分。0%なので透明の部分はゼロ。
　#の後ろは色の指定。その後の100は色のついた部分の濃淡。0％は濃淡なし。100%は濃淡あり。

　文字の上端から下端まですべてにff99ccの背景色をつける。そしてその部分に濃淡をつける。

　二つ目はこのように書いています。

　＜span style="background-color: #ff99cc; font-size: 48px;"＞ピンク＜/span＞

　background-color:は文字の背景色
　#の後ろは色の指定。

　二つは同じ色ですが、印象が違うと思います。一つ目の透明の比率を変更すると、このようになります。線の濃淡はありません。

　60%　ピンク　上から60%が透明です。

　70%　ピンク　上から70%が透明です。

　80%　ピンク　上から80%が透明です。

　まだまだいろいろできそうなので、研究します。なお、このHTMLが再現できているのは、以下のブラウザです。
　Google Chrome
　　バージョン 89.0.4389.90
　Internet Explorer
　　バージョン 20H2（OSビルド 19042.867）
　Microsoft Edge
　　バージョン 89.0.774.54

　このHTMLはgooブログの正式サポート機能ではないかも知れません。実行する場合は自己責任でお願いします。