サンプルページ

文字に色をつける

クラス【fc-[colorname]】を指定します。

ソース

<span class="fc-red">■文字色にレッド（fc-red）を指定</span>
<span class="fc-orange">■文字色にオレンジ（fc-orange）を指定</span>
<span class="fc-yellow">■文字色にイエロー（fc-yellow）を指定</span>
<span class="fc-olive">■文字色にオリーブ（fc-olive）を指定</span>
<span class="fc-lime">■文字色にライム（fc-lime）を指定</span>
<span class="fc-green">■文字色にグリーン（fc-green）を指定</span>
<span class="fc-teal">■文字色にティール（fc-teal）を指定</span>
<span class="fc-aqua">■文字色にアクア（fc-aqua）を指定</span>
<span class="fc-cyan">■文字色にシアン（fc-cyan）を指定</span>※aquaと同じ
<span class="fc-blue">■文字色にブルー（fc-blue）を指定</span>
<span class="fc-navy">■文字色にネイビー（fc-navy）を指定</span>
<span class="fc-indigo">■文字色にインディゴ（fc-indigo）を指定</span>
<span class="fc-purple">■文字色にパープル（fc-purple）を指定</span>
<span class="fc-violet">■文字色にバイオレット（fc-violet）を指定</span>
<span class="fc-fuchsia">■文字色にフクシャ（fc-fuchsia）を指定</span>
<span class="fc-magenta">■文字色にマゼンタ（fc-magenta）を指定</span>※fuchsiaと同じ
<span class="fc-pink">■文字色にピンク（fc-pink）を指定</span>
<span class="fc-maroon">■文字色にマルーン（fc-maroon）を指定</span>
<span class="fc-brown">■文字色にブラウン（fc-brown）を指定</span>
<span class="fc-black">■文字色にブラック（fc-black）を指定</span>
<span class="fc-gray">■文字色にグレー（fc-gray）を指定</span>
<span class="fc-silver">■文字色にシルバー（fc-silver）を指定</span>
<span class="fc-white">■文字色にホワイト（fc-white）を指定</span>

表示

文字を太字にする

クラス【b】を指定します。

ソース

<span class="b">【b】を指定のテキスト</span>

表示

【b】を指定のテキスト

文字を斜体にする

クラス【i】を指定します。

ソース

<span class="i">【i】を指定のテキスト</span>

表示

【i】を指定のテキスト

文字に下線をつける

クラス【u】を指定します。

ソース

<span class="u">【u】を指定のテキスト</span>

表示

【u】を指定のテキスト

文字に取り消し線をつける

クラス【s】を指定します。

ソース

<span class="s">【s】を指定のテキスト</span>

表示

【s】を指定のテキスト

テキストをハイライトして目立たせる

クラス【mark】を指定します。

ソース

テキストがはいります。<span class="mark">テキストがはいります。</span>テキストがはいります。

表示

文字を大きくする（フォントサイズ指定）

クラス【big】または【fs-l】を指定します。

<font size="[数値]">と同じスタイルはクラス【fs-[数値]】を指定します。

参考：小さくする場合はこちら

ソース

<span class="big">【big】を指定のテキスト</span>
<span class="fs-l">【fs-l】を指定のテキスト</span>
<span class="fs-3">【fs-3】を指定のテキスト</span>
<span class="fs-4">【fs-4】を指定のテキスト</span>
<span class="fs-5">【fs-5】を指定のテキスト</span>
<span class="fs-6">【fs-6】を指定のテキスト</span>
<span class="fs-7">【fs-7】を指定のテキスト</span>

表示

（1.2em）

やや大きくする（1.12em）

（1.24em）

（1.32em）

（1.8em）

（2.4em）

（3.6em）

文字を小さくする（フォントサイズ指定）

クラス【small】または【fs-s】を指定します。

<font size="[数値]">と同じスタイルはクラス【fs-[数値]】を指定します。

参考：大きくする場合はこちら

ソース

<span class="small">【small】を指定のテキスト</span>
<span class="fs-s">【fs-s】を指定のテキスト</span>
<span class="fs-1">【fs-1】を指定のテキスト</span>
<span class="fs-2">【fs-2】を指定のテキスト</span>

表示

<small>タグと同じスタイル（0.88em）

やや小さくする（0.88em）

（0.8em）

（0.94em）

テキスト配置（左・中央・右）

クラス【t-l】【t-c】【t-r】を指定します。

左配置

pタグにclass【t-l】を設定

<p class="t-l">spanタグにclass【b】を設定</p>

<span class="t-l">spanタグにclass【t-l】を設定</span>

中央配置

pタグにclass【t-c】を設定

<p class="t-c">spanタグにclass【b】を設定</p>

<span class="t-c">spanタグにclass【t-c】を設定</span>

右配置

pタグにclass【t-r】を設定

<p class="t-r">spanタグにclass【b】を設定</p>

<span class="t-r">spanタグにclass【t-r】を設定</span>

spanタグに使用すると、ブロック要素にするスタイルも設定されています。
テキスト配置はブロック要素でないと反映されません。
ブロック要素にしたい場合はクラス【db】を追記してください。

参考：ブロック要素にする

画像の左寄せ・右寄せ（要素の回り込み）

クラス【fl】【fr】を指定します。

※左寄せ・右寄せを指定している要素の方が高さがある場合、表示が崩れますので最後に
<br class="clear" />を必ず入れてください。

左寄せ

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
左の要素は画像にclass【fl】を設定しています。
この要素は最後に<br class="clear" />を入れています。

<img src="/images/noimage.png" alt="image" class="fl" />
<p>
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
<br class="clear" />
</p>

右寄せ

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
左の要素は画像にclass【fr】を設定しています。
この要素は最後に<br class="clear" />を入れています。

<img src="/images/noimage.png" alt="image" class="fr" />
<p>
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
<br class="clear" />
</p>

クラス【left】【right】なら画像余白調整付き

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
左の要素は画像にclass【left】を設定しています。
画像の余白が右と下にのみ１文字分入ります。
この要素は最後に<br class="clear" />を入れています。
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

<img src="/images/noimage.png" alt="image" class="left" />
<p>
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
<br class="clear" />
…(略)こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
</p>

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
左の要素は画像にclass【right】を設定しています。
画像の余白が左と下にのみ１文字分入ります。
この要素は最後に<br class="clear" />を入れています。
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

<img src="/images/noimage.png" alt="image" class="right" />
<p>
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
<br class="clear" />
…(略)こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。
</p>

中央寄せにする

クラス【center】を指定します。
ブロック要素にするスタイルも設定されています。
画像の余白は0になります。画像の下に余白を入れたい場合は余白スタイル設定のクラスを追加します。

画像にclass【center】を設定

<img src="/images/noimage.png" alt="image" class="center" >

画像にclass【center】と余白スタイルを設定

<img src="/images/noimage.png" alt="image" class="center m-b1em" >

参考：外側の余白(margin)をつける

<span class="center">spanタグにclass【center】を設定</span>

<span class="center m-b1em">spanタグにclass【center】を設定</span>

外側の余白(margin)を0にする

クラス【no】を指定します。

<table>タグに指定すると、外側の余白(margin)を0にするだけでなく、
中にある<th>、<td>タグの背景を無し、内側の余白(padding)とボーダーも0にします。

ソース

<img src="/images/noimage.png" alt="image" class="no" />

<table class="no" class="s_clear">
<tr><th>th</th><td>td</td></tr>
</table>

表示※分かりやすくする為に背景に色をつけています

内側の余白(padding)を0にする

クラス【pno】を指定します。

ソース

<p class="aside pno">内側の余白(padding)を0にする</p>

表示※分かりやすくする為に背景に色をつけています

内側の余白(padding)を0にする

内側の余白(padding)を0にする

外側の余白(margin)をつける

クラス【m-[指定したい設定名]】を指定します。
<p>、<table>、<dl>、<ul>、<article>、<section>タグは初期設定として下に1.5文字分の余白がついています。
これらに指定すると、スタイルを上書きすることになります。 <ul>タグ内の<ul>タグは下に0.5文字分の余白がついています。

ソース

<p class="m-0a">上下０の左右auto設定</p>
<p class="m-half">下に１文字の半分の余白をつける</p>
<p class="m-b1em">下に１文字分の余白をつける</p>
<p class="m-b1ema">下に１文字分の余白をつけ、左右auto設定</p>
<p class="m-l1em">左に１文字分の余白をつける</p>
<p class="m-lr1em">左右に１文字分の余白をつける</p>
<p class="m-r1em">右に1文字分の余白をつける</p>

表示※分かりやすくする為に枠線、背景に色をつけています

auto設定について

クラス【m-0a】、【m-b1ema】の左右auto設定とは、余白(margin)が自動調整になります。
中央配置【m-0a】を指定した中にブロック要素があった場合、余白(margin)がautoに設定されていないと、中央になりません。

例）

中央配置設定の<p class="t-c">～</p>に
ブロック要素、20％幅、ハイライトの<span class="db w20 mark">～</span>を入れる場合

<p class="t-c"><span class="db w20 mark">テスト</span></p>

▼ 通常だと中央配置された中でも中央にならない

テスト

<p class="t-c"><span class="db w20 mark m-0a">テスト</span></p>

▼ タグにクラス【m-0a】を指定すると左右がautoになり、中央に調整される。

テスト

内側の余白(padding)をつける

クラス【p-[指定したい設定名]】を指定します。

ソース

<p class="p-b1em">下に１文字分の余白をつける</p>
<p class="p-bhalf">下に１文字の半分の余白をつける</p>
<p class="p-l1em">左に１文字分の余白をつける</p>
<p class="p-lr1em">左右に１文字分の余白をつける</p>
<p class="p-r1em">右に１文字分の余白をつける</p>
<p class="p-t1em">上に１文字分の余白をつける</p>
<p class="p-tb1em">上下に１文字分の余白をつける</p>
<p class="p-thalf">上に１文字の半分の余白をつける</p>

表示※分かりやすくする為に背景に色をつけています

下に１文字分の余白をつける

下に１文字の半分の余白をつける

左に１文字分の余白をつける

左右に１文字分の余白をつける

右に１文字分の余白をつける

上に１文字分の余白をつける

上下に１文字分の余白をつける

上に１文字の半分の余白をつける

要素内にある画像の余白(margin)を自動(auto=数字指定無し)にする

画像の余白を(margin)を自動(auto=数字指定無し)にしたい親要素にクラス【auto-in】か【no-in】を指定します。
【auto-in】は指定内にある画像の左右余白が対象となり、上下余白はそのままです。
【no-in】は指定内にある画像の上下左右全ての余白が対象です。上下は【0】になります。

リストやテーブル※で画像一覧などを組みたい時にまとめて指定できます。

ソース

<span class="auto-in">
<img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /><br />
<img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" />
</span>
<ul class="auto-in grid3 no">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>

<span class="no-in">
<img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /><br />
<img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" />
</span>
<ul class="no-in grid3 no">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>

表示

auto-in指定

no-in指定

よく使いそうな細かい余白設定

1文字目（【m】or【p】）は余白の種類です。
【m】は外側余白margin、【p】は内側余白padding、の全2パターンです。
2文字目（【t】or【r】or【b】or【l】or【v】or【h】or【a】）は位置指定です。
【t】は上、 【r】は右、 【b】は下、 【l】は左、 【v】は上下、 【h】は左右、 【a】は上下左右全て、 の全7パターンです。
3文字目以降の数値（【0】or【10】or【20】）は余白のサイズ（px）です。
【0】は0px、 【10】は10px、 【20】は20px、 の全3パターンです。
この組み合わせで細かい余白設定ができます。全42パターンです。

外側余白margin各0px指定※画像の外側余白を上書き

• mt0
• mr0
• mb0
• ml0
• mv0
• mh0
• ma0

内側余白padding各0px指定※上書き要素がない為変化はありません

• pt0
• pr0
• pb0
• pl0
• pv0
• ph0
• pa0

外側余白margin各10px指定

• mt10
• mr10
• mb10
• ml10
• mv10
• mh10
• ma10

内側余白padding各10px指定

• pt10
• pr10
• pb10
• pl10
• pv10
• ph10
• pa10

外側余白margin各20px指定

• mt20
• mr20
• mb20
• ml20
• mv20
• mh20
• ma20

内側余白padding各20px指定

• pt20
• pr20
• pb20
• pl20
• pv20
• ph20
• pa20

ブロック要素にする

クラス【db】を指定します。
余白(padding)の上下をつける、テキスト配置（左・中央・右）、要素を100％横幅の一行扱いで使用したい場合などはブロック要素にしなければ反映されません。

ソース

<span class="db">クラス【db】を指定したテキスト</span>

表示※分かりやすくする為に背景に色をつけています

インラインブロック要素にする

クラス【dib】を指定します。
余白(padding)の上下をつける、で使用したい場合などはブロック要素にしなければ反映されません。

ソース

<span class="dib">クラス【dib】を指定したテキスト</span>

表示※分かりやすくする為に背景に色をつけています

リストをインラインブロック要素にする

<ul>（<ol>）タグにクラス【lin】を指定します。
<ul class="lin">内の<li>タグがインラインブロック要素になります。

ソース

<ul class="lin"><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

表示

• リスト1
• リスト2
• リスト3

中央、余白指定のソース

<ul class="lin t-c"><li>リスト1</li><li class="p-lr1em">リスト2</li><li>リスト3</li></ul>

中央、余白指定の表示

• リスト1
• リスト2
• リスト3

クラス【lin-line】を指定すると、隣合っている<li>タグの間に｜が入ります。

ソース

<ul class="lin-line t-c"><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

表示

• リスト1
• リスト2
• リスト3

リストをテーブルセル要素にする

<ul>（<ol>）タグにクラス【table】を指定します。
<ul class="table">内の<li>タグがテーブルセル要素になります。
<li>タグを同じ高さの背景で使いたい時などに利用します。
テーブルセル要素にするだけなので幅を100％にする場合はクラス【w100】も指定します。<li>タグそれぞれに幅指定も出来ます。（横幅を指定する）

ソース

<ul class="table w100 t-c"><li class="w30">リスト1</li><li class="w40">リスト2<br />ここだけ2行</li><li class="w30">リスト3</li></ul>

表示※分かりやすくする為に、背景に色   をつけています

• リスト1
• リスト2
  ここだけ2行
• リスト3

２カラム表示（画像とテキスト）

クラス【grid2it】を指定し、その中に<img />タグ（左寄せが初期設定）、<span>タグ（テキスト）を入れて２カラム構成にします。テーブルのように２列扱いになるので画像の下に文章がきません。

ソース

<span class="grid2it">
<img src="【画像指定】" alt="【画像名】" />
<span>
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
</span>
</span>

画像は、クラス【left】と同じ設定になっています。
画像を右寄せにしたい場合は、クラス【right】を指定してスタイルを上書き出来ます。

参考：画像の左寄せ・右寄せ（要素の回り込み）

また、<p>タグにクラス【grid2it】を指定しても同じ表示になります。

※<span>タグはクラス【grid2it】を指定したタグの子要素になる<span>タグだけ（孫要素を除く）に【テキスト部分のエリア要素】が設定されます。孫要素になる<span>タグは別の設定として使用可能です。▼表示参照

表示

▼spanに設定。画像は左寄せ設定（上書きなし）

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

▼pに設定。画像は右寄せ設定（クラス【right】を指定）

こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

２カラム表示（テキストとテキスト）

クラス【grid2tt】を指定し、その中に<span class="dt">タグ（タイトルとなるテキスト。左寄せが初期設定）、<span class="dd">タグ（内容となるテキスト）を入れて２カラム構成にします。テーブルのように２列扱いになるのでタイトルテキストの下に文章がきません。

ソース

<span class="grid2tt">
<span class="dt">タイトルテキスト</span>
<span class="dd">
こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。…(略)
</span>
</span>

タイトルとなるテキストは、クラス【left】と同じ設定になっています。
タイトルとなるテキストを右寄せにしたい場合は、クラス【right】を指定してスタイルを上書き出来ます。

また、<p>タグにクラス【grid2tt】を指定しても同じ表示になります。

<span>タグはクラス【grid2tt】を指定したタグの子要素になる<span>タグだけ（孫要素を除く）に【テキスト部分のエリア要素】が設定されます。孫要素になる<span>タグは別の設定として使用可能です。▼表示参照

表示

▼spanに設定。左寄せ設定（上書きなし）

▼pに設定。右寄せ設定（クラス【right】を指定）

タイトルテキスト こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

▼pに設定。<span class="dt">タグ（タイトルとなるテキスト）の中に画像を入れることも出来ます。

タイトルテキスト こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。こちらにテキストが入ります。

２～５カラム表示（隣り合ってるリストの隙間有）

要素を均等の２～５カラムにしたい場合、クラス【typebox[2～5*1]】を指定します。
この指定では、要素と要素の間に１％の余白が空きます。*2
指定されたカラム数で自動改行になります。
例えば、【typebox4】を指定したリスト<li>が×６ある場合は、一行目４カラム二行目２カラム(左半分)になります。 ※1画面サイズによってカラム展開する指定は、最小２カラム～の表示（隣り合ってるリストの隙間有）を参考にしてください。 ※2更にこの指定内は中央寄せ、画像左右の余白がauto指定前提になっています。

ソース

<span class="title-i-square hl"><code>typebox2</code>設定</span>
<ul class="typebox2">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>
<span class="title-i-square hl"><code>typebox3</code>設定</span>
<ul class="typebox3">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>
<span class="title-i-square hl"><code>typebox4</code>設定</span>
<ul class="typebox4">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>
<span class="title-i-square hl"><code>typebox5</code>設定</span>
<ul class="typebox5">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>

表示

最小２カラム～の表示（隣り合ってるリストの隙間有）

要素を均等の２カラム～の表示にしたい場合、クラス【typebox2-[(無) or 3 or 4]】を指定します。
３カラム～の表示は、クラス【typebox3-[(無) or 4 or 6]】を指定します。 上の２～５カラム表示（隣り合ってるリストの隙間有）との違いは、画面サイズが最小でも１カラムにならず、２カラムの表示になります。

ソース

<ul class="typebox2-3">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>
<ul class="typebox2-">
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
<li><img src="/images/noimage.png" alt="photo" /></li>
</ul>

表示

【typebox2-3】最小2カラムから3カラム

【typebox2-4】最小2カラムから4カラム

【typebox3-4】最小3カラムから4カラム

【typebox3-6】最小3カラムから6カラム

【typebox2-】最小からずっと2カラム

【typebox3-】最小からずっと3カラム

【typebox4-】最小からずっと4カラム

【typebox5-】最小からずっと5カラム

更に細かいレイアウト設定用

【typebox2-3-6】最小2カラム→3カラム→6カラム

【typebox2-4-6】最小2カラム→4カラム→6カラム

横幅を指定する

クラス【w[数値]】を指定します。

テーブルの幅を調整したい時などに使えます。<th>または<td>タグ１つ（始まりの１つ目をオススメします）にクラスを指定するだけで、同じ列のタグは全て同じ幅に揃います。

ソース

<table class="s_clear">
<tr><th class="w50">【th】に w50 指定</th>
<td>【th】は50％幅指定になり、【td】は残りの幅で調整される。</td></tr>
<tr><th>【th】に w50 指定</th><td>【th】は50％幅指定になり、【td】は残りの幅で調整される。</td></tr>
<tr><th>【th】に w50 指定</th><td>【th】は50％幅指定になり、【td】は残りの幅で調整される。</td></tr>
</table>

<table class="s_clear">
<tr>
<th class="w25">【th】に w25 指定</th>
<td>【th】は25％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
<tr>
<th>【th】に w25 指定</th>
<td>【th】は25％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
<tr>
<th>【th】に w25 指定</th>
<td>【th】は25％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
</table>

<table class="s_clear">
<tr>
<th class="w30">【th】に w30 指定</th>
<td>【th】は30％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
<tr>
<th>【th】に w30 指定</th>
<td>【th】は30％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
<tr>
<th>【th】に w30 指定</th>
<td>【th】は30％幅指定になり、【td】は残りの幅で調整される。</td>
</tr>
</table>

表示

テーブルのサンプル

<table>タグに指定すると全てのセルが反映されます。
<tr>タグに指定するとその行のセルが反映されます。
<th>または<td>タグに指定するとそのセルだけが反映されます。

ソース

<table class="s_clear">
<tr><th class="v-t">クラス【v-t】指定</th><td class="t-l">クラス【t-l】指定</td></tr>
<tr><th class="v-m">クラス【v-m】指定</th><td class="t-c">クラス【t-c】指定</td></tr>
<tr><th class="v-b">クラス【v-b】指定</th><td class="t-r">クラス【t-r】指定</td></tr>
<tr><th class="left">クラス【left】指定</th><td class="left">クラス【left】指定</td></tr>
<tr><th class="center">クラス【center】指定</th><td class="center">クラス【center】指定</td></tr>
<tr><th class="right">クラス【right】指定</th><td class="right">クラス【right】指定</td></tr>
<tr class="left"><th><tr>タグにクラス【left】指定</th><td><tr>タグにクラス【left】指定</td></tr>
<tr class="center"><th><tr>タグにクラス【center】指定</th><td><tr>タグにクラス【center】指定</td></tr>
<tr class="right"><th><tr>タグにクラス【right】指定</th><td><tr>タグにクラス【right】指定</td></tr>
<tr><th class="t-l">クラス【t-l】指定</th><td class="v-t">クラス【v-t】指定</td></tr>
<tr><th class="t-c">クラス【t-c】指定</th><td class="v-m">クラス【v-m】指定</td></tr>
<tr><th class="t-r">クラス【t-r】指定</th><td class="v-b">クラス【v-b】指定</td></tr>
</table>

表示

<table class="s_clear thc">
<tr><th><table>タグにクラス【thc】指定</th><td><table>タグにクラス【thc】指定</td></tr>
<tr><th><table>タグにクラス【thc】指定</th><td><table>タグにクラス【thc】指定</td></tr>
<tr><th><table>タグにクラス【thc】指定</th><td><table>タグにクラス【thc】指定</td></tr>
</table>

表示

<table class="s_clear thm">
<tr><th><table>タグにクラス【thm】指定</th><td><table>タグにクラス【thm】指定<br /><table>タグにクラス【thm】指定</td></tr>
<tr><th><table>タグにクラス【thm】指定</th><td><table>タグにクラス【thm】指定<br /><table>タグにクラス【thm】指定</td></tr>
<tr><th><table>タグにクラス【thm】指定</th><td><table>タグにクラス【thm】指定<br /><table>タグにクラス【thm】指定</td></tr>
</table>

表示

フォームのサンプル

親要素にそれぞれの項目に関連したクラスを指定すると幅が指定されます。
％での数字指定は横幅を指定するのクラスが使えます。

ソース

<p class="fi_zip"><input type="text" /><p>

<p class="fi_age"><input type="text" /><span class="ts">歳</span><p>

<p class="fi_number"><input type="text" /><span class="ts">年</span><p>

<p class="fi_day"><input type="text" /><span class="ts">月</span><input type="text" /><span class="ts">日</span><p>

<p class="fi_name"><input type="text" /><p>

<p class="fi_tel"><input type="text" /><p>

<p class="fi_mail"><input type="text" /><p>

<p class="w60"><input type="text" /><p>

表示

h*タグのスタイルをつけてタイトル仕様にする

クラス【h3 or h4 or h5 or h6】を指定します。

ソース

<p>
<span class="h3">h3タグのスタイルを利用したspanタグ</span>
テキストテキストテキストテキスト<br />テキストテキストテキストテキスト
</p>
<p>
<span class="h4">h4タグのスタイルを利用したspanタグ</span>
テキストテキストテキストテキスト<br />テキストテキストテキストテキスト
</p>
<p>
<span class="h5">h5タグのスタイルを利用したspanタグ</span>
テキストテキストテキストテキスト<br />テキストテキストテキストテキスト
</p>
<p>
<span class="h6"><span><span>h6タグのスタイルを利用したspanタグ</span></span></span>
テキストテキストテキストテキスト<br />テキストテキストテキストテキスト
</p>

表示

h3タグのスタイルを利用したspanタグ テキストテキストテキストテキスト
テキストテキストテキストテキスト

h4タグのスタイルを利用したspanタグ テキストテキストテキストテキスト
テキストテキストテキストテキスト

h5タグのスタイルを利用したspanタグ テキストテキストテキストテキスト
テキストテキストテキストテキスト

h6タグのスタイルを利用したspanタグ テキストテキストテキストテキスト
テキストテキストテキストテキスト

<br />を指定（改行）すると1行空いてしまうので注意

<p>
<span class="h3">h3タグのスタイルを利用したspanタグ</span><br />
テキストテキストテキストテキスト<br />テキストテキストテキストテキスト
</p>

↓

h3タグのスタイルを利用したspanタグ
テキストテキストテキストテキスト
テキストテキストテキストテキスト

<span class="h3">spanタグにclass【h3】を設定</span>

<span class="h4">spanタグにclass【h4】を設定</span>

<span class="h5"><span>spanタグにclass【h5】を設定</span></span>

<span class="h6"><span><span>spanタグにclass【h6】を設定</span></span></span>

アイコン指定

• 矢印アイコン指定

  <a href="[URL]" class="link">矢印アイコン</a>
  

• pdfアイコン指定

  <a href="[URL]" class="pdf">pdfアイコン</a>
  

• 別窓アイコン指定

  <a href="[URL]" class="window">別窓アイコン</a>
  

「記事タイトル」[詳細はこちら]指定

<p class="more"><a href="[URL]"><span>「記事タイトル」</span>[詳細はこちら]指定</a></p>

[ページの先頭へ]指定

<p class="up"><a href="#top">[ページの先頭へ]指定</a></p>

見出しスタイル

<span class="title">見出しスタイル【title】指定</span>

• marginが設定されている場合、<div>などのブロック要素につけると反映されます。
• marginが設定されている場合、同時に【db】(ブロック要素にする)を指定しても反映されます。
• 余白が欲しい時は外側の余白(margin)をつける内側の余白(padding)をつけるを参考にしてください。

枠スタイル

枠スタイル【linebox】指定

<span>タグ、<p>タグ、<div>タグ、<dl>タグ等に使います。
枠線・内側余白・薄い背景色がつきます。

<span class="linebox">枠スタイル【linebox】指定</span>

色合い等は各テンプレートデザインによって指定されているので、変更したい場合はスタイルシートの上書きをしてください。

.linebox{border:1px solid #[colorcode];background:#[colorcode];padding:20px;}

枠スタイル【linebox】指定

<p class="linebox">枠スタイル【linebox】指定</p>

枠スタイル【linebox】指定

タイトルと内容の2段レイアウトにできます。

<dl class="linebox"><dt>枠スタイル【linebox】指定</dt><dd>タイトルと内容の2段レイアウトにできます。</dd></dl>

<dd>タグの::before要素を使い、間に線が出てきます。
変更したい場合は下記のようにスタイルシートを上書きしてください▼

.linebox>dd::before{border-top:1px dashed #[colorcode];margin:10px 0;}

リンクボタン

<a>にクラス【a-btn】を指定します。

<a href="#a-linkbtn" class="a-btn">【a-btn】指定</a>

【a-btn】指定

幅をフリーにする場合はクラス【nw】を追加します。

<a href="#a-linkbtn" class="a-btn nw">【a-btn nw】指定<span>「width」「max-width」の幅指定が無くなります</span></a>

【a-btn nw】指定「width」「max-width」の幅指定が無くなります

注意事項や日付に使える

左側にマークや項目があり、右側に内容がインデント(字下げ)されたように表示される２カラム表示のリスト風スタイルに使える設定です。
「※」や「01」など、全角１文字分の場合はクラス【kome1】を指定します。
「注意」や「2013」など、全角２文字分の場合はクラス【kome2】を指定します。
「2013.01.01」や「2013年12月31日」など、日付に適した全角７文字内の場合はクラス【days7】を指定します。
これらは全て、指定したタグの子要素は
<span class="dt">～</span><span class="dd">～</span>
で構成します。
左側のマークもしくは項目を<span class="dt">～</span>で囲み、
右側の内容を<span class="dd">～</span>で囲む。

ソース

<span class="kome1">
<span class="dt">※</span>
<span class="dd">注意事項につかえる</span>
</span>

<span class="kome2">
<span class="dt">注意</span>
<span class="dd">注意事項につかえる</span>
</span>

<span class="days7">
<span class="dt">2013.01.01</span>
<span class="dd">日付に使える</span>
</span>

この設定は<dl>タグの構成にもそのまま使用できます▼

<dl class="kome1">
<dt>※</dt>
<dd>注意事項につかえる</dd>
</dl>

表示

kome1指定

※注意事項につかえる ※注意事項につかえる 01半角2文字も可能です。
改行しても揃っています。 02半角2文字も可能です。
改行しても揃っています。 10半角2文字も可能です。
改行しても揃っています。

kome2指定

注意注意事項につかえる 注意注意事項につかえる
２文字制限です。 2013半角4文字も可能です。
改行しても揃っています。 2012半角4文字も可能です。
改行しても揃っています。 2011半角4文字も可能です。
改行しても揃っています。

days7指定

2013年12月31日日付に使える
７文字制限です。 2013年01月01日日付に使える 2013年1月1日日付に使える
改行しても揃っています。 12月31日(火)日付に使える
改行しても揃っています。 2013.01.01日付に使える
改行しても揃っています。

<dl>タグに指定

※

注意事項につかえる
改行しても揃っています。
改行しても揃っています。

表示幅が狭い時はテーブル要素をブロックにする

<table>にクラス【s_clear】を指定すると、表示幅が狭い時はテーブル要素をブロックにします。

ソース

<table class="s_clear">
<tr><th>thの要素</th><td>tdの要素</td></tr>
<tr><th>thの要素</th><td>tdの要素</td></tr>
<tr><th>thの要素</th><td>tdの要素</td></tr>
</table>

表示

スライドして表示状態を切り替える

<dl>にクラス【box】を指定します。<dt>が切り替えになり、<dd>は初期非表示になります。

ソース

<dl class="box">
<dt>タイトル</dt>
<dd>
内容
</dd>
</dl>

表示している時<dt>にクラス【on】がつく。

表示

JavaScriptが使えていない状態だと、全て表示されます。

タイトル

内容

ルビ

【<ruby>】タグをつかいます。ルビ対象を【<rt>】タグで囲みます。
このタグには特にスタイルは設定されていません。
他のスタイル設定を指定したり、新しくスタイルを設定することをおすすめします。 ルビはブラウザによって見え方が多少違います。

ソース

私は<ruby>漢<rt>かん</rt>字<rt>じ</tr></ruby>
私は<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>を勉強します。

表示

私は漢かん字じを勉強します。
私は漢(かん)字(じ)を勉強します。