ページをカスタマイズできる機能です。
任意に追加できるのはもちろん、既定のテンプレートを部品ごとに編集できます。
- ヘッダー
- フッター
- コンテンツ
- メニュー
- スタイルシート
- 404
各パーツはスタイルシートで編集することができます。
ブロック構成は次の通りです。
<section id="target123" class="target"> <header> <h2></h2> <div class="summary"></div> </header> <div class="content"></div> </footer> <div class="comment"></div> </fotter> </section>
目的を持ったリンクやボタンにはスタイルが設定されています。
※調整中
単語を対象にSPANタグに設定されるスタイル
- necessary
-
フォーム入力や選択が必須な場合に、項目名の直後に配置されています。
次のようなスタイルがお勧めです。
span.necessary { display: block; } span.necesary:before { content: "※"; }
- 新規登録・編集
- edit
- 追加・保存
- save
- 削除
- delete
- 詳細
- detail
- 確認
- check
- 一覧
- list
- 戻る(やり直す)
- back
<a href="./detail.php" class="next-detail">詳細</a> <button type="button" onclick="location.href='./delete.php'" class="next-delete">削除</button>
TABLEタグ
TABLEタグは当然ながらデザインのためには使用しません。
表となる項目にのみ使用されます。
- レコードの表
-
レコードを一覧で表示する場合には、クラス名に「records」が設定されます。
表の構造は、横軸がレコードです。
縦軸は1行名がカラム名で、2行目以降がレコードに格納されている値になります。
この場合、THEADタグが用意されていることがあります。
TFOOTは未設定です。 - カラム(フィールド)の表
-
カラムを一覧で表示する場合には、クラス名に「columns」が設定されます。
票の構造は、縦軸1列目がカラム名、2列目が値です。
3列目が存在する場合は、補足事項や備考などになります。
テーブルとはリンクされない情報をまとめて表示されることもあります。
カード
- <div class="cards">
- <div class="card">
- <div class="card-header">
- <span class="label"></span>
- <span class="title"></span>
- </div>
- <div class="card-body"></div>
- <div class="card-footer"></div>
- <div class="card-header">
- </div>
- <div class="card">
- </div>