コードセクション

コードブロック

コードブロックのコンポーネントにはsu-code-blockのクラス名を付与します。

pre要素とcode要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字のスタイルや背景の塗りが加わります。
※プログラムコードに対してのシンタックスハイライトは適用されません、必要に応じて外部ライブラリを導入してください。
※コーディング環境に合わせて適宜特殊文字などにエスケープさせてください。

複数行にわたるコードとして表示するテキストです。本文テキストとは異なるコードであることが明示できるようスタイリングされ、他のセクションとは独立したブロックセクションとして表示されます。

<div class="*****">
  <p class="*****">コードブロック内のテキスト</p>
</div>

p {
  font-size: 1.5em;
}

<pre class="su-code-block">
  <code aria-label="HTMLとCSSのサンプルコード">
&lt;div class="*****"&gt;
  &lt;p class="*****"&gt;コードブロック内のテキスト&lt;/p&gt;
&lt;/div&gt;

p &lbrace;
  font-size: 1.5em;
&rbrace;
  </code>
</pre>

コードブロックコンポーネントの背景色、境界線、文字色はCSS変数を使って変更することが可能です。

.su-code-block {
  --su-color-bg-code-block: red;
  --su-color-border-code-block: black;
  --su-color-text-code-block: white;
}

コードインラインテキスト

コードインラインテキスト用テキストのコンポーネントにはsu-code-inlineのクラス名を付与します。

code要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字のスタイルや背景の塗りが加わります。
※プログラムコードに対してのシンタックスハイライトは適用されません、必要に応じて外部ライブラリを導入してください。
※コーディング環境に合わせて適宜特殊文字などにエスケープさせてください。

文書の行内に短いコードとして表示するテキストです。本文とは異なる引用されたテキストであることが明示できるようスタイリングされ、インラインセクションとして表示されます。

<code class="su-code-inline">&lt;p style="font-size: 1.5em"&gt;インラインコード内のテキスト&lt;/p&gt;</code>

コードインラインテキストの背景色、境界線、文字色はCSS変数を使って変更することが可能です。

.su-code-inline {
  --su-color-bg-code-inline: red;
  --su-color-border-code-inline: black;
  --su-color-text-code-inline: white;
}

アクセシビリティの支援

コードブロック、コードインラインテキストはアクセシビリティの対応として、code要素に対してaria-label属性やaria-describedby属性を使ってコードの説明を追加することで、スクリーンリーダー使用時にも適切にコードの内容を伝えることができます。

<pre class="su-code-block">
  <code aria-label="HTMLとCSSのサンプルコード">
&lt;div class="*****"&gt;
  &lt;p class="*****"&gt;コードブロック内のテキスト&lt;/p&gt;
&lt;/div&gt;

p &lbrace;
  font-size: 1.5em;
&rbrace;
  </code>
</pre>

...

<!-- コード説明用の隠し要素 -->
<p id="code-description" style="visually: hidden; position: absolute; overflow: hidden;">
  このインラインコードはHTMLのpタグで、フォントサイズを1.5emに指定しています。
</p>
<code class="su-code-inline" aria-describedby="code-description" data-lang="html">
  &lt;p style="font-size: 1.5em"&gt;インラインコード内のテキスト&lt;/p&gt;
</code>