見出し リンクがある場合

Heading1 Link - 28px

Heading2 Link - 22px

Heading3 Link - 18px

<h1 class="heading -lv1">Heading1 <a href="#">Link</a> - 28px</h1>
<h2 class="heading -lv2">Heading2 <a href="#">Link</a> - 22px</h2>
<h3 class="heading -lv3">Heading3 <a href="#">Link</a> - 18px</h3>

文章

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt libero ea repellat harum quas pariatur nobis, repellendus voluptatibus fugiat, dolores, officia distinctio magni repudiandae, ducimus eum recusandae velit dicta cumque.

女は、男よりも更に、道化には、くつろぐようでした。
自分がお道化を演じ、男はさすがにいつまでもゲラゲラ笑ってもいませんし、それに自分も男のひとに対し、調子に乗ってあまりお道化を演じすぎると失敗する（※強調1）という事を知っていましたので、必ず適当のところで切り上げるように心掛けていました（※強調2）が、女は適度という事を知らず、いつまでもいつまでも、自分にお道化を要求し、自分はその限りないアンコールに応じて、へとへとになるのでした。実に、よく笑うのです。（※太字）いったいに、女は、男よりも快楽をよけいに頬張る事が出来るようです。

smalltext - 11px

<p>女は、男よりも更に、道化には、くつろぐようでした。<br />
自分がお道化を演じ、男はさすがにいつまでもゲラゲラ笑ってもいませんし、それに自分も男のひとに対し、
<strong>調子に乗ってあまりお道化を演じすぎると失敗する</strong>（※強調1）という事を知っていましたので、
<em>必ず適当のところで切り上げるように心掛けていました</em>（※強調2）が、
女は適度という事を知らず、いつまでもいつまでも、自分にお道化を要求し、自分はその限りないアンコールに応じて、へとへとになるのでした。
<b>実に、よく笑うのです。</b>（※太字）いったいに、女は、男よりも快楽をよけいに頬張る事が出来るようです。</p>

<p><small class="text__weak">smalltext</small> - 11px</p>

左寄せ

中寄せ

右寄せ

<p class="text__left">左寄せ</p>
<p class="text__center">中寄せ</p>
<p class="text__right">右寄せ</p>

リスト

• 順不同リスト
• 順不同リスト
  • 入れ子になるパターン
  • 入れ子になるパターン

<ul class="ul">
<li>順不同リスト</li>
<li>順不同リスト
<ul class="ul">
  <li>入れ子になるパターン</li>
  <li>入れ子になるパターン</li>
</ul>
</li>
</ul>

1. 順序付きリスト
2. 順序付きリスト
3. 順序付きリスト
   1. 順序付きリスト
   2. 順序付きリスト

<ol class="ol">
<li>順序付きリスト</li>
<li>順序付きリスト</li>
<li>順序付きリスト
<ol class="ol">
<li>順序付きリスト</li>
<li>順序付きリスト</li>
</ol>
</li>
</ol>

dt

dd

これはタイトルです（dt）

これは内容です（dd）

<dl class="dl">
<dt>これはタイトルです（<code>dt</code>）</dt>
<dd>これは内容です（<code>dd</code>）</dd>
</dl>

その他リスト

• 注意書きや備考のリスト
• 自動で※が入ります

<ul class="note-list">
<li>注意書きや備考のリスト</li>
<li>自動で※が入ります</li>
</ul>

1. 順序付きリストにすると、順番と合わせて良い感じにします
2. 注釈のリストや参考文献などを想定しています

<ol class="note-list">
<li>順序付きリストにすると、順番と合わせて良い感じにします</li>
<li>注釈のリストや参考文献などを想定しています</li>
</ol>

• 行頭番号が無いリスト
• 独自で行頭番号をテキストで振る際に使用するかもですね
• 入れ子には対応しません

<ul class="plane-list">
<li>行頭番号が無いリスト</li>
<li>独自で行頭番号をテキストで振る際に使用するかもですね</li>
<li>入れ子には対応しません</li>
</ul>

横並びのリスト。「/」が区切り文字です

• リンゴ
• バナナ
• イチゴ

<ul class="flat-list">
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

ボタン

ボタン

ボタン(大)

<p><a href="#" class="button">ボタン</a></p>
<p><a href="#" class="button -large">ボタン(大)</a></p>
<p><a href="#" class="button -pale">ボタン(淡)</a></p>
<p><a href="#" class="button -pale -large">ボタン(淡/大)</a></p>

• 左寄せ、中寄せ、右寄せはラップする要素に text__centerやtext__rightのクラスを当ててください。

ボタン

<p class="text__center"><button type="button" class="button">ボタン</button></p>

メディア（画像 / 動画）

mediaを使ったレイアウト

mediaに-pull-leftクラスを付与すると左寄せ、-pull-rightが右寄せとなりdata-sp-break属性で、狭い画面の時は回り込みを解除することができます。

キャプションは上下どちらかにいれることができます。メディアを左寄せ or 右寄せにした場合、キャプションが入る場合は、メディア要素に、style属性で、幅を指定する方がよいでしょう。

<figure class="media -pull-left" data-sp-break="true" style="width: 300px;">
<img src="/share/img/dummy/top_dummy_banner1.png" alt="ダミー画像" />
<figcaption class="media__caption">これは左寄せの画像です。</figcaption>
<!-- /.media --></figure>

グリッド

.gridの直下には.grid__itemのみを設置してください。カラム数はdata-col属性で指定します。2,3,4カラムに対応しています。

狭い画面のときに段落ちさせたい場合は、data-sp-break属性で、狭い画面の時のカラム数を指定してください。true or 1で段落ち、数値の場合はそのカラム数に変化します。

• 次のカラムは、分かりやすいように背景色を付与していますが実際は背景色はありません。

<!-- 2カラム - 狭い画面時も2カラム -->
<div class="grid" data-col="2">
<div class="grid__item"></div>
<div class="grid__item"></div>
<!-- /.grid --></div>

<!-- 3カラム - 狭い画面時は段落ち -->
<div class="grid" data-col="3" data-sp-break="true">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<!-- /.grid --></div>

<!-- 4カラム - 狭い画面時は2カラム -->
<div class="grid" data-col="4" data-sp-break="2">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<!-- /.grid --></div>

背景色 / 高さ揃え

<div class="grid js-adjust-height" data-col="2">
<div class="grid__item -hasBgColor js-adjust-height__item">
<p>グリッドのカラムに背景色を付与したい場合は、<code>-hasBgColor</code>クラスを付与してください。</p>
</div>
<div class="grid__item -hasBgColor js-adjust-height__item">
<p>高さ揃えは、高さを揃えたいアイテムに<code>js-adjust-height__item</code>クラスを、ラッパー要素に<code>js-adjust-height</code>クラスを付与してください。次の<a href="#card">カード</a>の章で実際に高さ揃えをしているものがあります。</p>
<p>カラム数はグリッドと同じ <code>data-col</code>属性、狭い画面の時は <code>data-sp-break</code>属性で指定できるので、<code>.grid</code>に一緒に<code>.js-adjust-height</code>、<code>.grid__item</code>に<code>js-adjust-height__item</code>をあわせて指定するとカラム数が合わせられます。</p>
<p></p>
</div>
<!-- /.grid --></div>

カード

<section class="card">
<h1 class="card__title">タイトル</h1>
<div class="card__body">
<p>スタートクラスは１回限りの教室で、白崎茶会に初めてご参加される方対象のクラスです。地粉のフーガス（平焼きパン）を作っていただき地粉パンの基礎を学んでいただきます。このクラスにご参加いただくことにより白崎茶会のすべてのクラスへのご参加が可能となります。</p>
</div>
</section>

<section class="card js-adjust-height__item">
<h1 class="card__title">メディアあり</h1>
<p class="card__media">
<img src="/share/img/dummy/top_dummy_banner1.png" alt="dummy" />
</p>
<div class="card__body">
<p><code>card__media</code>の中のアイテムは幅いっぱいに表示されます。幅が狭い画像は引き伸ばされます。<code>img</code>と<code>iframe</code>に対応していて、<code>iframe</code>の場合は、<code>-iframe</code>を付与してください。</p>
<p><code>iframe</code>は通常4:3ですが、<code>-wide</code>を付与すると、16:9となります。</p>
<p class="text__center"><a href="#" class="button">詳細を見る</a></p>
</div>
</section>

<section class="card js-adjust-height__item">
<h1 class="card__title">スタートクラス</h1>
<div class="card__body">
<p>スタートクラスは１回限りの教室で、白崎茶会に初めてご参加される方対象のクラスです。地粉のフーガス（平焼きパン）を作っていただき地粉パンの基礎を学んでいただきます。このクラスにご参加いただくことにより白崎茶会のすべてのクラスへのご参加が可能となります。</p>
<div class="text__attention">
<p>このクラスにご参加いただくことにより白崎茶会のすべてのクラスへのご参加が可能となります。</p>
</div>
</div>
</section>

<section class="card js-adjust-height__item">
<div class="card__body">
<p>タイトル無しも可能です。また <code>card__media</code>は <code>card__body</code>の下に配置することも可能です。</p>
</div>
<p class="card__media -iframe -wide">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GzLvqCTvOQY" frameborder="0" allowfullscreen></iframe>
</p>
<div class="card__body">
<p>そしてまた<code>card__body</code>を入れることもできます。</p>
</div>
</section>

テーブル

<table class="table -thCol">
<tbody>
<tr>
<th>講師</th>
<td>和井田美奈子・菊池美咲・白崎祐子</td>
</tr>
<tr>
<th>場所</th>
<td><p>葉山町の一色海岸沿いの古民家。逗子駅より海岸周りのバスで１５分。
バス停（三ヶ下海岸下車）から海岸沿いを歩いて２分ほどです。</p>
<p>お車でお越しの場合は、近隣のコインパーキング等をご利用ください。
開催場所の詳しい住所と連絡先等は、お申し込みいただいた方にメールにてお知らせさせていただきます。</p></td>
</tr>
</tbody>
</table>

<div class="tableScrollable">
<table class="table -thRow tableScrollable__table">
<tbody>
<tr><th>講師1</th><th>講師2</th><th>講師3</th><th>講師4</th><th>講師5</th></tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus minima magni numquam impedit quia unde earum ipsa itaque sed labore velit, commodi ratione nesciunt aut exercitationem incidunt debitis, soluta autem.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptas, doloribus a corporis? Cupiditate beatae, impedit iure architecto magnam debitis numquam dicta voluptatem. Ratione architecto eveniet, nesciunt quae eligendi. Rem!</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, ipsam earum? Eaque dicta quia error mollitia a nulla voluptatum repellat aliquid ad ab. At pariatur tempora id ab impedit, beatae.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt alias, explicabo ipsa nesciunt non adipisci natus iste amet quasi earum doloribus tempore? Deserunt eaque, sequi ex quos voluptate voluptatum dignissimos.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis velit, distinctio iste repellat libero molestiae atque, magnam quasi, sequi voluptatem perferendis alias in iusto placeat enim ex aliquam laudantium nihil!</td>
</tr>
</tbody>
</table>
</div>

ページネーション

前の記事へ 次の記事へ

スクロールでフェードインする

スクロールでコンテンツの上部一割に達した時点で、透明度が変化してフェードインするブロックには、data-js-fade-in属性をtrueにしてください。

<div data-js-fade-in="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste perferendis, quae praesentium! Amet ipsum laudantium tempora laboriosam, veritatis aliquam atque nobis magnam officia tenetur magni, dolorum omnis fuga, commodi explicabo!</p>
</div>

お知らせ一覧

フォーム

ご記入が終わりましたら、内容確認画面へお進みください。

確認画面を見せる