ベーシックエレメント

頻繁に使う要素です

  • 普通のタグ
  • common系
  • general系

見出し

hn.hnTxt01

hn.hnTxt02

hn.hnTxt03

段落

div#mainContent p

リスト

ul.general01, ol.general01

  • ul.general01
  • 2番目のli
    • ul.general01の入れ子ul
  • 3番目のli
    1. ul.general01の入れ子ol
    2. no.2
    3. no.3
  1. ol.general01
  2. 2番目のli
    • ol.general01の入れ子ul
  3. 3番目のli
    1. ol.general01の入れ子ol
    2. no.2
    3. no.3

dl.general系

<dl class="generalDate">です。日付専用クラスです。

2007/08/06
サイトリニューアルしました。
2007/08/05
サイトリニューアルしました。
2007/08/03
サイトリニューアルしました。

<dl class="general01">です。汎用クラスです。レイアウトはどうにでもしてください。

2007/08/06
サイトリニューアルしました。
2007/08/05
サイトリニューアルしました。
2007/08/03
サイトリニューアルしました。

表組み

  • <table>にはできるだけsummary属性を書きましょう。面倒なら不要です。なくても文脈で何の表組みかはわかります。
  • <col>要素はbgとwidthを適用できます。text-alignは適用できません。
table.generalRowです
th scope="row" セル1 セル2
th セル1 セル2
th セル1 セル2
table.generalTheadです。table-layout: fixed; にしています。
th scope="col" th scope="col" th scope="col"
場合によっては<col>系も使ってください。    
     
table.generalComplexです。
th scope="col" th scope="col" th scope="col"
th scope="row" セル1 セル2
th セル1 セル2

新機能：div.secGroup

div.secGroupでsectionを囲めば段組みに早がわり！

このブロックではh2があるのでdiv.secton.secGroupと書いていますが、単純にdiv.secGroupを置くだけでも動きます。

ここはdiv.secGroupの左側（h3)

ここはdiv.secGroupの右側（h3)

さらに内側で
dlGroup発動
さらに内側で
dlGroup発動

エラークラス error, notice, success

errorです。errorはインラインには使わず<div class="error">で囲みます。

noticeです。noticeはインラインには使わず<div class="notice">で囲みます。

successです。successはインラインには使わず<div class="success">で囲みます。

注釈

div.notes

ページトップへ戻る