見出し

見出しh1補足事項

見出しh2補足事項

見出しh3補足事項

見出しh4補足事項

見出しh5

見出しh6

見出し装飾1

見出し装飾2

見出し装飾3

見出し装飾4

文章

段落 ここに記事
ここに記事ここに記事

<p class="mincyo">　明朝体 明朝体 明朝体 明朝体 明朝体 明朝体 明朝体 明朝体 明朝体 明朝体

ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体 ゴシック体

文字サイズ
xx-small とても小さなフォント　x-small 小さなフォント　small 少しだけ小さなフォント　medium 通常の大きさのフォント　large 少しだけ大きなフォント　x-large 大きなフォント　xx-large とても大きなフォント

インデント <p class="indent">　先頭に空白1文字分を空ける
ここに記事ここに記事ここに記事ここに記事

ドロップキャップ <p class="dropcap">　先頭文字を大きくする
ここに記事ここに記事ここに記事ここに記事
ここに記事ここに記事ここに記事ここに記事

インラインテキスト要素
太字 斜体文字(Italic) 短い引用 取り消されたテキスト Under-line(下線) 少し小さなテキスト

アライメント

左寄せテキスト <p class="textleft">

中央寄せテキスト <p class="textcenter">

右寄せテキスト <p class="textright">

左寄せテキスト(1行に右寄せと共存)

右寄せテキスト

文字色　class="trend"

赤色　 白色 　灰色　黒色　muted色　primary色　success色　info色　warning色　danger色　trend色

背景色　class="bgtrend"

区切り(<hr>水平線の代わり)　中央 <span class="divider"></span>　左側 <span class="divider2"></span>

ボタン　<button class="btn medium primary bginfo">ボタン名</button>

リスト

• 項目1-1 Unordered List 順序の無いリスト <ul class="listsquare">
• 項目1-2項目1-2項目1-2項目12項目1-2項目1-2項目1-2

• 項目2-1 Unordered List 順序の無いリスト <ul class="listcircle">
• 項目2-2項目2-2項目2-2項目2-2項目2-2項目2-2項目2-2

• Unordered List 順序の無いリスト その1 <li class="list2bl">
• Unordered List 順序の無いリスト その2 <li class="list2or">
• Unordered List 順序の無いリスト その3 <li class="list2rd">

2019.10.20

Definition List 定義リスト 並列リストの設定 <dl class="listpara">

2019.10.30

Definition List 定義リスト 並列リストの設定
Definition List 定義リスト 並列リストの設定

2019.12.10

Definition List 定義リスト 並列リストの設定

アンカー (リンク先にジャンプ)

基本のアンカー　<a href="#">…</a>

アニメーションアンカーその1　<span class="aniline"><a href="#">…</a></span>

アニメーションアンカーその2　<span class="aniline2"><a href="#">…</a></span>

行間空け

↑半行空け <div class="spacer"></div>

↑1行空け <div class="spacer1"></div>

↑1.5行空け <div class="spacer15"></div>

↑2行空け <div class="spacer2"></div>

↑3行空け <div class="spacer3"></div>

画像

普通

角を丸く class="imgrounded"

円形 class="imgcircle"

枠付き class="imgthumbnail"

画像付き文章

画像のコメント1

画像のコメント2

画像付き文章とは、画像が左又は右側に配置され、文章はその画像を回り込んで配置されます。
左側 <span class="imgleft"><img src="…" class="scale"></span>
右側 <span class="imgright"><img src="…" class="tilt"></span>

尚、左右の画像はリンクが設定されhover時のアニメーションが施されています。左は class="scale"、右は class="tilt"
ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事
ここに記事ここに記事ここに記事ここに記事
ここに記事ここに記事ここに記事ここに記事

カラム

埋め込み