ページ制作に役立つ便利な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の装飾指定一覧

このサイトの更新を受け取る

投稿者プロフィール

demomasterWordPressエンジニア
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わっています。
[ 著書 ]
・いちばんやさいいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー(パネラー)
2013 WordFesNagoya 実行委員 & セッションスピーカー