ページタイトル
セクションタイトル
普段は個人向けの使い勝手の悪い……もとい一風変わったテンプレートを作るのが好きなのですが、せっかくHTML5を使うなら情報の意味づけが必要そうなものも作ってみたいということで、ショップ向けのテンプレートです。
サンプル画像はひいきのケーキ屋さんのケーキ。ショップ名出てますがまあ多分苦情は来ないでしょうきっと。サンプルですサンプル。そのまま使う人もいないでしょうし。いっそ宣伝ということで言い訳してみよう、うん。ちなみに通販もやってらっしゃいます。（万一このページが検索で上位ヒットしたら迷惑なので店名は書きませんが、上の画像のとおりです）
今回検索してみたら、結構有名なお店だったんですね。ここの黒みつ餅の抹茶ロールをちょっと凍らせて食べるのがものっそ好きだったのですが、現在はレギュラーメニューではないそうです。注文は受けてくださるそうなのでそのうちと目論見つつ。
テンプレートについて
それはさておきテンプレート。CSS3効果をふんだんに使っています。Chromeなどで見るとFLASHっぽい感じです。IEはTIMEでとりあえず似たようなものを。JavaScriptを使ったらもっと簡単になりそうですが、とりあえずTIMEのみでやってみました。
あとはtext-shadowにbox-shadowとborder-radius。日本語でもほんとに画像要らずですねこうなると。いい感じ。IE8はまだ対応していないので、一応filterで効果をかけようとしたらなんとフリーズする。
first-letterとfilter同時使用が原因のようなので結局断念。わざわざ角丸だの影だののためだけにhtc（要はJavaScript）を使うのもアレなのでスクエアのぺったりしたままにすることにしました。これはこれで悪くない感じ。
画像等の変更に
ついて
トップのメニュー背景はCSSファイルの以下の部分。
#index>#title{
position:relative;
height:375px;
width:650px;
margin:auto;
border-left:1px dotted #595857;
border-right:1px dotted #595857;
background:url(648471.jpg) no-repeat 0% 60px;
text-align:left;
}
各ページのメニュー背景は、ページごとにそれぞれ指定したい場合があると思いますので、それぞれidをつけてこんな感じに。
HTML部分
<H2 id="page1title">ページタイトル</H2>
CSS部分
#page1title{ // 上で指定したid
background:url(sample.jpg) no-repeat 0% 100%; // 表示したい画像と縦横位置
}
後はこんな感じ。
| 名前 | 表示例 | 指定 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| セクションタイトル | セクションタイトル |
id=pageの中にあるid=content中のH3要素 例:
<BODY id="page">
<DIV id="content">
<DIV class="section">
<H3>セクションタイトル</H3>
</DIV>
</DIV>
</BODY> |
|||||||||
| 色つきボックス | class=point指定のあるもの 例: <DIV class="point">ここに記述</DIV> |
||||||||||
| 定義リスト |
|
id=content中のDL要素 例: <DIV id="content"> <DL> <DT>定義語1</DT> <DD>定義の内容</DD> <DT>定義語2</DT> <DD>定義の内容</DD> </DL> </DIV> |
|||||||||
| テーブル |
|
id=content中のTABLE要素 例:
<DIV id="content">
<TABLE>
<TR>
<TH>見出し</TH>
<TH>見出し</TH>
<TH>見出し</TH>
</TR>
<TR>
<TH>見出し</TH>
<TD>データセル</TD>
<TD>データセル</TD>
</TR>
<TR>
<TH>見出し</TH>
<TD>データセル</TD>
<TD>データセル</TD>
</TR>
</TABLE>
</DIV> |