R1021 : Markdown サンプル（上級編）

Avatar
Questetra Support
  • 更新
フォローする
 

Questetra で使用できる Markdown の記述方法（記法）一覧とその記述サンプルです。Markdown についてや、基本的な Markdown の記法については、R1020 : Markdown サンプル（初級編） をご覧ください。

 

Markdown による記述・表示を使用できる機能

  • データ項目［文字型（Markdown）］
  • データ項目の［説明］欄
  • ワークフローアプリの［業務マニュアル］

 

記法一覧

 

区切り線

区切り線

*（アスタリスク）／-（ハイフン）／ _（アンダーバー）のいずれかのみを3つ以上連続して記入した行は、区切り線として表示されます。

Markdown サンプル 
***
---
___
編集・プレビュー画面

R2141_markdown-sample_break-thematic.png

 

見出し

見出し
行頭に# 記号を記述する ATX スタイルと、テキスト直下に=または -を記述する Setex スタイルとで見出しを作成できます。

ATX スタイル

ATX スタイル

# 記号を使用して見出しを作成します。# の数が多いほど、見出しのレベルが下がります。

Markdown サンプル 
# レベル1の見出し
## レベル2の見出し
### レベル3の見出し
#### レベル4の見出し
##### レベル5の見出し
###### レベル6の見出し
編集・プレビュー画面

R2141_markdown-sample_heading.png

Setext スタイル

Setext スタイル

テキストの下に=（等号記号）または -（ハイフン）を繰り返して配置することで見出しを作成します。作成できる見出しは、レベル1、レベル2のみです。

  • レベル１の見出し: =（等号記号）
  • レベル２の見出し: -（ハイフン）
Markdown サンプル 
レベル１の見出し
=== 
レベル２の見出し
---
編集・プレビュー画面

R2141_markdown-sample_heading-setext.png

 

コードブロック

コードブロック

テキストをプログラムコードのブロックとして表示します。コード内のスペースがそのまま保持され、書式が変わりません。

フェンスドコードブロック

フェンスドコードブロック

3連続した`（バッククォート）、または~（チルダ）で始まる行から その開始行と同じ記号の3連続のみの行までで囲まれたテキストは、 コードブロックになります。

空行を挟んでも、 ``` や ~~~ などの両記号の3連続を含む行があっても、 開始で使用した記号のみが3連続で記述され、それ以外の記述がない行が来るまで、コードブロックは継続します。

Markdown サンプル 
```
下記は、スクリプトタスクにおける文字列結合処理の例です。
~~~
// == 業務データ取得 ==
var dataA = engine.findDataByName("q_dataA").toString(); 
var dataB = engine.findDataByName("q_dataB").toString(); 

// == 文字列を結合 ==
var newData = dataA + dataB;

// == 業務データ代入 ==
engine.setDataByName("q_dataC", newData );
```
編集・プレビュー画面

R2141_markdown-sample_code-block_fenced.png

インデントコードブロック

インデントコードブロック

    （半角スペース4つ）を行の先頭に挿入すると、 コードブロックになります。 空行を挟んでも、半角スペース4つから始まる行で再開すると、 コードブロックは継続します。 一方、半角スペース4つで始まらない行があると、通常の段落に戻ります。

Markdown サンプル 
    let array1 = qbpms.form.get("q_radioButton");
    let display1 = array1[0].display; //表示ラベル

    let array2 = qbpms.form.get("q_checkBox");
    let value2 = array2[1].value; //2つ目の選択肢の選択肢ID
上記のコードでは、Questetra Form JavaScript API を利用して、選択型データ項目に格納された値を取得しています。
編集・プレビュー画面

R2141_markdown-sample_code-block_indented.png

 

ブロック HTML

ブロック HTML

Markdown 内で、 HTML のブロック要素タグを使用することができます。

文字型 Markdown データ項目、業務マニュアル等、Markdown を使用する機能によって、使用できる HTML タグが異なります。 詳細は、「R2131: 処理フォーム画面で利用できる HTML タグ」 をご覧ください。

注：一部のタグ (script / style タグ) を除き、空行を使用しないでください。

Markdown サンプル 
<dl><dt style="font-weight:600 ;font-size:1.2em;">Markdown</dt>
<dd>軽量マークアップ言語の一つ。</dd>
<dd>記号や文字の組み合わせで、見出し、リスト、リンク、強調表示などを簡単に表現できる。</dd></dl>
編集・プレビュー画面

R2141_markdown-sample_block-HTML.png

 

段落

段落

テキストをグループ化して明確に意味を表現する基本的な単位です。段落は1行以上のテキストで構成され、他の段落や要素と1行以上の空行で区切ります。

Markdown サンプル 
これは最初の段落です。
    
これは2つ目の段落です。
編集・プレビュー画面

R2141_markdown-sample_paragraph.png

 

テーブル

テーブル

Markdown のテーブル（表）は、-（ハイフン）と|（縦棒）を使って作成します。

表の作成方法

  1. ヘッダ行

    • テーブルの一番上の行に列の見出しを記述します。
    • | で列を区切ります。

  2. セパレータ行

    • ヘッダ行の下に必ず記述します。
    • - を使って列の長さを定義し、| で区切ります。

  3. データ行

    • セパレータ行の下に続けて内容を記述します。

テキストの整列方法

セパレータ行に:（コロン）を追加すると、該当列のテキストの整列方法を指定できます。

書き方 整列 表示例
:--- 左寄せ 内容
:---: 中央寄せ 内容
---: 右寄せ 内容
Markdown サンプル 
| 商品名       | 価格  | 在庫   |
|:-------------|:-----:|-------:|
| ノート       | ¥500  |    10  |
| ペン         | ¥100  |    50  |
| 消しゴム     | ¥150  |    30  |
編集・プレビュー画面

R2141_markdown-sample_table.png

 

ブロック引用

ブロック引用

引用文や他の資料からの抜粋などを表現する際に使用します。行の先頭に>（半角の大なり記号）を付けることで作成します。

Markdown サンプル 
>これはブロック引用です。一番外側の引用になります。
>
>>これは1段階内側のブロック引用です。
>>
>>>これは2段階内側のブロック引用です。
>>>さらに深いレベルに引用を続けることができます。
>>
>>1段階内側のブロック引用に戻ります。
>
>外側のブロック引用に戻ります。
編集・プレビュー画面

R2141_markdown-sample_quates.png

 

リスト

リスト

テキストを簡単にリスト形式に整形します。「順序なしリスト（箇条書き）」と「順序付きリスト（番号付き）」の2種類があります。

順序なしリスト

順序なしリスト

行頭に -／*／+ を書き、続けて  （半角スペース）を追加してから項目を書きます。階層を下げるには、半角スペース2つを行頭に追加してください。

Markdown サンプル 
* 項目
  + サブ項目
    - サブサブ項目
    - サブサブ項目
  + サブ項目
    - サブサブ項目
* 項目
  + サブ項目
編集・プレビュー画面

R2141_markdown-sample_list-unordered.png

順序付きリスト

順序付きリスト

数字の後に .（ピリオド）もしくは )（半角の終わり丸括弧）を書き、続けて  （半角スペース）を追加してから項目を書きます。表示時は、番号は自動的に繰り上がります。

階層を下げるには、行頭の数字の桁数+2分の半角スペースを行頭に追加してください（例えば、1. であればスペースは3つ、10. であれば、スペースは4つ必要です）。

同階層において最初の項目に記載する数字を変更すると、表示時にはその数字から始まります。

Markdown サンプル 
1. 項目
  1) サブ項目
    1. サブサブ項目
    1. サブサブ項目
  1) サブ項目
  1) サブ項目
1. 項目
  5. サブ項目
  1. サブ項目
編集・プレビュー画面

R2141_markdown-sample_list-ordered.png

順序なしリストと順序付きリストの併用

順序なしリストと順序付きリストの併用

順序なし、順序付きの混合も可能です。順序付きリストから階層を下げるには、序数の桁数+2分の半角スペースを行頭に追加してください（例えば、1. であればスペースは3つ、10. であれば、スペースは4つ必要です）。

Markdown サンプル 
1. 項目
   1) サブ項目
     * サブサブ項目
     * サブサブ項目
   1) サブ項目
   1) サブ項目
1. 項目
   - サブ項目
     1. サブサブ項目
     1. サブサブ項目
- サブ項目
編集・プレビュー画面

R2141_markdown-sample_list-combination.png

 

特殊文字のエスケープ

特殊文字のエスケープ
#などの、Markdown で特別な意味を持つ文字をそのまま文字として表示するには、前に\を記入してください。

Markdown サンプル 
\*\*このテキストは太字になりません\*\*

\# このテキストは見出しになりません
編集・プレビュー画面

R1021_Markdown-sample_JA_escape .png
上記編集画面は、Windows の場合です。Mac の場合は、「\（バックスラッシュ）」で入力してください。

 

文字の参照表記

実体参照

実体参照

HTMLの実体参照（Entity Reference）を使用して特定の文字や記号を表記できます。実体参照は、特殊な文字を安全に表現する際に役立ちます。特に、HTMLやMarkdownでそのまま記述すると解釈されてしまう記号（例：<, > など）を表示する際に使用されます。

Markdown サンプル 
`&lt;` は &lt; を、`&gt;` は &gt; を、`&amp;` は &amp; を表します。
編集・プレビュー画面

R2141_markdown-sample_entity.png

文字数値参照

文字数値参照
Unicodeのコードポイントを直接指定して文字を表示する方法です。

10進数

10進数

&#数字;の形式で、10進数で指定します。

Markdown サンプル 
`\#8747;` は &#8747; を、`&#64017;` は &#64017; を、`&#169;` は &#169; を表します。
編集・プレビュー画面

R2141_markdown-sample_unicode-decimal.png

16進数

16進数

&#x数字;の形式で、16進数で指定します。

Markdown サンプル 
`&#x222B;` は &#x222B; を、`&#xFA11;` は &#xFA11; を、`&#x00A9;` は &#x00A9; を表します。
編集・プレビュー画面

R2141_markdown-sample_unicode-hexadecimal.png

絵文字

絵文字

絵文字を使うには、: で囲んだ絵文字コードを使用します。

GitHub と同じ絵文字コードに対応しています。
GitHubの絵文字コード一覧（https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md）
GitHubの絵文字コード一覧（https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md）
Markdown サンプル 
`:smile:` は :smile: を、`:thumbsup:` は :thumbsup: を、`:heart:` は :heart: を表します。
編集・プレビュー画面

R2141_markdown-sample_emoji.png

 

インラインコード

インラインコード

インラインコードとして表示するには、` で挟みます。

Markdown サンプル 
タスク処理画面での入力値の取得は、`qbpms.form.get(フィールド名)` を使用します。
編集・プレビュー画面

R2141_markdown-sample_inlinecode.png

 

テキストのスタイル

テキストのスタイル

テキストを *（アスタリスク） ／ _ （半角アンダーバー）／~ （チルダ）で囲むことで、書式を変更することができます。

太字

太字

重要な部分や強調したいキーワードを目立たせるために使用します。テキストを ** または __ （半角アンダーバー2つ）で囲みます。

Markdown サンプル 
**どちらの方法** も __太字になります__
編集・プレビュー画面

R2141_markdown-sample_bold.png

斜体

斜体

軽い強調や、他と区別したい用語、表現を示すために使用します。テキストを * または _ （半角アンダーバー1つ）で囲みます。ただし、ブラウザの設定によっては全角文字は斜体にならないことがあります。

Markdown サンプル 
*A* も _B_ も斜体になります。

ブラウザ設定によっては、*Ａ* などの _全角文字_ は、斜体になりません。
編集・プレビュー画面

R2141_markdown-sample_italic.png

太字かつ斜体

太字かつ斜体

非常に重要な強調や、特別な注意を促す場合に使用します。テキストを *** または ___ （半角アンダーバー3つ）で囲みます。

Markdown サンプル 
***Bold（太字）*** かつ ___Italic（斜体）___ です。
編集・プレビュー画面

R2141_markdown-sample_bold-italic.png

取り消し線

取り消し線

削除された情報や、無効になった内容を示します。または、変更前の内容を記録するために使用されます。テキストを~~ で囲みます。

Markdown サンプル 
~~このテキストは取り消し線がひかれています~~
編集・プレビュー画面

R2141_markdown-sample_strike.png

 

リンク

リンク

リンクの表記には、下記の方法があります。

  • URL のみ： <《リンク先 ULR》>
  • リンクテキスト付：[《リンクテキスト》](《リンク先 URL》)
  • 参照リンク：
    同じ URL へのリンクを繰り返す場合、URL と参照用の文字列を別に記入し、参照文字列を記入することでリンクを挿入することができます。
    [《参照文字列》] 《リンク先の URL》"《代替テキスト》"

    [《リンクテキスト》][《参照文字列》]
Markdown サンプル 
<https://questetra.com/ja/>

[Questetra サポートサイト](https://support.questetra.com/ja/)

[製品サイト]: https://questetra.com/ja/ "クエステトラ"

[一回目][製品サイト]

[二回目][製品サイト]
編集・プレビュー画面

R2141_markdown-sample_link.png

 

画像の表示

画像の表示

![《代替テキスト》](《画像の URL》)で画像を表示できます。表示サイズの調節はできませんので、表示サイズを変更したい場合は、<img>タグを使用してください。

Markdown サンプル 
![クエス君](https://support.questetra.com/wp-content/uploads/2022/04/QuesEyecatch_220_01.png)
編集・プレビュー画面

R2141_markdown-sample_image.png

 

インライン HTML

インライン HTML

Markdown 行内で、 HTML のインライン要素タグを使用することができます。

文字型 Markdown データ項目、業務マニュアル等、Markdown を使用する機能によって、使用できる HTML タグが異なります。 詳細は、「R2131: 処理フォーム画面で利用できる HTML タグ」 をご覧ください。

Markdown サンプル 
行内で <span style="font-size:1.5em;">HTML タグを使用</span> することができます。
編集・プレビュー画面

R2141_markdown-sample_inline-HTML.png

 

改行

改行

行末に\をいれるか、行末に （半角スペース2つ）を入れると、改行できます。

Markdown サンプル 
行末に`\`をいれるか\
行末に半角スペース2つを入れると  
改行できます。
編集・プレビュー画面R2141_markdown-sample_line-break.png
上記編集画面は、Windows の場合です。Mac の場合は、「\（バックスラッシュ）」で入力してください。

 

関連記事

このセクションの記事

コメント

0件のコメント

サインインしてコメントを残してください。

関連記事