WEBサイト制作サービスWEBsite Design service

HTMLページ制作システムの機能説明

HTMLページ作成の詳細仕様説明

  • ExcelによるHTMLページ作成のカラム内容で、指定コマンド仕様についての内容説明です。
  • HTMLセレクタ〔タグ〕を各カラムで分解して分かり易く利用できるようにしています。特に、ハイパーリンク先の別カラム化。
  • 『id/class変換テーブル』に登録したCSSセレクタの「id/class」が利用でき、フォーマットコントロールを分かり易く指定できます。。
  • ハイパーリンク先の別カラム化、一括変換タグのテーブル等の分かり易く指定できます。

◇ ExcelによるHTMLページ作成のカラムの指定内容の説明 ◇

@{.colororange/（注)}@上記内容の文章をクリックすると仕様内容説明のところへ移動します。。

Template
変換name		 Anchor name タグ制御指定 表示内容 URLリンク 改行
    htmlencode Shift_JIS
htmltitle   htmltitle 独立行政法人等の保有する個人情報　_CXMedia
description description 個人情報の保護に関する法律の条文を掲載しております。
keywords keywords 個人,情報,保護,行政,法人
head_script copy
bodyhead pagetop <div,#container ==== Begin: [ container ] ====
bodyhead <div,#headerwrap
bodyhead p/&img,.left "/img/cxmedia_businessblog_top.gif":"タイトルトップ":"630x60":"" /blog/
body_begin <ul
body_begin li,#gn-home ホーム /
body_begin li,#gn-cms 携帯電話COM /i/
body_begin li,#gn-profile 企業情報 /profile/
body_begin >ul
body_begin >div
body_begin spacer 20
body_begin h2-2 条文:＠＠独立行政法人＠＠等の保有する＠＠個人情報＠＠の保護に関する法律 #b,web1.html;_b
body_begin &img "/img/spacer.gif":"":"100%x5":"0"
body_begin h3-7 目次
body_begin h4-2 ＠＠第一章　総則＠＠＠{.font-mb/（第一条…第二条）}＠ #c
body_begin p,align="right" <&img/"/img/icon_uppage.gif":"pagetop jump":"12x12":"">Page Top #pagetop
body_begin b <div,#books-tbl BEGIN: テーブル形式の指定
body_begin &table,.main-c666 "":"1":"2":"":"":"":"":""
body_begin th:r1:c2,.font-mb 名称
body_begin th,font-3 根拠法 *
body_begin td,font-1 ■1
body_begin td,font-1 奄美群島振興開発基金
body_begin td,font-1 奄美群島振興開発措置法（昭和29年法律第189号) *
body_begin td,.font-s ■2
body_begin td,.font-s 沖縄振興開発金融公庫
body_begin td,.font-s 沖縄振興開発金融公庫法（昭和47年法律第31号) *
body_begin >table
body_begin >div END: テーブル形式の指定
body_begin p <br>［お問い合わせはこちら］ /inquiry/ ptop
body_script delete
bodyend copy

ページのトップへ戻る


◇　HTMLジェネレータのコマンド指定の仕様　◇

HTMLジェネレータのコマンド指定

  • 「タグ制御」の欄で、「英字、-（ハイフォン）、数字」の先頭に下記の記号を付加して、タグのコマンド指定ができます。
  • 「表示内容」の欄で、[ ＠{ }＠ ],[＠＠ ＠＠ ],[ < > ]等を文章内に埋め込んで、コマンド指定ができます。
  • 「Anchor name」の欄で、ページ内のAnchor name指定ができます。[ <a name="xxx"></a> ]
  • 「URLリンク」の欄で、URLのパス指定してコマンドの[ a href="xxx" ]指定と連携をとることができます。
  • 『id/class変換テーブル』で登録した「タグ制御のName」は、「英字、-（ハイフォン）、数字」であり、登録されている「セレクタ（タグ）+エレメント」に差し替え指定できます。
  • セレクタは、ブロック型*1、 ラインコントロール型*2、自己完結型*3、文章内埋込み型*4（表示内容欄）に分けたコントロール指定をします。
コマンド 指定内容 対象タグ/名称 指定例 id/class検索と付加 チェック内容
[1] Template 変換name欄
テンプレート上の
「name」		 テンプレート上の「name」欄とリンクするための「name」を指定する。 予約名として、htmltitle description keywordsがある body_begin テンプレートの「name」一致チェック
空欄の場合は、前行に指定した内容と同じ「name」として処理します。
[2] Anchor name欄
名称（name）指定のとき ページ内のアンカーポイント（リンクの到達点) a nameのもの pagetop
ページ内のアンカータグ<a name=" … ">xxx</a>の[ name ]の値を指定します。[ xxx ]は、表示内容欄の内容で指定します。
ページの先頭のアンカーポイントとして予約名の「pagetop」があります。
（注：改行コントロールの欄で指定できるHTMLモジュール「ptop」のアンカーポイント)
[3] タグ制御指定欄
タグ指定（[-]なし) １行で開始タグのみで終了タグを省略できます。 「ラインコントロール」型 p li dt タグ存在チェック
[-]付きタグ id/class変換テーブルにある「neme」を検索して、設定内容の「タグ+id/classエレメント」に変換 id/class変換テーブルの登録名称 li-1 id/class変換テーブルの存在チェック
[<] のとき タグの開始の指定 「ブロック」型 <div する タグ存在チェック
[>] のとき タグの終了の指定 「ブロック」型 >div しない タグ存在チェック
[&] のとき 一括変換タグの指定 img input hr form textarea area &input タグ存在チェック
[#] のとき CSS（スタイルシート）指定した内容で、エレメント仕様の「id="xx"」に変換 CSSファイルのid/classの登録名称 #table-list する idの重複チェック
[.]（ピリオド） のとき CSS（スタイルシート）指定した内容で、エレメント仕様の「class="xx"」に変換
classの複数指定は、続けて[.]（ピリオド）の記号が先頭文字+[クラス名」で可能。		 CSSファイルのid/classの登録名称 .font-1
.font-mbc.bgclr-colgray		 する classの重複チェック
[,] （コンマ）のとき エレメント仕様id/class以外のエレメント追加 エレメント*5 ,style="xx" - id,classの重複とエレメント存在チェック
[th]/[td]タグの後の
[:] （コロン）のとき		 [:] （コロン）の後の[r]は[rowspan]、[c]は[colspan]のエレメントを意味し、[:r2:c3]ように数字を付けて値の指定 th,td td:r2:c3 する id/classテーブルの存在チェック
[/] のとき タグのネスト（入れ子）の指定 タグ h3/p
[予約名]のとき 予約名をFormat欄で指定して、表示内容欄の値に変換*6 htmltitle description keyword spacer template_b template_e delete copy spacer 20 しない
[4] 表示内容欄
表示内容欄で
[ ＠{xxx/xxx}＠ ]
の範囲指定のとき		 span指定 span対象の文章 ＠{color-1/赤字}＠ する id,classの重複チェック
<span>指定で、[/]（スラッシュ）区切りで前部がid/classと追加エレメントの指定であり、後部が対象となる文章です。
前部が[-]（ハイフォン）で区切られた英数字の場合は、id/class変換テーブルを検索して、テーブルの指定した[id/class]内容に自動設定
前部で[ .font-s ]のように[#]又は[.]（ピリオド）の記号が先頭文字にある場合は、id/classの値として[ class="font-s" ]の指定ができます。
前部に[,]（コンマ）で区切って、id/class（id/classの残り追加分）や追加エレメントの指定もできます。
[ ＠＠xxx＠＠ ]
の範囲指定のとき		 anchor link指定 anchor link対象の文章 ＠＠総務省＠＠ する 「表示内容欄」と「URLパス指定欄」の件数一致
<a href="zzz">xxx</a>指定で、[@@]区切りの囲まれた内容をリンクとなるものです。[href="zzz"]の「zzz」は、「URLパス指定欄」で指定します。
「xxx」は、<img …>又は文章、両方が指定できます。（文章内に組み込んだ<img …>は、<&img /…>の指定となります)
[ <aa zz>xxx</aa> ]
のタグ埋め込み指定のとき		 セレクタ（タグ）で囲んで対象文章を指定 文章内埋込み型 <b>xxx</b> する タグ存在チェック
id,classの重複チェック
文章のスタイル指定するタグは、表示内容欄で直接指定します。<b>…</b>,<br>など
<font>等の文章のスタイル指定は、CSS（スタイルシート）で指定することが簡潔にすることができます。
[5] URLリンク欄
URL path指定のとき URLパス名（ページ内リンクの時は、先頭に「#」を付けたアンカーポイント名) a (hrefのもの) /home/index.html;_b -
ハイパーリンクのタグ<a href=" … ">xxx</a>の[ … ]の値を指定します。[ xxx ]は、表示内容欄の内容の[ ＠＠xxx＠＠ ]で指定します。
targetの属性指定は、[;]（セミコロン）の後に[ _blank ]は[ _b ] 、[_self]は[ _s ]、[ _parent ]は[ _p ]、[ _top ]は[ _t]を付加します。
表示内容欄に複数の指定がある場合には、[,]（コンマ）で区切り指定します。
  • HTMLセレクタ（タグ）の注釈
  • *1：ブロック型セレクタ（タグ）とは
    div table ul dl ol form map pre code body html tr center select object frameset noframe iframe noscript head address ruby rbc rtc
  • *2：ラインコントロール型セレクタ（タグ）とは
    p h1 h2 h3 h4 h5 h6 li dt dd th td option label legend rb rt rp colgroup embed marquee
  • *3：自己完結型セレクタ（タグ）とは
    img input hr link meta area col frame base basefont isindex
  • *4：文章内埋込み型セレクタ（タグ）とは
    blockquote q cite em strong dfn abbr acronym sup sub var kbd ins del bdo tt i b big small u strike s font br (span)
    （注)「span」は、文章内で特殊処理して埋め込みます。
  • *5：エレメント（属性）とは
    style lang dir width height align valign border bgcolor rowspan colspan rows cols color size face cellspacing cellpadding type accesskey value maxlength href src alt target tabindex title shape coords name enctype method action cite http-equiv content language rel media pluginspage quality autoplay controller
  • *6：「予約名」コマンドと処理内容
予約名 処理内容
htmlencode HTMLページのエンコード指定ができます。表示内容欄にある値（Shift_JIS,EUC-JP,UTF-8,JIS）をWEB表示コードとして指定すると、
<meta http-equiv="content-type" content="text/html;charset=xxx">の"xxx"にセットします。
htmltitle <title> … </title>のタグに囲まれた[ … ]内容を差し替えます。
description <meta name="description" content=" … ">のタグの[ … ]内容を差し替えます。
keyword <meta name="keyword" content=" … ">のタグの[ … ]内容を差し替えます。
spacer spacerの画像の高さの指定ができます。「表示内容」欄でheightの「xxx」を指定します。
[ <img src="spacer.gif" width="100%" height="xxx" alt=""> ]
template_b テンプレートの開始指定を挿入します。「表示内容」欄でnameの「xxx」を指定します。
[ <!-- TemplateBeginEditable name=" xxx " --> ]
template_e テンプレートの終了指定を挿入します。
[ <!-- TemplateEndEditable --> ]
delete テンプレート・ファイル上のname指定された範囲を削除処理の指定をするコマンドです。
copy テンプレート・ファイル上のname指定された範囲をコピー処理の指定をするコマンドです。
macro マクロ処理の指定をするコマンドです。「表示内容」の欄で挿入したいファイル名のアクセスパスを指定するとそのファイル内容を挿入することができます。
（詳細は、『HTMLページ作成の詳細仕様説明 拡張機能』を参照）

ページのトップへ戻る

◇　一括変換指定可能タグの仕様　◇

対象となるタグ

  • img,input,table,hr,form,textarea,area,link,param,object,embedのタグは、各属性（エレメント）を「：」で区切りかつその値を""で囲んだ形式で表示内容の欄で指定ができます。
  • 「タグ制御指定」では、先頭に「&」を付けたタグ指定となり、「表示内容」では、タグを表す<,>で囲んで指定します。
  • 一括変換できるタグは、各属性（エレメント）を「:」（コロン）で区切ったテーブル形式で指定することができます。
  • 表示内容の指定欄で、『一括変換指定可能タグ』を埋込こむマクロ指定『LIST-nn』もあります。（詳細は、『HTMLページ作成の詳細仕様説明 拡張機能』を参照）

指定形式

タグの指定範囲 表示内容の指定範囲
タグ id/class 指定外の
エレメント		 タグ
区切り		 属性 : 属性 : 属性 : 属性 : 属性 : 属性 : 属性 : 属性
img #aa.bb ,xxx,xxx / src : alt : widthxheight : border : align : usemap : name
input 〃 〃 / type : name : value : size : maxlength : src : alt : その他
table 〃 〃 / width : cellspacing : cellpadding : border : align : bgcolor : frame : rules
hr 〃 〃 / width : size : color
form 〃 〃 / action : method : name : enctype
textarea 〃 〃 / name : rows : cols
area 〃 〃 / shape : coords : href : alt : target
link 〃 〃 / rel : href : type : media : target : title
param 〃 〃 / name : value : valuetype : type
object 〃 〃 / classid : codebase : widthxheight : align
embed 〃 〃 / src : name : widthxheight : type : pluginspage : loop : control : その他
  • [ widthxheight ]は、画像サイズの指定で、「幅x高さ」の指定ができます。幅又は高さの指定をしない場合は空欄(NULL)とします。(例　120x30, 120x , x30)
    指定がない場合は、「src 」が絶対パス（「/」から始まる形式）で指定してあるとき、自動的に画像ファイルからサイズを読み込んで自動設定します。
  • タグ区切りは、「表示内容」欄で利用する場合に、「/」で区切り指定をします。
  • 属性値を指定したくない場合は、""で囲んで値を空欄(NULL)とするとそのエレメントは出力されません。必ず""で囲まないと正しく変換されません。
  • 「指定外のエレメント指定」は、「表示内容の指定範囲」で指定できない内容（style,title等)を[,]区切りで指定することができます。
    (ex. ,style="line-height: 110%; margin-top: 0pt; margin-bottom: 0pt;")
  • 『embed』のタグは、『ラインコントロール型』タグのため、一括変換タグ指定後の『終了タグ(</embed>）』は必要ありません。
  • 『その他』の属性は、テーブルで指定できない属性を指定します。『input』のタグ指定では、「checked」などがあります。
    ◇『embed』のタグ指定では、
    ・『Flash』のswfの場合、『loop,quality,type』を利用します。"wmode"は、背景が透明なムービーを作成する場合に"transparent"を指定します。
    ・『quicktime』のmovの場合は、『autoplay,controller』を利用します。
    ・テーブルにない「quality,wmode,autoplay,controller」等は、『その他』の欄でまとめて指定します。（各項目をスペース区切りにする）
  • （詳細な『embed』のタグ指定：http://www.adobe.com/jp/support/flash/ts/documents/fl0306.htmlを参照)

  • 指定例
例 タグ制御の欄 表示内容の欄
タグ制御の指定 &img,.right "/php/blog/it-law/img/itlaw_coso.gif":"COSMOイメージ":"81x60":""
表示内容の指定 （なし) <&img,.right/"/php/blog/it-law/img/itlaw_coso.gif":"COSMOイメージ":"81x60":"">
（注)『id/class変換テーブル』で、CSSのセレクタname「img.right」に対するタグ制御name「img-8」を登録していた場合は、id/class変換機能を利用して「&img,.right」の部分を「&img-8」と指定できます。

ページのトップへ戻る

◇　改行コントロール（継続行）の仕様　◇

[6] 改行コントロール（継続行）欄の仕様

  • p,h1〜h6,li,dt,dd,th,td等の「ラインコントロール」型タグにおけるタグ指定では、終了タグ（</xxx>）を指定しないので、継続行のコントロール指定する必要があるネスト（入れ子）の状態を指定する。
  • li,dt,dd,th,tdにおける開始タグと終了タグの間に他のタグがある場合では、ネスト（入れ子）の状態となるため、開始タグに[ + ]を付加し、終了タグは不要のため、直前のタグに[ - ]を付けてコントロールする。
  • tableの改行コントロールでは、<tr>を省略することができる。そのため、<td>,<th>タグで<tr>,</tr>出力の場所のコントロール指定する必要がある。
継続行の指示子 利用形態 継続行の処理継続 tableの</tr>出力
[ + ]
のとき		 共通 ON -
継続行の継続を指示するもので、入れ子のレベル+1アップする。
[ ++ ]
のとき		 共通 ON -
ネストのレベルを+1アップを指示する（<table>の開始など、入れ子状態を分かり易くしたもの)
[ - ]
のとき		 共通 ON 出力しない
ネストのレベルを-1下げる。下げたレベルの<p>,<th>,<td>,<li>等の終了タグを指示（出力）する。
</p>,</td>,</th>,</li>等を指定したいとき、終了タグを使用しないためにその前のタグに設定する。
[ * ]
のとき		 table専用 ON 出力する
そのカラム内のレベル（ネスト）にある終了タグとテーブルライン終了の</tr>をはき出す。
（</td>又は</th>と</tr>を指定したいとき、終了タグを意味するためにその前のタグに設定)
[ *- ]
のとき		 table専用 ON 出力する
そのカラム内の入れ子（ネスト）にある終了タグをはき出し、レベル-1下げる。
（そのレベルのタグを出力し、レベル-1にある</td>又は</th>に加えて</tr>の終了タグを指定したいときに設定)
[ / ]
のとき		 共通 ON 出力しない
<th>,<td>のカラム内終了を指示とそれまでの積み上げた全レベル（ネスト）にある終了タグをはき出す。
[ 　] （なし）
のとき		 共通 前の状態の継続 出力しない
ネストに無関係：そのタグの終了タグをはき出し（ネストにある終了タグをはき出さない）。

改行コントロール（継続行）の指定例

  • HTMLページの実際の表示例
  • ３行目１カラムのところが<table>の入れ子状態にあります。（「グレー」表示のカラム)

HTMLページ制作の継続行指定のサンプル

  • HTMLページのExcelデータ編集例
HTMLページのソース 矢印 Excelデータ編集形式
タグ制御指定 表示内容 URL
リンク		 改行
制御
<table> <table
<tr><th>コード</th> th コード
<th>商品</th> th 商品
<th>金額</th></tr> th 金額 *
<tr><td>
<p>…</p>		 td/p … +
<img src="/i_mark/arrows_r.gif" alt="右矢印" width="16" height="20">
</td>		 &img "/i_mark/arrows_r.gif":"右矢印":"16x20":"" -
<td>
<img src="/i_mark/arrows_r.gif" alt="右矢印" width="16" height="20">
</td>		 td <&img/"/i_mark/arrows_r.gif":"右矢印":"16x20":"">
<td> td +
<form action="xxx.html" method="get"> &form "xxx.html":"get":"":""
サーチ<input name="search" type="text">
<input name="" type="submit" value="実行">		 サーチ<&input/"text":"search":""><&input/"submit":"":"実行">
</form>
</td></tr>		 >form *-
<tr><td>
 td ++
<table> <table
<tr><td> あ…</td> td あ…
<td>い…</td></tr> td い… *
<tr><td>う…</td> td う…
<td>え…</td></tr> td え… *
</table>
</td>		 >table -
<td>テーブルです。 td テーブルです。 +
<p>AB…</p> p AB…
<p>CD…</p> p CD…
<img src="/i_mark/arrows_u.gif" alt="上矢印" width="20" height="16">
</td>		 &img "/i_mark/arrows_u.gif":"上矢印":"20x16":"" -
<td><p>今回の注意</p>
</td></tr>		 td/p 今回の注意 *
</table> >table /

  • p,imgタグの例
HTMLページのソース 矢印 Excelデータ編集形式
タグ制御指定 表示内容 URLリンク 改行
<p><a href="#pagetop"><img…>Page Top</a></p> p <&img/…>Page Top #pagetop
<p><a href="#pagetop"><img…>Page Top</a></p> p/&img "xx.gif":"":"640x15":"" #pagetop

ページの先頭へ戻るの『予約名』

  • 「ptop」を改行コントロールで指定すると『ページの先頭に戻る』モジュールを追加出力します。
    → Page Toppage top jump
<div class="topagetopc">
<p align="right"><a href="#pagetop"><img src="ptopimg.gif" alt="page top jump" width="12" height="12">Page Top</a></p>
</div>
  • 「ptop-n」を改行コントロールで指定すると『ページの先頭に戻る』モジュール（Page Topの文字なし）を追加出力します。
    → page top jump
<div class="topagetopc">
<p align="right"><a href="#pagetop"><img src="ptopimg_wl.gif" alt="page top jump" width="72" height="16"></a></p>
</div>

ページのトップへ戻る

◇ 継続行の「入れ子」の指定方法と指定事例 ◇

<table>における「入れ子」の「入れ子」指定

  • 『改行制御』の欄で、「入れ子」の開始で「+」を指定し、「入れ子」の終了で「-」を指定する。
  • <table>のライン改行指定の</tr>は、「*」を追加した継続行の指定をする。
入れ子の入れ子の指定方法
  • 上記で指定したテーブルの表示内容
入れ子のテーブルの表示内容

ヘッダーの「入れ子」指定事例

  • １行での画像を表示する場合は、左側の画像にfloatの『left』を指定し、右側の画像にfloatの『right』を指定（CSSでの設定）して、<p>と</p>で囲む形の指定で実現できます。
  • 「グローバルナビゲーション」の『サイト内検索』のフォーム入力を１行で表示するには、<ul><li><form> ... </form></li></ul>を利用すると実現できます。
  • @{.colororange/（注)}@<li>を利用したフォーム入力では、<input>から</form>の間に『改行』を入れると下記のように表示内容が崩れるので注意が必要です。
ヘッダーの指定事例

ページのトップへ戻る