ページ制作に役立つ便利なCSS設定

ExUnit固有の設定

リードテキスト

HTML

<p class="veu_leadTxt">リードテキスト</p>

表示サンプル

リードテキスト

FAQ

HTML

<dl class="veu_qaItem">
<dt>質問1</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問2</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>

表示サンプル

質問1

回答回答回答回答回答回答

質問2

回答回答回答回答回答回答

業務の流れなど

HTML

<div>
<div class="veu_flowBox">
<dl>
<dt>お問い合わせ</dt>
<dd>まずはお気軽のお問い合わせください。</dd>
</dl>
</div>
<div class="veu_flowBox">
<dl>
<dt>納品・ご入金</dt>
<dd>納品いたしましたらご入金よろしくお願いいたします。</dd>
</dl>
</div>
</div>

表示サンプル

BootstrapのCSS設定

ボタン

HTML

<a href="#" class="btn btn-primary btn-lg">Large button</a> <a href="#" class="btn btn-default btn-lg">Large button</a>
<a href="#" class="btn btn-primary">Default button</a> <a href="#" class="btn btn-default">Default button</a>
<a href="#" class="btn btn-primary btn-sm">Small button</a> <a href="#" class="btn btn-default btn-sm">Small button</a>
<a href="#" class="btn btn-primary btn-xs">Extra small button</a> <a href="#" class="btn btn-default btn-xs">Extra small button</a>
<a href="#" class="btn btn-primary btn-lg btn-block">Large button</a> <a href="#" class="btn btn-default btn-lg btn-block">Large button</a>

表示サンプル

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Large button Large button

Gridレイアウト

HTML

<div class="row">
<div class="col-sm-6">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col-sm-6">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col-sm-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col-sm-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col-sm-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>

表示サンプル

---

テーブル

HTML

<table class="table table-responsive table-striped">
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容</td>
</tr>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容テーブル内容</td>
</tr>
</tbody>
</table>

表示サンプル

thead th	thead th
th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容
th テーブル項目	td テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容テーブル内容

枠線付きテーブル

HTML

<table class="table table-responsive table-striped table-bordered">
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容</td>
</tr>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容テーブル内容</td>
</tr>
</tbody>
</table>

表示サンプル

thead th	thead th
th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容
th テーブル項目	td テーブル内容テーブル内容テーブル内容。テーブル内容テーブル内容テーブル内容テーブル内容

その他の装飾

Bootstrapでは様々な装飾が予め用意されています。

Bootstrapの装飾指定一覧