alert
Success
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った
Sample Code
<div class= "e-box-alert e-box-alert--success" >
<div class= "e-box-alert__body" >
<p class= "e-box-alert__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
</div>
</div>
Warning
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った
Sample Code
<div class= "e-box-alert e-box-alert--warning" >
<div class= "e-box-alert__body" >
<p class= "e-box-alert__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
</div>
</div>
Error
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った
Sample Code
<div class= "e-box-alert e-box-alert--error" role= "alert" >
<div class= "e-box-alert__body" >
<p class= "e-box-alert__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
</div>
</div>
Information
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った
Sample Code
<div class= "e-box-alert e-box-alert--info" >
<div class= "e-box-alert__body" >
<p class= "e-box-alert__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
</div>
</div>
blockquote
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
Sample Code
<blockquote class= "e-blockquote" >
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
</blockquote>
box
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。
Sample Code
<div class= "e-box" >
<p> 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。</p>
</div>
ボックス（error）
ボックス（warning）
ボックス（info）
ボックス（success）
ボックス（$bg-color）
Sample Code
<div class= "e-box e-box--error" >
<p> ボックス（error）<br> このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>
<div class= "e-box e-box--warning" >
<p> ボックス（warning）<br> このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>
<div class= "e-box e-box--info" >
<p> ボックス（info）<br> このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>
<div class= "e-box e-box--success" >
<p> ボックス（success）<br> このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>
<div class= "e-box e-box--bg" >
<p> ボックス（$bg-color）<br> このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>
Default
navigate_before もっと見るnavigate_next もっと見る
もっと見る
Sample Code
<div class= "e-button-group" >
<button id= "button1" class= "ripple e-button e-button--primary" type= "button" ><i class= "material-icons is-icon-left" > navigate_before</i> もっと見る<i class= "material-icons is-icon-right" > navigate_next</i></button>
<button class= "ripple e-button e-button--primary is-hover" type= "button" > もっと見る
</button>
<button class= "ripple e-button e-button--primary is-disabled" type= "button" > もっと見る</button>
</div>
Secondary
navigate_before もっと見るnavigate_next もっと見る
もっと見る
Sample Code
<div class= "e-button-group" >
<button class= "e-button e-button--secondary" type= "button" ><i class= "material-icons is-icon-left" > navigate_before</i> もっと見る<i class= "material-icons is-icon-right" > navigate_next</i></button>
<button class= "e-button e-button--secondary is-hover" type= "button" > もっと見る</button>
<button class= "e-button e-button--secondary is-disabled" type= "button" > もっと見る</button>
</div>
Sample Code
<div class= "e-button-group" >
<button type= "button" class= "e-button" > もっと見る</button>
<button type= "button" class= "e-button" > もっと見る</button>
</div>
<div class= "e-button-group e-button-group--left" >
<button type= "button" class= "e-button" > もっと見る</button>
<button type= "button" class= "e-button" > もっと見る</button>
</div>
Sample Code
<div class= "e-button-group" >
<button type= "button" class= "e-button e-button--small" > もっと見る</button>
<button type= "button" class= "e-button e-button--medium" > もっと見る</button>
<button type= "button" class= "e-button e-button--large" > もっと見る</button>
</div>
card
Default
Sample Code
<div class= "e-card" >
<a href= "" >
<div class= "e-card__img" ><img src= "/assets/img/common/card.png" alt= "" ></div>
<div class= "e-card__body" >
<p class= "e-card__title" > 情に棹させば流される智に働けば角が立つ</p>
<p class= "e-card__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</a>
</div>
Sample Code
<form>
<table class= "e-form-table" >
<tr>
<th>
<label for= "name" > お名前<span class= "e-form-req" > 必須</span></label>
</th>
<td>
<div class= "e-form-cols e-form-cols--break" >
<div class= "e-form-col8" >
<input type= "text" name= "name" id= "name" value= "" class= "e-form-control js-required" aria-describedby= "name-tip" placeholder= "(例) 太郎" >
</div>
<div class= "e-form-message-box" >
<p class= "e-form-error-text" > お名前を入力してください。</p>
</div>
</div>
</td>
</tr>
<tr>
<th>
<label for= "inquiry" > お問い合わせ内容<span class= "e-form-any" > 任意</span></label>
</th>
<td>
<div class= "e-form-cols" >
<div class= "e-form-col12" >
<textarea name= "inquiry" id= "inquiry" cols= "40" rows= "10" class= "e-form-control" placeholder= "お問い合わせ内容を入力してください。" ></textarea>
</div>
<div class= "e-form-message-box" >
<p class= "e-form-small-text" > お問い合わせ内容を入力してください。</p>
</div>
</div>
</td>
</tr>
<tr>
<th> ご用件種別<span class= "e-form-req" > 必須</span></th>
<td>
<div class= "e-form-cols" >
<div class= "e-form-col12" >
<ul aria-describedby= "description1-1-tip" class= "e-form-rc-box" id= "description1-1" >
<li>
<input checked type= "radio" class= "e-form-control is-valid" name= "description1-1" id= "description1-1_radio1" value= "お問い合わせ" >
<label for= "description1-1_radio1" > お問い合わせ</label>
</li>
<li>
<input type= "radio" class= "e-form-control" name= "description1-1" id= "description1-1_radio2" value= "ご利用申し込み" >
<label for= "description1-1_radio2" > ご利用申し込み</label>
</li>
<li>
<input type= "radio" class= "e-form-control" name= "description1-1" id= "description1-1_radio3" value= "ご相談" >
<label for= "description1-1_radio3" > ご相談</label>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<th> ご用件種別<span class= "e-form-req" > 必須</span></th>
<td>
<div class= "e-form-cols" >
<div class= "e-form-col12" >
<ul aria-describedby= "description1-2-tip" class= "e-form-rc-box" id= "description1-2" >
<li>
<input type= "checkbox" name= "description1-2" class= "is-valid e-form-control" value= "お問い合わせ" id= "description1-2_check1" >
<label for= "description1-2_check1" > お問い合わせ</label>
</li>
<li>
<input checked type= "checkbox" name= "description1-2" class= "e-form-control" value= "ご利用申し込み" id= "description1-2_check2" >
<label for= "description1-2_check2" > ご利用申し込み</label>
</li>
<li>
<input type= "checkbox" name= "description1-2" class= "e-form-control" value= "ご相談" id= "description1-2_check3" >
<label for= "description1-2_check3" > ご相談</label>
</li>
</ul>
<div class= "e-form-message-box" >
<p class= "e-form-error-text" > ご用件種別を入力してください。</p>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th> ご用件種別 <span class= "e-form-req" > 必須</span></th>
<td>
<div class= "e-form-cols" >
<div class= "e-form-col12" >
<select name= "description1-3" id= "description1-3" value= "" class= "e-form-control" >
<option value= "" > 選択してください。</option>
<option value= "" > お問い合わせ</option>
<option value= "" > ご利用申し込み</option>
<option value= "" > ご相談</option>
</select>
<div class= "e-form-message-box" >
<p class= "e-form-error-text" > ご用件種別を入力してください。</p>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class= "e-button-group" >
<button type= "submit" class= "e-button e-button--xlarge" > 確認画面へ</button>
</div>
</form>
Sample Code
<div class= "e-form-step" >
<ol class= "e-form-step__body" >
<li class= "e-form-step__item is-active" ><span> お客様情報の変更</span></li>
<li class= "e-form-step__item" ><span> 変更内容の確認</span></li>
<li class= "e-form-step__item" ><span> 変更完了</span></li>
<li class= "e-form-step__item" ><span> 変更完了</span></li>
<li class= "e-form-step__item" ><span> 変更完了</span></li>
</ol>
</div>
heading
情に棹させば流される智に働けば角が立つ
情に棹させば流される智に働けば角が立つ
情に棹させば流される智に働けば角が立つ
情に棹させば流される智に働けば角が立つ
情に棹させば流される智に働けば角が立つ
情に棹させば流される智に働けば角が立つ
Sample Code
<h1 class= "e-heading1" > 情に棹させば流される智に働けば角が立つ</h1>
<h2 class= "e-heading2" > 情に棹させば流される智に働けば角が立つ</h2>
<h3 class= "e-heading3" > 情に棹させば流される智に働けば角が立つ</h3>
<h4 class= "e-heading4" > 情に棹させば流される智に働けば角が立つ</h4>
<h5 class= "e-heading5" > 情に棹させば流される智に働けば角が立つ</h5>
<h6 class= "e-heading6" > 情に棹させば流される智に働けば角が立つ</h6>
heading-unit
情に棹させば流される智に働けば角が立つ
6月12日 12:49
Sample Code
<div class= "e-heading-group" >
<h1 class= "e-heading1" > 情に棹させば流される智に働けば角が立つ</h1>
<p class= "e-heading-date" > 6月12日 12:49</p>
<ul class= "e-heading-tag e-list-tag" >
<li><a href= "" > タグ1</a></li>
<li><a href= "" > タグ2</a></li>
<li><a href= "" > タグ3</a></li>
<li><a href= "" > タグ4</a></li>
<li><a href= "" > タグ5</a></li>
<li><a href= "" > タグ6</a></li>
</ul>
</div>
images
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
Sample Code
<figure class= "e-img-box" >
<img src= "/assets/img/common/img1.png" alt= "" >
<figcaption class= "e-img-caption" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</figcaption>
</figure>
<p class= "e-text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
<div>
<figure class= "e-img-box is-img-left is-img-w33" >
<a href= "" class= "e-img-hover" ><img src= "/assets/img/common/img1.png" alt= "" ></a>
<figcaption class= "e-img-caption" > 情に棹させば流される。智に働けば角が立つ。</figcaption>
</figure>
<p class= "e-text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
<div class= "e-responsive-img" >
<figure class= "e-img-box" >
<img src= "/assets/img/common/img1.png" alt= "" >
</figure>
</div>
<div class= "l-unit visual-editor" >
<figure class= "is-img-left is-img-w25" >
<img src= "/assets/img/common/img1.png" alt= "" >
<figcaption class= "eimg-caption" > 情に棹させば流される。智に働けば角が立つ。</figcaption>
</figure>
<p> 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
Label
Pickup
Red
Brawn
Yellow
Pink
Blue
Light Green
Green
Orange
Purple
Sample Code
<span class= "e-label" > Pickup</span>
<span class= "e-label e-label--red" > Red</span>
<span class= "e-label e-label--brawn" > Brawn</span>
<span class= "e-label e-label--yellow" > Yellow</span>
<span class= "e-label e-label--pink" > Pink</span>
<span class= "e-label e-label--blue" > Blue</span>
<span class= "e-label e-label--light-green" > Light Green</span>
<span class= "e-label e-label--green" > Green</span>
<span class= "e-label e-label--orange" > Orange</span>
<span class= "e-label e-label--purple" > Purple</span>
list
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
Sample Code
<ul class= "e-list e-list--disc" >
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
<ul class= "e-list e-list--disc" >
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ul>
</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ul>
list-arrow
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
Sample Code
<ul class= "e-list e-list--arrow" >
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ol>
list-description
情に棹させば流される。
智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて
智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて
情に棹させば流される。
智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて
情に棹させば流される。
智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて
Sample Code
<dl class= "e-dl" >
<dt> 情に棹させば流される。</dt>
<dd> 智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
<dd> 智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
<dt> 情に棹させば流される。</dt>
<dd> 智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
<dt> 情に棹させば流される。</dt>
<dd> 智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
</dl>
list-img
Sample Code
<ul class= "e-list-img-vertical" >
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
</ul>
list-img-inline
Sample Code
<ul class= "e-list-img-horizontal" >
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
<li><a href= "" ><img src= "/assets/img/common/widget.png" alt= "" > </a></li>
</ul>
list-inline
Sample Code
<ul class= "e-list-inline" >
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
<li><a href= "" > 智に働けば</a></li>
</ul>
list-ordered
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
Sample Code
<ol class= "e-list e-list--decimal" >
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
<li> どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ol>
list-tag
Sample Code
<ul class= "e-list-tag" >
<li><a href= "" > タグ1</a></li>
<li><a href= "" > タグ2</a></li>
<li><a href= "" > タグ3</a></li>
<li><a href= "" > タグ4</a></li>
<li><a href= "" > タグ5</a></li>
<li><a href= "" > タグ6</a></li>
</ul>
Default
Sample Code
<div class= "e-media" ><a href= "" >
<div class= "e-media__img" ><img src= "/assets/img/common/media.png" alt= "" ></div>
<div class= "e-media__body" >
<p class= "e-media__title" > 情に棹させば流される智に働けば角が立つ</p>
<p class= "e-media__text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</a>
</div>
table
見出し
見出し
見出し
テキストが入ります
テキストが入りますテキストが入りますテキストが入ります
テキストが入ります
テキストが入ります
テキストが入りますテキストが入りますテキストが入ります
テキストが入ります
Sample Code
<table class= "e-table" >
<tr>
<th> 見出し</th>
<th> 見出し</th>
<th> 見出し</th>
</tr>
<tr>
<td> テキストが入ります</td>
<td> テキストが入りますテキストが入りますテキストが入ります</td>
<td> テキストが入ります</td>
</tr>
<tr>
<td> テキストが入ります</td>
<td> テキストが入りますテキストが入りますテキストが入ります</td>
<td> テキストが入ります</td>
</tr>
</table>
table-borderless
見出し
見出し
見出し
テキストが入ります
テキストが入りますテキストが入りますテキストが入ります
テキストが入ります
テキストが入ります
テキストが入りますテキストが入りますテキストが入ります
テキストが入ります
Sample Code
<table class= "e-table e-table--borderless" >
<tr>
<th> 見出し</th>
<th> 見出し</th>
<th> 見出し</th>
</tr>
<tr>
<td> テキストが入ります</td>
<td> テキストが入りますテキストが入りますテキストが入ります</td>
<td> テキストが入ります</td>
</tr>
<tr>
<td> テキストが入ります</td>
<td> テキストが入りますテキストが入りますテキストが入ります</td>
<td> テキストが入ります</td>
</tr>
</table>
table-small
タイトル
タイトル
タイトル
タイトル
テキスト
テキスト
タイトル
テキスト
テキスト
タイトル
テキスト
テキスト
タイトル
テキスト
テキスト
Sample Code
<table class= "e-table e-table--small" >
<tr>
<th class= "is-cell-25p" > タイトル</th>
<th> タイトル</th>
<th> タイトル</th>
</tr>
<tr>
<th> タイトル</th>
<td> テキスト</td>
<td> テキスト</td>
</tr>
<tr>
<th> タイトル</th>
<td> テキスト</td>
<td> テキスト</td>
</tr>
<tr>
<th> タイトル</th>
<td> テキスト</td>
<td> テキスト</td>
</tr>
<tr>
<th> タイトル</th>
<td> テキスト</td>
<td> テキスト</td>
</tr>
</table>
table-sp-block
見出し
テキストが入ります
見出し
テキストが入ります
Sample Code
<table class= "e-table e-table--sp-block" >
<tr>
<th> 見出し</th>
<td> テキストが入ります</td>
</tr>
<tr>
<th> 見出し</th>
<td> テキストが入ります</td>
</tr>
</table>
タイトル10%
タイトル15%
タイトル15%
タイトル15%
タイトル10%
タイトル
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト30vw
テキスト
テキスト
テキスト
テキスト
テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト50vw
Sample Code
<div class= "e-responsive-table" >
<table class= "e-table" >
<tr>
<th class= "is-cell-10p" > タイトル10%</th>
<th class= "is-cell-15p" > タイトル15%</th>
<th class= "is-cell-15p" > タイトル15%</th>
<th class= "is-cell-15p" > タイトル15%</th>
<th class= "is-cell-10p" > タイトル10%</th>
<th> タイトル</th>
</tr>
<tr>
<td> テキストテキスト</td>
<td> テキストテキスト</td>
<td> テキストテキスト</td>
<td> テキストテキスト</td>
<td> テキストテキスト</td>
<td><div class= "is-responsive-cell-30vw" > テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト30vw </div></td>
</tr>
<tr>
<td> テキスト</td>
<td> テキスト</td>
<td> テキスト</td>
<td> テキスト</td>
<td> テキスト</td>
<td><div class= "is-responsive-cell-50vw" > テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト50vw </div></td>
</tr>
</table>
</div>
typesetting
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。
情に棹させば流される。 智に働けば角が立つ。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。 とかくに人の世は住みにくい。 意地を通せば窮屈だ。 とかくに人の世は住みにくい。
Sample Code
<p class= "e-text" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。 </p>
<p class= "e-text-catchcopy" > 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。 </p>
<p class= "e-text" >
<span class= "is-text-sub" > 情に棹させば流される。</span><br>
<span class= "is-text-week" > 智に働けば角が立つ。</span><br>
<span class= "is-text-point" > どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</span><br>
<span class= "is-text-arrow" > とかくに人の世は住みにくい。</span><br>
<span class= "is-text-bold" > 意地を通せば窮屈だ。</span><br>
<span class= "is-text-strike" > とかくに人の世は住みにくい。 </span></p>
video
Sample Code
<div class= "e-video-container" >
<iframe width= "560" height= "315" src= "https://www.youtube.com/embed/MZyeTk5b4PQ?rel=0" frameborder= "0" allowfullscreen ></iframe>
</div>
video-map
Sample Code
<div class= "e-gmap" >
<iframe src= "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.323312243096!2d139.7670516!3d35.6811673!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1515111619588" width= "600" height= "450" frameborder= "0" style= "border:0" allowfullscreen ></iframe>
</div>
