本記事では解説記事を書く上で留意すべき点をまとめたガイドラインです。
記事を書く前にご一読ください。

こちらで紹介するタグについては、CSSライブラリであるBootstrapの機能の一部になります。
詳細は「Bootstrap 4.5 日本語マニュアル」を併せてご参照ください。

文章の記述

文章を書く上では「見やすさ」「分かりやすさ」を心がけてください。

タイトル（h）

タイトルは<h1>から<h6>まで使えますが、大きさによってスタイルが異なります。
大見出しに<h3>、小見出しに<h4>、さらに小さな見出しとして<h5>あるいは<h6>を使用してください。

解説記事の書き方 h1

解説記事の書き方 h2

解説記事の書き方 h3

解説記事の書き方 h4

解説記事の書き方 h5

解説記事の書き方 h6

文字の強調

特定の単語や文章を強調する場合、一般的なHTML同様に<strong>を使うことでボールドによる強調表示を行います。また、<mark>を使うことで一部のテキストをより目立つように強調表示することもできます。使い分けに関する規定などはありません。

背景色の変更

特筆すべき解説や、横道に逸れたコラム的な文章を書く場合など、背景色を暗くすることで記事にメリハリを付けることができます。
以下の例を実現するには、<div class="p-3 mb-4 bg-dark">を使います。

見出しや罫線を使うこともできます。

スクリプト表示

コードブロック

スクリプトをコードブロックとして表示させるには<pre>と<code>を併せて使います。
インラインで文中にコードを差し込む場合は<codeタグ>のみで表現できます。
（例えば transform.localPosition = new Vector3(0, 1, 2); のように）

C#のシンタックスハイライトを使うには<code>にclass="cs"を指定します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Cube : MonoBehaviour
{

	// 日本語のテキスト
	void Start () {
             transform.localPosition = new Vector3(0, 1, 2);
	}

	// Update is called once per frame
	void Update () {
             transform.Rotate(new Vector3(0, Time.deltaTime * 100, 0));
	}
}

C#以外のコードは<pre>のみを使うと、フラットなコードブロックとして表示されます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Cube : MonoBehaviour
{

	// 日本語のテキスト
	void Start () {

	}

	// Update is called once per frame
	void Update () {

	}
}

キーボードの表現

ショートカットやキーボードは<kbd>によって良い感じに表現できます。
例えば「シーンファイルのセーブ： ctrl + s」のような使い方を想定しています。

イメージの表示

Unityエディタのスクリーンショットからデザインされたチャート図まで、イメージは非常に重要な要素です。
JPG、PNG、SVG、GIFアニメーションを状況によって使い分けてください。画像の横幅は最大で1280ピクセルとしてください。
GIFアニメーションは数秒のループを基本とし、容量はなるべく5MB以内に収めてください。

キャプション追加

コンテンツ下部に説明のためのキャプションを追加できます。
まず、<figure class="figure">で全体を囲み、キャプションテキスト部分を<figcaption class="figure-caption">で囲ってください。
こちらは画像に限った話ではなく、埋め込んだYoutube動画などにも行えます。

イメージのスタイル

画像の四隅をラウンドにするには<img>に class="rounded-circle" を指定してください。

左右揃え・センタリング

左右のグリッドに合わせたり、センタリングを行うには<div>で囲んだ上でclass="text-left"、class="text-center"、class="text-right"などを指定します。

動画埋め込み

動画はレスポンシブな記事エリアの横幅に合わせることを推奨しています。以下のタグを使ってください。

テーブル

表を作るときは<table>に .tableクラスを適用するだけでbootstrapのスタイルが適用されます。

また、<table>に .table-smクラスを追加するともう少し縦幅がコンパクトな表になります。

箇条書き

アラート

アラートを出すときは<div class="alert mb-4 alert-dark" role="alert">を使います。
特に強調すべき警告文などは<div class="alert mb-4 alert-danger" role="alert">とすることで赤色になります。

アラート内に見出しや罫線を入れることもできます。

ボタン

定義済みのボタンを<button>によって表示できます。
必要に応じてリンクなどに使ってください。

標準的なボタン 白いボタン 黒いボタン