テキストスタイル

class=”center/right/left”

段落やボックスの整列位置を指定する。

center 中央寄せ

right 右寄せ

left 左寄せ

使用例

<p class="center">
	中央寄せ
</p>
<p class="right">
	右寄せ
</p>
<p class="left">
	左寄せ
</p>
<div class="center"><img src="/image/material/img01.webp" alt=""></div>
<div class="right"><img src="/image/material/img01.webp" alt=""></div>

class=”big/bigger/biggest/small”

文字サイズを変更する。段落全体の大きさを変える場合はpタグに、単語だけ変える場合はspanなどのインライン要素にクラスを付ける。
大きくするクラスにはfont-weight:boldが付いている。

big font-size:1.2em
キンキキッズのお楽しみ会

bigger font-size:1.4em
キンキキッズのお楽しみ会

bigger font-size:1.6em
キンキキッズのお楽しみ会

small font-size:0.8em
キンキキッズのお楽しみ会

class=”red/blue/green/yellow/brown”

文字色を変更する。段落全体の色を変える場合はpタグに、単語だけ変える場合はspanなどのインライン要素にクラスを付ける。
文字色を変更するクラスにはfont-weight:boldが付いている。

悩み事をかくすの案外下手だね
ひじをついた姿勢で爪を噛んでる

class=”pen_cream/pen_blue/pen_red”

文字にマーカーを付ける。spanなどのインライン要素にクラスを付ける。
文字にマーカーを付けるクラスにはfont-weight:boldが付いている。

月の輝いた町踊りに行こうか？
君はまつ毛伏せたらそっとうなづく

class=”penline/penline-green”

文字に下線を付ける。spanなどのインライン要素にクラスを付ける。
文字に下線を付けるクラスにはfont-weight:boldが付いている。

TELL ME心ならTELL ME動いてる悲しみは続かない

class=”wave”

文字に波線を付ける。spanなどのインライン要素にクラスを付ける。
文字に波線を付けるクラスにはfont-weight:boldが付いている。

心の中身を空にして涙も溶かして素直になれ

class=”outline-●●”

文字に背景色を付ける。spanなどのインライン要素にクラスを付ける。
文字に背景色を付けるクラスにはfont-weight:boldが付いている。
背景色は[outline-green][outline-red][outline-blue][outline-brown][outline-gray][outline-yellow]がある。

Shyな言い訳仮面でかくして踊ろ踊ろかりそめの一夜を
きっとお前も悩めるマドンナ棄てな棄てなまじなプライドを今は

使用例

<p>
	きっとお前も<span class="outline-gray">悩めるマドンナ</span>棄てな棄てな<span class="outline-yellow">まじなプライド</span>を今は
</p>

class=”ruby-●●”

文字の上に丸を付ける。spanなどのインライン要素にクラスを付ける。
文字に上に丸を付けるクラスにはfont-weight:boldが付いている。
丸の色は[ruby-red][ruby-orange][ruby-green][ruby-brown]がある。

迷い込んだ幻想 時を止めた楽園
むきに眉をひそめてもこころうらはら

使用例

<p>
	迷い込んだ<span class="ruby-red">幻想</span>時を止めた<span class="ruby-brown">楽園</span>
</p>

境界線

hrタグにクラスを付けて境界線を作る。

class=”star”
class=”cut”
class=”dash”
class=”lineblank”

文章の感覚を大きく空けたいときに

使うために。約3文字分の間ができます。

使用例

<hr class="star">
<hr class="lineblank">
ページトップへ