このページ
フォーマットガイドライン
概要
<table>または<h2>タグを<p>または<div>タグで囲まないでください。
<center>...</center>タグは使用しないでください。中央に配置するには、 <div align="center">...</div>を使用してください。
<b>...</b>タグは使用しないでください。何かを太字にしたい場合は、 <strong>...</strong>を使用してください。
<i>...</i>タグは使用しないでください。斜体にするには<em>...</em>を使用してください。
<p>...</p>タグは、テキストを囲む場合にのみ使用してください。
リンク内にその画像の拡大バージョンへの画像を追加する場合は、 <a class="trans" ... ><img ... ></a>を使用します。
セクション ヘッダーを追加するには:
<h2>ヘッダー名</h2>
右にはみ出す画像を追加するには:
<div class="image--right"><img src="..." /></div>
- コード サンプルをフォーマットするためのボックスを追加するには (このページに表示されているように)、次の手順を実行します。
<前> コードサンプルはこちら </pre> - 幅 50% の狭いデータ テーブルを追加するには:
<div class="box desk-50percent"> <h3 class="box-title">表のタイトル</h3><!--/box-title--> <div class="box-content"> <テーブルクラス="データ" セル間隔="0" セルパディング="0" 境界線="0"> <tr> <th class="data-heading">列タイトル 1</th> <th class="data-heading">列タイトル 2</th> </tr> <tr> <td class="left_aligned">左</td> <td>行 1、列 2</td> </tr> <tr> <td class="right_aligned">右</td> <td>行 1、列 2</td> </tr> <tr> <td class="centered">中央</td> <td>行3、列2</td> </tr> </テーブル> </div><!--/box-content--> </div><!--/box-->上記のコードを実行すると、次のような中央揃えの表が生成されます。
表のタイトル
列タイトル1 列タイトル2 左 行1、列2 右 行1、列2 中心 行3、列2 - 75% 幅のデータ テーブルを追加するには:
<div class="box desk-75percent"> <h3 class="box-title">表のタイトル</h3><!--/box-title--> <div class="box-content"> <テーブルクラス="データ" セル間隔="0" セルパディング="0" 境界線="0"> <tr> <th class="data-heading">列タイトル 1</th> <th class="data-heading">列タイトル 2</th> </tr> <tr> <td class="left_aligned">左</td> <td>行 1、列 2</td> </tr> <tr> <td class="right_aligned">右</td> <td>行 1、列 2</td> </tr> <tr> <td class="centered">中央</td> <td>行3、列2</td> </tr> </テーブル> </div><!--/box-content--> </div><!--/box-->上記のコードを実行すると、次のような中央揃えの表が生成されます。
表のタイトル
列タイトル1 列タイトル2 左 行1、列2 右 行1、列2 中心 行3、列2 - 標準の 100% 幅のデータ テーブルを追加するには:
<div class="box"> <h3 class="box-title">表のタイトル</h3><!--/box-title--> <div class="box-content"> <テーブルクラス="データ" セル間隔="0" セルパディング="0" 境界線="0"> <tr> <th class="data-heading">列タイトル 1</th> <th class="data-heading">列タイトル 2</th> <th class="data-heading">列タイトル 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="right_aligned">右</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="centered">中央</td> <td>行3、列2</td> <td>行3、列3</td> </tr> </テーブル> </div><!--/box-content--> </div><!--/box-->上記のコードを実行すると、次のような中央揃えの表が生成されます。
表のタイトル
列タイトル1 列タイトル2 列タイトル3 左 行1、列2 行1、列3 右 行1、列2 行1、列3 中心 行3、列2 行3、列3 - 大きなデータ テーブルを追加するには:
<div class="box box--expandable"> <h3 class="box-title">表のタイトル<span class="box-title-expand desk-visible">展開 <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title--> <div class="box-content"> <テーブルクラス="データ" セル間隔="0" セルパディング="0" 境界線="0"> <tr> <th class="data-heading">列タイトル 1</th> <th class="data-heading">列タイトル 2</th> <th class="data-heading">列タイトル 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="right_aligned">右</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="centered">中央</td> <td>行3、列2</td> <td>行3、列3</td> </tr> </テーブル> </div><!--/box-content--> </div><!--/box-->上記のコードを実行すると、次のような中央揃えの表が生成されます。
- 特大データ テーブルを追加するには:
<div class="box box--expandable"> <h3 class="box-title">表のタイトル<span class="box-title-expand desk-visible">展開 <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title--> <div class="box-content"> <テーブルクラス="データ" セル間隔="0" セルパディング="0" 境界線="0"> <tr> <th class="data-heading">列タイトル 1</th> <th class="data-heading">列タイトル 2</th> <th class="data-heading">列タイトル 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="right_aligned">右</td> <td>行 1、列 2</td> <td>行1、列3</td> </tr> <tr> <td class="centered">中央</td> <td>行3、列2</td> <td>行3、列3</td> </tr> </テーブル> </div><!--/box-content--> </div><!--/box-->上記のコードを実行すると、次のような中央揃えの表が生成されます。
表のヘッダー (th) または表のセル (td) を配置するためのクラス名に注意してください。
- 左揃えにするにはclass="left_aligned"
- 右揃えにするにはclass="right_aligned"
- 中央揃えにするにはclass="centered"
デフォルトでは、通常の表のセルは右揃えになっており、数値データの大きな表を表示するときにコードが小さくなります。