- ホーム
- スタイルガイド
スタイルガイド
common.css(基本的なcssルール、ページ構造、ナビ、ヘッダーフッター)
index.css(TOPページ)
news.css(ブログ・お知らせ)
pagestyle.css(固定ページ及びコンテンツ)
●装飾 見出しに設定 h2 class=”u-ttl01-in”
上記タイトルを使用の場合記述を「テキスト」に変更しdivタグで囲む必要があります。
(“u-ttl01-in”は、画面サイズに合わせて、フォントサイズを変更している）
＜div class=”u-ttl01>
＜h2 class=”u-ttl01-in”>見出し2
＜/div>
●装飾
装飾 class=”ttl01″（明朝） バックグラウンドの画像が設定されていない
装飾 class=”ttl02″（#8a5033 bold）
装飾 class=”ttl03″（#d17b0b bold）
装飾 class=”u-ttl02″
装飾 class=”u-ttl03″
装飾 class=”s-ttl01″
装飾 class=”s-ttl02″
固定ページ 見出し３ h3
固定ページ 見出し４ h4
固定ページ 見出し５ h5
●リスト
- デフォルトリストstyle設定なし class=”orengelist”
- 黒丸リスト class=”list” style=”list-style-type: disc;”
- リスト
- リスト
- 数字リスト style=”list-style-type: decimal;
- リスト
- 四角リスト style=”list-style-type: square;”
- リスト
- 白丸リスト style=”list-style-type: circle;”
- リスト
- リスト
●ボックス
class=”box01″
class=”box02″
●テーブル
table class=”c-table”
tr class=”table-ttl”
| 曜日 | 時間 | 内容 |
|---|---|---|
| 火曜日 | 19:30〜21:30 | 初心者講座 池袋 |
●ボタン
<p class=”green_btn”>
<a href=”#”>グリーンボタン</a>
</p>
<p class=”orengebtn”>
<a href=”#”>オレンジボタン</a>
</p>
<p class=”btn01″>
<a href=”#”>ボタン種類01</a>
</p>
<p class=”btn02″>
<a href=”#”>ボタン種類02</a>
</p>
●カラム
左側要素
右側要素
右側要素
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class=”colmen2″>
<div class=”colmen2l”>左側要素</div><!– ２カラム左側終了 –>
<div class=”colmen2r”>右側要素</div><!– ２カラム右側終了 –>
</div><!– ２カラム大枠終了 –>
<div class=”colmen2l”>左側要素</div><!– ２カラム左側終了 –>
<div class=”colmen2r”>右側要素</div><!– ２カラム右側終了 –>
</div><!– ２カラム大枠終了 –>
●リンク内テキストボタン並び
ulタグのclassに「linklist」を付与する
<ul class=”linklist”>
<li ><a href=”#”>テキストテキスト</a></li>
<li ><a href=”#”>テキストテキスト</a></li>
<li ><a href=”#”>テキスト</a></li>
<li ><a href=”#”>テキストテキスト</a></li>
</ul>