JPMLタグ一覧

JPMLとは?

JPMLは、HTMLより手短に、正しいHTMLを書くことを目的に作られました。
JPMLを使うことで、表示環境に依存しない美しいHTMLを作ることが出来ます。
JPMLタグは、必要に応じて追加することが出来ます。追加が必要な場合はメールにてお問い合せください。

JPMLの書き方

[タグ名(オプション)=内容]
これがJPMLタグの基本形です。
「内容」部分にさらに別のタグを入れたり、HTMLタグを組み合わせたりできます。
「オプション」は、タグによって使用できる項目が異なります。

※[]()=は、実際にはすべて半角です。

クラス

CSSが指定できるタグには、以下のクラスを使用することができます。

幅の指定.w20p幅20%
.w30p幅30%
.w40p幅40%
.w50p幅50%
.w100p幅100%
.w50幅50px
.w80幅80px
.w100幅100px
グリッド幅の指定.g1幅1グリッド
.g2幅2グリッド
.g3幅3グリッド
.g4幅4グリッド
.g5幅5グリッド
.g6幅6グリッド
.g7幅7グリッド
.g8幅8グリッド
.g9幅9グリッド
.g10幅10グリッド
1グリッドは約1/12の幅
テキスト配置.text-left左寄せ
.text-center中央寄せ
.text-right右寄せ
.text-middle上下中央配置(テーブル内のみ)
フロート.left左フロート
.right右フロート
.clearフロート解除
レベル1の見出しを作る
タグ名見出し1
オプションCSS
種類ブロックタグ
表示見本

見出し見出し見出し見出し

書式見本

[見出し1=見出し見出し見出し見出し]

説明

ページ内の最上位の見出しです。
通常はページ最上部に自動的にページのコンテンツ名として付加されます。

レベル2の見出しを作る
タグ名見出し2
オプションCSS
種類ブロックタグ
表示見本

見出し見出し見出し見出し

書式見本

[見出し2=見出し見出し見出し見出し]

説明

本文中の最上位の見出しです。

レベル3の見出しを作る
タグ名見出し3
オプションCSS
種類ブロックタグ
表示見本

見出し見出し見出し見出し

書式見本

[見出し3=見出し見出し見出し見出し]

説明

本文中の第2位の見出しです。

レベル4の見出しを作る
タグ名見出し4
オプションCSS
種類ブロックタグ
表示見本

見出し見出し見出し見出し

書式見本

[見出し4=見出し見出し見出し見出し]

説明

本文中の第3位の見出しです。

レベル5の見出しを作る
タグ名見出し5
オプションCSS
種類ブロックタグ
表示見本
見出し見出し見出し見出し
書式見本

[見出し5=見出し見出し見出し見出し]

説明

本文中の第4位の見出しです。

レベル6の見出しを作る
タグ名見出し6
オプションCSS
種類ブロックタグ
表示見本
見出し見出し見出し見出し
書式見本

[見出し6=見出し見出し見出し見出し]

説明

本文中の最下位の見出しです。

文章を書く(段落を作る)
タグ名段落(省略可)
オプションCSS
種類ブロックタグ
表示見本

これは通常のテキストです。

書式見本

[=これは通常のテキストです。]

説明

段落タグは、HTMLのpタグに相当します。
段落タグ内のテキストは、改行を自動的にbr(改行タグ)に変換します。
また、1行空白行があると、自動的にpタグを終了し、再度新しいpタグで段落を分けます。

リスト(箇条書き)を作成する
タグ名リスト
オプションCSS
種類リストタグ
表示見本
  • 箇条書き
  • 箇条書き
    改行できます
    • 箇条書き
書式見本

[リスト=
箇条書き
箇条書き⁄ ⁄ ⁄改行できます
+箇条書き

説明

複数の項目・テキストを併記する場合に使用します。
途中で改行する場合は「⁄ ⁄ ⁄(半角スラッシュ3つ)」を記述します。
階層的な箇条書きの場合は、行頭に「+」を記述します。

番号付きリスト(箇条書き)を作成する
タグ名番号リスト
オプションCSS
種類リストタグ
表示見本
  1. 箇条書き
  2. 箇条書き
    改行できます
    1. 箇条書き
書式見本

[番号リスト=
箇条書き
箇条書き⁄ ⁄ ⁄改行できます
+箇条書き

説明

複数の項目・テキストを列記する場合に使用します。
途中で改行する場合は「⁄ ⁄ ⁄(半角スラッシュ3つ)」を記述します。
階層的な箇条書きの場合は、行頭に「+」を記述します。

表を作る
タグ名表、項目名、項目
オプション

表:CSS,表の要約
項目名:CSS,項目名の略称(abbr属性),横に連結するセル数,縦に連結するセル数
項目:CSS,横に連結するセル数,縦に連結するセル数

種類インラインタグ(表はリストタグ)
表示見本
見出し1見出し2
見出し1-1見出し1-2見出し2-1見出し2-2
データ
データ
データデータ
データデータデータ
書式見本

[表=
[項目名(,,2)=見出し1][項目名(,,2)=見出し2]
[項目名=見出し1-1][項目名=見出し1-2][項目名=見出し2-1][項目名=見出し2-2]
[項目(,,2)=データ⁄ ⁄ ⁄データ][項目=データ][項目(,2)=データ]
[項目=データ][項目=データ][項目=データ]

説明

表を作る際には、「表」「項目名」「項目」の3つのタグを使用します。
HTMLでは表はtable、項目名はth、項目はtdに相当します。
表はリストタグなので、表タグ内での1行が表の1行になります。そのため、内容を改行したい場合には「⁄ ⁄ ⁄(半角スラッシュ3つ)」を使用します。
表の中でインラインではないタグを使用したい場合、HTMLで記述してください。

簡単な表を作る
タグ名CSV
オプションCSS,表の要約
種類リストタグ
表示見本
織田信長18歳
斎藤道三30歳
濃姫16歳
書式見本

[CSV=
織田信長(TAB)男(TAB)18歳
斎藤道三(TAB)男(TAB)30歳
濃姫(TAB)女(TAB)16歳

(TAB)はタブ区切りを表します。

説明

簡単な表を作る際に使用します。
タブ区切りで表を作成できます。

画像を表示する
タグ名画像
オプションCSS,ファイル名,タイトル,表示する幅,表示する高さ
種類インラインタグ
表示見本画像見本
書式見本

[画像(,sample.jpg)=画像見本]

説明

画像を表示します。
画像タグを記入すると、画像アップロードフォームが表示されるので、画像を簡単にアップロードできます。

ファイル名の書き方

このフリーテキスト用画像の場合

sample.jpg のように、ファイル名だけを記入します。

他のフリーテキスト用画像を利用する場合

up_load_files/freetext/(フリーテキストファイル名)/img/sample.jpg のように、画像のパスを含めて記入します。

PDFなどのファイルを掲載する
タグ名ファイル
オプションCSS,ファイル名
種類インラインタグ
表示見本ファイル見本
書式見本

[ファイル(,sample.pdf)=ファイル見本]

説明

ファイルを掲載します。
ファイルタグを記入すると、ファイルアップロードフォームが表示されるので、ファイルを簡単にアップロードできます。

ファイル名の書き方

このフリーテキスト用ファイルの場合

sample.pdf のように、ファイル名だけを記入します。

他のフリーテキスト用ファイルを利用する場合

up_load_files/freetext/(フリーテキストファイル名)/file/sample.pdf のように、ファイルのパスを含めて記入します。

リンクを張る
タグ名リンク
オプションCSS,リンク先
種類インラインタグ
表示見本Yahoo! JAPAN
書式見本

[リンク(,http://www.yahoo.co.jp/)=Yahoo! JAPAN]

説明

リンクを張ります。
HTMLのaタグに相当します。

段組を作る
タグ名段組ブロック
オプションなし
種類ブロックタグ
表示見本

このようにすることで、段組表示を作ることができます。
「g1」~「g10」まででカラム幅を指定できます。
数値の合計が12以下になるようにしてください。

画像見本

書式見本

[段組ブロック=
<section class="g7 left">
[=
このようにすることで、段組表示を作ることができます。
「g1」~「g10」まででカラム幅を指定できます。
数値の合計が12以下になるようにしてください。

</section>
<section class="g5 right">
[=
[画像(,sample.jpg,,100%)=画像見本]

</section>

説明

12列までのグリッドシステムに対応した段組を作ることが出来ます。
上記sectionタグに記載されている「.g5」「.g7」が、列の幅を指定するクラスです。
.g1~.g10まであり、合計が12以下になるように指定します。数字が大きいほど広くなります。
※sectionタグは、div、articleなど、他のタグでも構いません。

ページ内リンクのリンク先を設定する
タグ名#
オプションCSS,リンク先
種類インラインタグ
表示見本※表示できません
書式見本

[#=a]

説明

ページ内リンクのリンク先を設定します。
リンク元は、リンクタグを使用します。
上記のリンク先へリンクする場合、[リンク(,#a)=リンクします]と記入します。

テキストの強調をする
タグ名!
オプションなし
種類インラインタグ
表示見本

これは強調文字です

書式見本

[=これは[!=強調文字]です]

説明

本文中で、部分的に文字を強調する必要がある場合に使用します。

大きく強調する
タグ名!!
オプションなし
種類インラインタグ
表示見本大きく強調されたテキスト
書式見本

[!!=大きく強調されたテキスト]

説明

本文中で、見出しのように大きく強調したい場合に使用します。

斜体
タグ名i
オプションなし
種類インラインタグ
表示見本これは斜体にするタグです。
書式見本

これは[i=斜体にする]タグです。

説明 斜体を持たないフォント(メイリオ等)では、斜体表示になりません。