Flipsのデザインを作成する際の、記述方法やご注意頂きたい点をまとめました。
難易度の高い項目ですので、初心者の方は、HTMLやCSSなどの基本知識を学習してから取り組まれることをお勧めします。
HTMLの書き方
・エリアタグとHTMLで記述します。
・エリアタグは、｛｝で囲まれた特殊なタグです。このタグを記述すると、タグの内容が実際の画面に表示されます（タグの内容は後述の「エリアタグの展開について」を参照）。
・エリアタグは全て必須です。
＜トップページ＞ {logo}{top_text}{link}{visual}{navigation}{contents}{side}{footer}
＜サブページ＞ {logo}{top_text}{link}{page_title }{navigation}{contents}{side}{footer}
・1ページに同じエリアタグを複数書くことはできません。ご注意ください。
CSSの書き方
・HTMLに記述された各要素に対し、CSSでデザインを指定します。
・エリアタグやモジュールのセレクタに対してCSSの指定を行えば、デザインの持つ初期値として使用されます（あとから、ユーザーが簡易編集画面で変更することもできます。）
・既存のエリアやモジュールだけでなく、HTMLに記述した新しい要素に対し、CSSでスタイルを指定することができます。
エリアについて
エリアの配置イメージ
各エリアの配置は、HTMLとCSSで調整することができます（visualとnavigationの上下を逆にするなど）
エリアタグの展開について
エリアタグ({logo}など)は、実際にHTMLとして以下のように展開されます。
エリアタグで展開されるHTMLの各セレクタに対してCSSの指定を行えば、デザインの持つ初期値として使用されます。
「ユーザ指定文字」は、ユーザが簡易編集画面で編集した内容が挿入されます。ユーザーの編集したスタイルで上書きされてしまうため、デザインのCSSで、ユーザ指定属性と同じセレクタのプロパティにCSSを指定するときはご注意ください。（詳細は後述「セレクタの選び方に関する注意」）
{logo}
＊なにも使用しない場合
HTML:(なし)
ユーザ指定属性:(なし)
＊画像を使用する場合
HTML:<div id="logo"><a href="./"><img src="%url%" style="height:100%;"/></a></div>
ユーザ指定属性:
%url% :画像のURL
※ ユーザの選択によってはimgタグのstyle属性がない場合もあります。
※ ユーザの選択によってimgタグのstyleにheight:100%を指定する場合があるので、その際に適切な大きさになるように#logoにheightを指定してください。
＊文字を使用する場合
HTML:<div id="logo"><a href="./" style="color:%color%; font-size:%fontsize%;">%text%</a></div>
ユーザ指定属性:
%text% :文字
%color% :#xxxxxx 形式
%fontsize% :パーセント表記
{top_text}
<h1>としてテキストが挿入されます。
アピール文や連絡先表示として利用されます。
HTML:
<div id="top_text">
<h1><div style="color:%color%; font-size:%fontsize%;">%text%</div></h1>
</div>
ユーザ指定属性:
%text% :文字(複数行可)
%color% :#xxxxxx 形式
%fontsize% :パーセント表記
{link}
「アクセス」「サイトマップ」などの、navigation以外のページへのリンクです。
HTML:
<div id="link">
<ul>
<li id="link1"><a href="%url%">%text%</a></li>
<li id="link2"><a href="%url%">%text%</a></li>
<li id="link3"><a href="%url%">%text%</a></li>
</ul>
</div>
ユーザ指定属性:
%url% :リンク先のURL
%text% :文字
備考:
aタグは1個～3個
{navigation}
各メインページへのリンクとなる、ナビゲーション部です。
HTML:
<div id="navigation">
<ul>
<li id="navigation1"><a href="%url%">%text%</a></li>
<li id="navigation2"><a href="%url%">%text%</a></li>
<li id="navigation3"><a href="%url%">%text%</a></li>
<li id="navigation4"><a href="%url%">%text%</a></li>
<li id="navigation5"><a href="%url%">%text%</a></li>
<li id="navigation6"><a href="%url%">%text%</a></li>
</ul>
</div>
ユーザ指定属性:
%text% :文字
{visual}
トップページのキービジュアル部分です。
HTML:
<div id="visual">
--Flashが挿入されます--
</div>
{page_title}
サブページは、visualがなくなり、contentsの上にページタイトルが入ります。
HTML:
<div id="page_title">
<h2 style="background:url(%url%) no-repeat left top;">
<div style="color:%color%; font-size:%fontsize%;">%text%</div>
</h2>
</div>
ユーザ指定属性:
%url% :背景画像
%text% :文字
%color% :#xxxxxx 形式
%fontsize% :パーセント表記
備考:
背景画像、文字は共に必須ではないが、両者とも指定されないということはない。
文字が入力されない場合もあるので、h2の高さを必ず指定してください。
{footer}
「navigationと同じリンク（固定）」「テキスト」を表示します。
HTML:
<div id="footer">
<ul>
<li id="footer1"><a href="%url%">%text%</a></li>
<li id="footer2"><a href="%url%">%text%</a></li>
<li id="footer3"><a href="%url%">%text%</a></li>
<li id="footer4"><a href="%url%">%text%</a></li>
<li id="footer5"><a href="%url%">%text%</a></li>
<li id="footer6"><a href="%url%">%text%</a></li>
</ul>
<p class="copy">%copyright%</p>
</div>
ユーザ指定属性:
%text% :リンク文字
%copyright% :フッター文字
{contents}
ホームページのメインとなる、内容部分です。ユーザーはこの中に「モジュール」を配置して、コンテンツを作成していきます（モジュールについては後述「モジュールのHTMLの展開について」）
HTML:
<div id="contents"></div>
備考:
このdivに後述のモジュールがいくつか登録される。
モジュールのHTMLはこのdivの直接の子要素となる。
{side}
ホームページのメインとなる、内容部分です。ユーザーはこの中に「モジュール」を配置して、コンテンツを作成していきます（モジュールについては後述「モジュールのHTMLの展開について」）
HTML:
<div id="side"></div>
備考:
このdivに後述のモジュールがいくつか登録される。
モジュールのHTMLはこのdivの直接の子要素となる。
モジュールのHTMLの展開について
モジュールはcontentsエリアかsideエリアのどちらかの子要素になります。
いずれのモジュールもそれぞれ<div class="module"></div>で囲まれます。
モジュールは、後からユーザーが追加するコンテンツ要素なので、デザインのHTML内では出現しませんが、CSSで各モジュールのスタイルを決めておくことが必要です。
見出し
＊見出し大の場合
HTML:
<h3 class="heading" style="color:%color%;">%text%</h3>
ユーザ指定属性:
%text%:文字
%color%:#xxxxxx 形式
＊見出し小の場合
HTML:
<h4 class="heading" style="color:%color%;">%text%</h4>
ユーザ指定属性:
%text%:文字
%color%:#xxxxxx 形式
記事(文章)
HTML:
<div class="text">%text%</div>
ユーザ指定属性:
(なし)
画像
HTML:
<div class="image" style="text-align:%align%"><img src="%url%" alt="%alt%" style="width:%width%;" /></div>
ユーザ指定属性:
%url%:画像のURL
%alt%:ALT属性
%align%:ALIGN属性
%width%:横幅(%指定) もしくはwidth属性の指定なし
備考：
widthの指定がない場合はwidth属性は書かれない
文章(画像＋テキスト)
HTML:
<img class="article" src="%url%" alt="%alt%" align="%align%" style="width:%width%;" />
<div class="article ">%text%</div>
ユーザ指定属性:
%text%:文章
%url%:画像のURL
%alt%:ALT属性
%align%:ALIGN属性
%width%:横幅(%指定) もしくはwidth属性の指定なし
備考：
widthの指定がない場合はwidth属性は書かれない
テーブル
HTML:
<table class="table" >
<tr><th>%text%</th><td>%text%</td></tr>
<tr><th>%text%</th><td>%text%</td></tr>
・・・
<tr><th>%text%</th><td>%text%</td></tr>
</table>
ユーザ指定属性:
%text%:セルの文字
備考:
テーブルの列数は常に2だが、行数は可変。
一列目がth,二列目がtdになる。
罫線
HTML:
<hr class="hr" style="color:%color%;background-color:%color%;width:%width%;height:1px;border:none;" />
ユーザ指定属性:
%color%:線の色。(#xxxxxx形式)
%width%:横幅。(%指定)
問い合わせフォーム
HTML:
<form class="inquiry">
<dl><dt>%text%</dt><dd><input type="text" name="[name属性]" value="" /></dd></dl>
<dl><dt>%text%</dt><dd><input type="text" name="[name属性]" value="" /></dd></dl>
・・・
<dl><dt>%text%</dt><dd><input type="text" name="[name属性]" value="" /></dd></dl>
<p><input type="submit" value="送信する" /></p>
</form>
ユーザ指定属性:
%text%:設問項目名
備考:
設問数は可変（１～３）
地図
HTML:
<div class=" map"></div>
備考：
HTMLはページロード時にjavascriptによって動的に出力されます。
RSS
HTML:
全体のHTML：<ol class="rss"><li>記事1</li><li>記事2</li> ･･･ </ol>
個々の記事のHTML：
<h4 class="rss">[日付]<a href="%url%">%title%</a></h4>[本文]
[日付]：<span class="rss">%date%</span>
[本文]：<div class="rss">%text%</div>
※ [日付]と[本文]は表示/非表示をユーザーが選択可能
ユーザ指定属性:
%url%:記事のURL
%title%:タイトル
%date%:日付
%text%:本文
html
HTML:
%html%
ユーザ指定属性:
%html%:HTML
サイトマップ
HTML:
<ul class="sitemap">
<li><a href="[1ページ目のURL]">%text%</a></li>
<li><a href="[2ページ目のURL]">%text%</a></li>
・・・
<li><a href="[xページ目のURL]">%text%</a></li>
</ul>
ユーザ指定属性:
%text%:ページ名
HTML/CSS記述上の注意点
(1)生のタグにstyleを指定しないでください。
[NG]
div{
color:red;
}
span{
font-size:12pt;
}
[OK]
*id指定
div#hoge, #hoge
*class指定
div.hoge
*decendant指定
#contents div
(2)HTMLで使用できないID/クラス名について
＊使用できないID
(エリアのID)logo,top_text,...,
flips_から始まる名前全て
＊使用できないクラス名
module
flips_から始まる名前全て
＊使用するのが望ましくないクラス名
(一部のモジュールで使用します)
link,copy,text
(3)セレクタの選び方に関する注意例えば、logoエリアのフォントサイズをデザイン側で決める場合は、div#logo にfont-size属性を指定します。
ユーザーが簡易編集画面から指定するフォントサイズはdiv#logo の子要素のaタグに指定されます。
例）
<div id="logo"><a href="./" style="color:%color%; font-size:%fontsize%;">%text%</a></div>
たとえば、div#logoにfont-size:20pxと指定したとき、ユーザーが編集画面から
フォントサイズで120%を選ぶとフォントの大きさは(20px × 120%)で、およそ24pxとなります。
デザイン側で「div#logo a」にfont-sizeを指定してしまうと、
その値はユーザーが編集画面から指定したフォントサイズで上書きされてしまいますのでご注意ください。