編集で最初に気をつけること
- 先頭行のDOCTYPEは原則的に書き換えないでください(勝手に書き換えるエディタがあるので注意してください)。
- 文法規則の緩いHTMLで記述しています(閉じタグ省略、属性値のクオーテーション省略)ので、DOCTYPEを書き換えると表示が崩れることがあります。
- 文字コードはutf-8です。
- 一般的なHTMLについては本や解説サイトを参照してください。
見出し2
上は見出し2です。<h2>....</h2>で囲みます
<h2>見出し2</h2>
見出し3
上は見出し3は<h3>....</h3>で囲みます
<h3>見出し3</h3>
箇条書き
番号なし箇条書きは<ul><li>タグを使います。
<ul>
<li>項目1
<li>項目2
<li>....
</ul>
- 項目1
- 項目2
- ....
番号付き箇条書きは<ol><li>タグを使います。
<ol>
<li>項目1
<li>項目2
<li>....
</ol>
ページ内スムーズスクロール
- 一定程度スクロールすると画面右下に「ページトップへ」の移動リンクが現れます。
- ページ内に<a name="abc" id="abc">というアンカーが存在し、<a href="#abc">移動</a>のようなリンクがあると、そのidの要素へスムーズスクロールします。
ニュース
dl class="news"
- 2014-05-12
- 本日のおすすめメニュー
- 2014-05-10
- ページ4を更新しました。
<dl class="news">
<dt>2014-05-12</dt><dd>本日のおすすめメニュー</dd>
<dt>2014-05-10</dt><dd>ページ4を更新しました。</dd>
</dl>
ニュース領域の高さが200pxを超えるとスクロールバーが自動的に表示されます。
価格表
- Aコース
- 3,980円
- 説明〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
- Bコース
- 4,980円
- Cコース
- 5,980円
<dl class="price">
<dt>Aコース</dt><dd>3,980円</dd>
<dt class=description>説明〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜</dt>
<dt>Bコース</dt><dd>4,980円</dd>
<dt>Cコース</dt><dd>5,980円</dd>
</dl>
画像とテキストの回り込み
右に回り込み
回り込み解除
<p><img class=left src=images/kohitsuji.jpg width=178 />右に回り込み
<p class=clear>回り込み解除
- イメージのclass属性にleft、rightなどを記述することでテキストを回り込みさせることができます。
- 回り込みを解除するにはpタグのクラス属性をclearとします。その他pタグのclass属性にはcenter、rightなども使えます。
- p class="clear right" とすれば回り込みを解除して右詰めでテキストを表示します。
- その他の要素が続くとき、テキストの回り込み解除がうまくいかないときは、<br class=clear><を挿入するか、続く要素にclass=clearを追加してみてください。
ボックス
class="box-1-3"
透明枠
class="box-1-3 dotted"
点線
class="box-1-3 solid"
実線
<div class="boxframe">
<div class="box-1-3"></div>
<div class="box-1-3 dotted"></div>
<div class="box-1-3 solid"></div>
</div>
- とすると1/3幅のボックスが3つ並びます。1/2幅ボックスを2つ、1/3と2/3幅のボックスを2つ並べることもできます。
- dottedやsolidをクラス名に加えると点線枠や実線枠にすることができます。
- class="box-1-3 solid"のように複数のクラス名を記述するときは必ず "" で括ります。
軽量lightbox機能があります
<a href="images/pict_large.jpg" data-featherlight="image">
<img src="images/pict_small.jpg" width=180>
</a>
- 画像ソースへのリンクタグにdata-featherlight="image"を加えると画像がlighrbox風にオーバーレイ表示されます。
- lightbox用のリンク画像には"拡大矢印"が付きます。
- サムネイルとlightbox用の画像を必ずしも大小2つ用意する必要はありません。
簡易イメージギャラリーを作ることができます(複数可)
ステーキ
エッグ・ハンバーグ
フォアグラ・ソテー
<img id=area1 src=images/steak.jpg width=180 height=135><br>
<a href="images/steak.jpg" gallery-area="#area1">ステーキ</a><br>
<a href="images/egg-humberg.jpg" gallery-area="#area1">エッグ・ハンバーグ</a><br>
<a href="images/foie_gras.jpg" gallery-area="#area1">フォアグラ・ソテー</a>
- ギャラリー領域としてid属性をつけた画像を1つ表示しておきます。
- ギャラリー領域の画像を変えるためのリンクタグを書きます。href属性に切り替える画像ファイル、gallery-area属性に対象となるギャラリー領域のidを記述します。
- 異なるidを付けたイメージ(領域)を用意すれば複数のイメージギャラリーを作ることができます
- 画像切り替えの再レンダリング時に画面がちらつくこともあります。少なくともイメージ(領域)は width、height を指定しておくか、イメージ・リソースを先読みしておいた方がよいでしょう。
- イメージギャラリがページの最後の方にあると、画面切り替え時に勝手に少しスクロールすることがあります。 画像をdiv要素で括り画像サイズと同じwidthとheightを記述しておくとこの現象はなくなります。
<div style="width:180px;height:135;"><img id=area1 src=images/steak.jpg width=180 height=135></div>