HTMLのopen属性とは？details要素の使い方とサンプルコード解説
HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。
構文
open属性の基本的な構文は以下のとおりです。
<details open></details>
open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初めて内容が表示されます。
open属性の使用例
以下に、HTMLのopen属性を使用した具体的なサンプルコードを示します。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML open属性のデモ</h1>
<details open>
<summary>こんにちは！私はsummary要素です</summary>
<p>こんにちは！ダミーテキストを含む段落要素です</p>
</details>
</body>
</html>
表示結果
上記のコードをブラウザで実行すると、details要素にopen属性が指定されているため、ページを開いた時点でsummary要素と段落の内容が両方とも表示されます。ユーザーはその後、summary要素をクリックすることで、内容の表示・非表示を自由に切り替えることができます。
補足：JavaScriptによるopen属性の操作
open属性はJavaScriptからも動的に制御できます。details要素のopenプロパティにtrueまたはfalseを代入することで、開閉状態をプログラムから切り替えられます。また、開閉が切り替わったタイミングではtoggleイベントが発生するため、アコーディオンメニューなどインタラクティブなUIの実装にも活用できます。
-
HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説
wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。
-
HTMLのdraggable属性とは？使い方とサンプルコードを解説
HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以