HTMLでのオブジェクトの表示とインデントの方法

<pre>
{
"name": "John Doe",
"age": 30,
"email": "[email protected]"
}
</pre>

<pre>タグは、テキストをそのまま表示するために使用されます。ここでは、オブジェクトを囲む<pre>タグを使用して、インデントを保持したままオブジェクトを表示しています。

CSSを使用する方法:

<style>
pre {
    white-space: pre-wrap;
    font-family: monospace;
    padding: 10px;
    background-color: #f0f0f0;
}
</style>
<pre>
{
"name": "John Doe",
"age": 30,
"email": "[email protected]"
}
</pre>

この方法では、CSSを使用して<pre>要素のスタイルを指定しています。white-space: pre-wrap;は改行を保持し、font-family: monospace;は等幅フォントを使用します。paddingとbackground-colorは、オブジェクトを囲む要素の余白と背景色を指定します。

<code>
{
"name": "John Doe",
"age": 30,
"email": "[email protected]"
}
</code>

<code>タグは、インラインのコード要素を表示するために使用されます。ここでは、オブジェクトを囲む<code>タグを使用して、インデントを保ったままオブジェクトを表示しています。

これらはいくつかの方法ですが、HTMLでオブジェクトを表示し、適切なインデントを設定するための一般的な手法です。必要に応じて、スタイルや要素をカスタマイズすることもできます。