JavaScriptを使用せずにcontenteditable要素のプレースホルダーをサポートする方法

::before疑似要素を使用する方法: CSSの::before疑似要素を使用して、contenteditable要素の前にプレースホルダーを表示することができます。以下は例です。

<style>
    [contenteditable="true"]:empty::before {
        content: "プレースホルダーテキスト";
        color: gray;
    }
</style>
<div contenteditable="true"></div>

この方法では、contenteditable要素が空の場合にのみプレースホルダーが表示されます。

data-属性を使用する方法: contenteditable要素にカスタムのdata-属性を追加し、CSSを使用してその属性を利用する方法もあります。以下は例です。

<style>
    [contenteditable="true"][data-placeholder]:empty::before {
        content: attr(data-placeholder);
        color: gray;
    }
</style>
<div contenteditable="true" data-placeholder="プレースホルダーテキスト"></div>

この方法では、contenteditable要素が空の場合にのみdata-placeholder属性の値がプレースホルダーとして表示されます。

hidden属性を使用する方法: hidden属性を使用してプレースホルダー要素を非表示にし、contenteditable要素が空の場合にのみhidden属性を解除する方法もあります。以下は例です。

<style>
    .placeholder {
        color: gray;
    }
    .placeholder[hidden] {
        display: none;
    }
</style>
<div>
    <div class="placeholder" hidden>プレースホルダーテキスト</div>
    <div contenteditable="true" oninput="this.previousElementSibling.hidden = !this.textContent.trim()"></div>
</div>

この方法では、contenteditable要素が空でない場合にプレースホルダー要素が非表示になります。

これらの方法を使用すると、JavaScriptを使用せずにcontenteditable要素のプレースホルダーを実装することができます。それぞれの方法には利点と制約がありますので、使用する状況に応じて適切な方法を選択してください。