サンプル記事

現在のエディターで使用できる各種パーツのサンプルを置いています
パーツの追加があった場合はこちらに順次追加します

通常テキスト

h3見出し

テキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<strong>太字テキスト</strong>

リスト

ulリスト

• テキストテキスト
• テキストテキスト
• テキストテキスト

<ul class="dot-list">
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ul>

olリスト

1. テキストテキスト
2. テキストテキスト
3. テキストテキスト

<ol class="number-list">
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ol>

テーブル

スマホ時はスクロールさせるため、 <table>タグの親要素に <div class="scroll-box"> を設定します
現状横3列程度までのテーブルを想定しています
4列以上になると表示が崩れる可能性があります

<div class="scroll-box">
  <table>
    <thead>
      <tr>
        <th>1列</th>
        <th>2列</th>
        <th>3列</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>太字テキスト</strong></td>
        <td>テキストテキスト</td>
        <td>テキストテキスト</td>
      </tr>
      <tr>
        <td>テキストテキスト</td>
        <td>テキストテキスト</td>
        <td>テキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

枠付きテキスト

青枠テキスト

記事の内容の補足などに使用します

<div class="blue-frame">
  テキストテキスト
</div>

オレンジ枠テキスト

記事の内容が古い場合などに注意喚起できます

<div class="orange-frame">
  <strong>見出しテキスト</strong>
  テキストテキスト
</div>

注意書きテキスト

「※」は擬似要素で表示されます

テキストテキストテキスト

<p class="attention">テキストテキスト</p>

コード表示

コードを<pre><code></code></pre>で囲うとエディター風に表示されます

<pre><code>コード記述</code></pre>

jsfiddleのコード表示

<iframe width="100%" height="400" src="//jsfiddle.net/interlife/個別パラメーター埋め込み/embedded" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>

resultを先頭に表示する場合

パラメーターで表示順を操作できます

<iframe width="100%" height="400" src="//jsfiddle.net/interlife/個別パラメーター埋め込み/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>

よくある質問

よくある質問の表示方法を教えてください

dl, dt, ddタグ を使用して表示させます
下記のテンプレートを使用してください
「Q.」「A.」は擬似要素で表示されます

<dl class="article-faq">
  <dt>質問内容1</dt>
  <dd>回答内容1</dd>
  <dt>質問内容2</dt>
  <dd>回答内容2</dd>
</dl>