エレメント

見出し

見出しh1補足事項

 <h1>見出しh1<span>補足事項</span></h1>

見出しh2補足事項

見出しh3補足事項

見出しh4補足事項

見出しh5
見出しh6

見出し装飾1

  <h3 class="hbottom">見出し装飾1</h3>

見出し装飾2

 <h3 class="hleft">見出し装飾2</h3>

見出し装飾3

 <h3 class="hleft2">見出し装飾3</h3>

見出し装飾4

  <h3 class="htop">見出し装飾4</h3>

文章

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

<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"

bgprimary色

bgsuccess色

bginfo色

bgwarning色

bgdanger色

区切り(<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
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"
ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事ここに記事
ここに記事ここに記事ここに記事ここに記事
ここに記事ここに記事ここに記事ここに記事

基本の表

AAABBBCCCCCC
DDDEEEFFFFFF

表クラスtable <table class="table">

NameAge
Yamamoto16
Suzuki26
Tanaka36

表クラスtable striped <table class="table striped">

NameAge
Yamamoto16
Suzuki26
Tanaka36

カラム

md-1
xs-1
md-2
xs-2
md-2
xs-3
md-3
xs-3
md-4
xs-4
md-12
xs-12

タブ

タブ_TAB1
ここに記事ここに記事

タブ_TAB2
ここに記事ここに記事
ここに記事ここに記事

タブ_TAB3
ここに記事ここに記事
ここに記事ここに記事
ここに記事ここに記事

埋め込み

地図

動画

動画 (mp4ファイルを再生)

<video> タグ

音楽 (mp3ファイルを再生)

<audio> タグ

inserted by FC2 system