Introduction
素材未使用の創作サイト向けテンプレート。メニューリンクをクリックすることでコンテンツ内容を切り替える。すべてのコンテンツが１ページで完結する。内容量が膨大な場合はiframeを使ってもいいかもしれない（でないと、編集のときに見づらいかも…）。ページ下部に著作権表示をしていますが、移動は自由ですのでリンクページなどに記載いただけている場合は下部リンクは消しても大丈夫です。
一番初めに表示されるこのページは更新履歴やお知らせのみにするのもいいかも。MAINではギャラリー一覧テンプレート、OTHERでは各タグのデモ及び説明やカスタマイズの参考になりそうなことを、LINKではリンクページテンプレート。
Download
ご使用の際は以下リンク先からコピーしてお使いください。ダウンロードして使用する方は圧縮ファイルをクリックするとダウンロードが開始されます。htmlは必要最低限の案内のみの内容、demoは現在開いているこのスタイルシート（css、javaすべてが一緒に書き込まれているもの）です。Text
h2で連載・短編などに分けているので必要に応じて増減してください。作品説明のためのp要素（灰色の文字部分）は二種類。お好きな方をどうぞ。テキストページは作っておりません。リンクの際は別タブで開くといいかも。Long
デモンストレーション
ここに作品の説明や傾向など
無題ここに作品の説明や傾向など
Short
日付
2010/1/1
日付その二
100101
ジャンル
ホラー
登場人物/作品名
田中/tarou
Img
画像の一部を切り取ってリンクに使うのと、文字リンクの二種類。テキスト同様h2でイラスト・漫画などの分類をしてください。ギャラリーページは作っておりません。リンクの際は別タブで開くといいかも。Comic
Pict
タイトル 題 イラストレーション
説明付き
日付とか
説明付きその二
ここに作品の説明
java
内容切り替えのためのスクリプト。メニュー数の増減は「document.getElementById('').style.display = 'none';」を必要に応じて増やしたり減らしたりしてください。('')の中はtabのまま使ってもいいし、わかりやすいような名前に変えても大丈夫。ただしjavaだけでなくリンクやid名も適宜対応させてください。見た目的にメニュー数は７つくらいまでがベストかと。css
今回使用したタグについての紹介とカスタマイズする際に参考になりそうなことをば。一旦タグ説明してから、最下部でデモ一覧を表示しています。h1
大きな見出し用。text-alignで指定しデフォルトでセンタリングになっている。block要素なのでbrを使わず自動的に改行され、横並びになりません。
h2
小見出し用。枠線つき。inline要素なので横並びにすることが可能。もしblock要素にすると、枠線が画面いっぱいまで広がります。デフォルトではpaddingで隙間を作成し高さを調整していますが、heightで指定することもできます。横幅も同様。
font
PCでは非表示、画面横幅サイズが736px以下の機器（iOS等）では表示するためのプロパティ。displayの要素を逆にすると、PCで表示・iOS等で非表示に変更可。PC以外でのメニューデザインの都合で作成したので必要に応じて削除可能。
li
メニューバーで使用している。PCでは右上に少し傾いた状態で縦羅列され、iOS等では画面上部に普通の状態で表示される（固定ではない）。付箋をイメージして作ったので少し余白が広め。transformの数字を変えることで傾きの度合いを変更できる。
li.tag2
PCでは特にli.tagと違いがないが、iOS等では背景が透明になり、白の枠線が表示される。HOMEやINDEXなどをコンテンツと分けて独立して表示した際の差別化に。必要に応じてli.tagにしても支障はない。
p.dec
注釈用。一字下げしているバージョン。字下げのスペースを広げたい場合はpadding-leftの数字を増やしてください。1emで一文字に相当します。
p.dec2
注釈用。横並びバージョン。横並びになるので当然inline要素。疑似クラスbeforeとafterで自動的に括弧で囲まれるようになっているので、必要がなければ該当部分を削除ください。括弧部分を別のに変えたい場合はcontentの""内の内容を変更してください。
h1です
h2です
fontですp.decです
p.dec2です