編集で最初に気をつけること
先頭行のDOCTYPEに注意してください（勝手に書き換えるエディタがあります）。
文法規則の緩いHTMLで記述しています（閉じタグを省略したものがあります）ので、DOCTYPEを書き換えると表示が崩れることがあります。
文字コードはutf-8です。
一般的なHTMLについては本や解説サイトを参照してください。
フロート画像とテキストの回り込み
説明
説明
回り込みを解除しました。
<p><img class=img-left src = "images/shampoo.jpg" width=300 alt = "">説明<br>説明 <p class=clear>回り込みを解除しました。
<img class=img-left>とすると、画像が左に寄り、テキストが回り込みます。<img class=img-right>とすると右に寄ります。テキストの回り込みを解除して段落を書くときは、<p class=clear>とします。
段落は<p class=right>、<p class=center>で左詰めにしたり、右詰めにしたりできます。<p class="clear right">とするとテキストの回り込みを解除して右詰め段落になります。
フロート画像を使った後、その他の要素が続くとき、テキストの回り込み解除がうまくいかないときは、続く要素にclearクラスを追加してみてください。
<p class="clear right"のように複数のクラス名をつけるときは、必ず""で括ります。
テーブルを使う
枠線のあるテーブル
| 項目 | 項目 |
|---|---|
| 説明 | 説明 |
<table> <tr><th>項目</th><th>項目</th></tr> <tr><td>説明</td><td>説明</td> </tr> </table>
枠線のないテーブル
| 項目 | 説明 |
|---|---|
| 項目 | 説明 |
<table class=transparent> <tr><th class=transparent>項目</th><td class=transparent>説明</td></tr> <tr><th class=transparent>項目</th><td class=transparent>説明</td></tr> </table>table、th、tdなどを class=transparentとすると透明枠になります。
新着情報
- 2012/00/00
- ホームページリニューアル
- 2012/00/00
- ホームページリニューアル
<dl class="news"> <dt>2012/00/00</dt><dd>ホームページリニューアル</dd> <dt>2012/00/00</dt><dd>ホームページリニューアル</dd> </dl>
新着情報の内容がある程度になると、カスタムスクロールバーが表示されます。
料金表
- 品名
- 500円
- 品名
- 1,000円
- 説明〜〜〜〜〜〜〜〜〜〜〜
- 品名
- 1,000円
<dl class="price"> <dt>品名</dt><dd>500円</dd> <dt>品名</dt><dd>1,000円</dd> <dt class=description>説明〜〜〜〜〜〜〜〜〜〜〜</dt> <dt>品名</dt><dd>1,000円</dd> </dl>
boxクラス
見出し3
内容
<div class=box> <h3>見出し3</h3> <p>内容 </div>
- <div class="box dotted"><div class="box solid">で点線枠や実践枠になります。
- boxや横並びboxなどを使った時（block要素が入れ子になったとき）上下に思いがけず大きな余白ができることがあります。余白の原因になっている要素にmargin-top0やmargin-bottom0クラスを適宜追加してみてください。
横並びbox
class="box-1-3"
透明枠
class="box-1-3 solid"
実線枠 p class=center
class="box-1-3 dotted"
点線枠 p class=right
<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を２つ、1/3と2/3幅で２つ並べたりすることもできます。
- <div class="boxframe heightLineParent">とするとボックスの高さが揃います。
- class=box-1-1で単独のボックスになります。class=boxと違って背景色は白です。
- solidは実線枠のboxになります。dottedで点線枠のboxにすることもできます。
lightbox
<a href="images/model12.jpg" data-featherlight="image"> <img src="images/model12.jpg" width="184" height="123"> </a>
イメージを開くリンクに data-featherlight="image" を加えると、画像がlightbox風にオーバーレイ表示されます。
イメージギャラリ
<div><img id="area1" src="images/ebitiri.jpg" width="300" height="300"></div> <a href="images/suigyoza.jpg" gallery-area="#area1">Long</a> <a href="images/sugatani.jpg" gallery-area="#area1">Medium</a> <a href="images/ebitiri.jpg" gallery-area="#area1">Short</a>
画像を１つ表示し、idを付けておきます（id="area1"）。画像を開くリンクにそのidを gallery-area="#area1" のように指定します。
idを付けた画像にはwidth,height属性を必ず付けておきます（画面がちらつくことがある）。
イメージギャラリがページの最後の方にあると、画面切り替え時に勝手に少しスクロールすることがあります。 画像をdiv要素で括り画像サイズと同じwidthとheightを記述しておくとこの現象はなくなります。
<div style="width:300px;height:300px;"><img id=area1 src="images/model1.jpg" width="300" height=300></div>
