【デザイン】リストサンプル集
- ulのサンプル集
- リスト普通
- リストパターン2太字
- リストパターン3>を出す
- リストパターン4チェックマーク
- リストパターン組み合わせ
- リスト普通
- olのサンプル集
- 数字付きリスト普通
- 数字付きリストパターン2太字
- 数字リストパターン3>マーク
- 数字リストパターン4チェックマーク
- 数字リストパターン組み合わせ
- 枠と組み合わせる
- 数字付きリスト普通
- 合わせて読みたい
リストを使用したときにclass=""
を<ul>
や<ol>
に指定することでいろいろ変化が付けられるようにしました。
ぜひ通常の見た目と見比べてみてください。
【デザイン】定型文用サンプル
定型文に登録して、簡単に呼び出せるようにする。 デザインのサンプル。
その1ピン留め枠
ピン留めのサンプルです。
br
で改行するとこんな感じ。
class="pin"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。
中身の要素はp
タグで括ってください。
くくらなかった場合、余白がうまくつきません。
<h6></h6>
でもピン留めになりますが、見出し以外で使いたい時に。
<div class="pin"><p>ここに文字を入れる</p></div>
その2チェックマーク枠
チェックマーク付きサンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="check"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="check"><p>ここに文字を入れる</p></div>
その3Point吹き出しつき枠
ポイントサンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="point"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="point"><p>ここに文字を入れる</p></div>
吹き出し余談ver
ポイントサンプル。br
で改行するとこんな感じ。
段落(pタグ
)を変えるとこんな感じ
class="yodant"
で指定します。
div
で括っているので、中身ははてな記法
やMarkDown記法
ではなく、html
で記入してください。<div class="yodan"><p>ここに文字を入れる</p></div>
その4吹き出し
左向き吹き出しのタグ
div
タグにclass="speech_bubble_l"
を指定しています。
<div class="speech_bubble_l"> <div class="face_icon"> <img src="アイコン画像のアドレス"> </div> <div class="chat"> <div class="say"> <p>ここに文字を入れる</p> </div> </div> </div>
右向き吹き出しのタグ
div
タグにclass="speech_bubble_r"
を指定しています。
<div class="speech_bubble_r"> <div class="face_icon"> <img src="アイコン画像のアドレス"> </div> <div class="chat"> <div class="say"> <p>ここに文字を入れる</p> </div> </div> </div>