W3.CSS コード

❮ 前章へ 次章へ ❯

例の表示

w3-example クラスは、灰色のコンテナの中に例を表示するように設計されています:

Try It Yourself ❯


コードの表示

w3-code クラスは、コード表示用に設計されています。

これは、コードを読み易くするために固定幅のフォントで表示します。

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";

Try It Yourself ❯


コードの着色

W3Schools は、コードの着色用の JavaScript ライブラリを提供しています。

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";

ここからライブラリをダウンロードすることができます: http://www.w3schools.com/lib/w3codecolor.js


JavaScript の表示

JavaScript コードをハイライトするために、w3-code と共に jsHigh クラスを使用します。

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Try It Yourself ❯

HTML の表示

HTML コードをハイライトするために、w3-code と共に htmlHigh を使用します。

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Try It Yourself ❯

CSS の表示

CSS コードをハイライトするために、w3-code と共に cssHigh を使用します。

<div class="w3-code cssHigh">

.. CSS code here

</div>
Try It Yourself ❯

Codespan

w3-codespan クラスは、ピンク色の背景色で「インライン・コード」をハイライトするのに使用します。
(訳注:説明と結果が合わない!背景色が灰色で、文字が色が赤になっています。)

<code class="w3-codespan">somecode</code>
Try It Yourself ❯

❮ 前章へ 次章へ ❯