Style Custom

Styleを確認するためのブログ

コード：折り返しとコピーボタン 

サンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコード

テキストエリア（コピー確認用）

■ 

const codeElements=document.querySelectorAll('pre.code');codeElements.forEach((codeElement)=>{const codeContainer=document.createElement('div');codeContainer.className='code-box';const copyButton=document.createElement('button');copyButton.className='code-copy-btn';copyButton.textContent='Copy';codeElement.parentNode.insertBefore(codeContainer,codeElement);codeContainer.appendChild(codeElement);codeContainer.appendChild(copyButton)});

■ 

document.addEventListener("DOMContentLoaded", function() {
    var preElements = document.querySelectorAll(".code-box pre");

    preElements.forEach(function(preElement) {
        var hasHorizontalScrollbar = preElement.scrollWidth > preElement.clientWidth;

        if (hasHorizontalScrollbar) {
            var codeWrapDiv = document.createElement("div");
            codeWrapDiv.className = "code-box";
            codeWrapDiv.innerHTML = '<a href="javascript:void(0)" style="display: flex; align-items: center;">［<span class="hatena-icon">テキストを折り返す</span>］</a>';
            preElement.parentNode.insertBefore(codeWrapDiv, preElement.parentNode.firstChild);

            var linkElement = codeWrapDiv.querySelector("a");

            codeWrapDiv.addEventListener("click", function() {
                if (preElement.style.overflowX === "auto") {
                    preElement.style.overflowX = "visible";
                    preElement.style.whiteSpace = "pre";
                    linkElement.innerHTML = '［<span class="hatena-icon">テキストを折り返す</span>］';
                } else {
                    preElement.style.overflowX = "auto";
                    preElement.style.whiteSpace = "pre-wrap";
                    linkElement.innerHTML = '［<span class="hatena-icon">横スクロールバーを表示</span>］';
                }
                return false;
            });
        }
    });
});

image-set() test (AVIF、WebP、GIF)

ochakuma

失敗すると、変換されない文字があったりします。。

<p class="l-fuki ochakuma">
失敗すると、変換されない文字があったりします。。</p>

チャイルドプレイ

チャイルドプレイ（最新版）を

観てきました。昔のチャッキーの様な

ニヤリ顔、、、ではなく、もっと

ニカッとした顔のチャッキーでした。。

相手の坊ちゃんはもちろん、アンディ。

ニカり顔のチャッキーは、現代らしく

AI人工知能を持ち、アレクサみたいに

テレビをつけてくれたり。。

とにかく賢い。賢いので、人の言葉にも

反応して行動します。素晴らしい人形だあ。

でも、だからこそ、豹変した

チャッキーは怖い！ワルです。ワル。

相変わらずのワル。

昔のチャッキーも、執念深く怖いけど

現代チャッキーは、テクノロジーを駆使してくる怖さありです。

やだなー、こんな人形いたら。

この先こんな人形が暴走する日もくるのかも？

 

アレクサだって、キレたらわからないぞ。笑

アレクサ、エアコン付けて。

ハイ。（ゴゴゴー🔥🔥）

部屋の温度、ガンガン上げてくるかもね。笑

 

個人的には、昔の執念深い、追い詰めてくるチャッキーが好きだけど、

新しいチャッキーは、現代っ子にはウケるかもしれません！

結果的に楽しかったでーす(^^)(^^)えへへへ。

以上でーす！