パーツ

よく使うボタン、表、画像などの小物パーツ

見出しH3

2021/01/16 updated.

記事中のH3見出しに使えるスタイル

タイトル titleA

title sampleA

タイトル titleB

title sampleB

タイトル titleC

title sampleC

タイトル titleD

title sampleD

ボックス・囲み罫

2020/12/24 updated.

ワンポイントに使える各種ボックスと囲み罫線。背景に色が必要な時は背景色オプションを組み合わせる事もできます。
好みの色を追加して使用してください。

box00

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

box01

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

box00 clr-sakura

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

box01 clr-fuji

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

box00 clr-wakana round5

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

box01 clr-blue round10

サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

テーブルスタイル

2020/12/24 updated.

よく使うテーブルのスタイル

tableStyleA
項目A 今日の天気は
項目B サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。
項目C サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。
tableStyleB
項目A 今日の天気は
項目B サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。
項目C サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

SP時に横スクロールができるテーブル。

SP時にカラム数の多いテーブルがはみ出してしまう問題を解決できます。

表は横にスクロールできます。

tableStyleA
項目A 今日の天気 明日の天気 過去の天気
項目B サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。サンプルテキストあいうえおサンプル。 サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。 サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。
項目C サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。 サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。 サンプルテキストあいうえおサンプル、あいうえおあいうえおサンプルテキスト。

リンクボタン(block)

ブロック要素のリンクボタン。親要素の幅の指定パーセント幅で中央寄せ。
幅はw25 〜 w100のwidthオプションクラスで指定。
revを付けると文字色と背景色が逆になります。

btn01 w50(50%)

btn01 w80(80%)

btn01rev w50(50%)

btn01rev w80(80%)

リンクボタン(inline-block)

インラインブロック要素のリンクボタン。配置は親要素のtext-alignに依存します。
ボタンの幅は文字数により伸縮します。
revを付けると文字色と背景色が
反転します。

btnA サンプルボタン

btnA サンプルボタン

btnA サンプルボタン

btnArev サンプルボタン

btnArev サンプルボタン

btnArev サンプルボタン