styleguide
Style Guide
Bootstrap
Build fast, responsive sites with Bootstrap
Currently v5.0.0-beta1
Title
p fs-16 line-height: 1.875 lead-004
.title-page fs-24 メルセデスのオーナーになる、もう一つの道。
それは、メルセデスの基本を満たす唯一の認定中古車
サーティファイドカー。
.title-section-01 fs-20 設備について
それは、メルセデスの基本を満たす唯一の認定中古車
サーティファイドカー。
.title-section-02 fs-18 ■最大100項目にも及ぶ点検・整備
それは、メルセデスの基本を満たす唯一の認定中古車
サーティファイドカー。
.section-01_a fs-20 アフターサービス
みなさまが安心しておクルマにお乗りいただけるよう、メルセデス・ベンツを熟知したサービススタッフが対応いたします。
<section class="title-01">
<h2 class="title-main">熊本とともに60年。<br>いつまでも、これからも。</h2>
<p class="title-cap">歴史と伝統が紡いだおもてなしで<br>お客様をお迎えいたします。</p>
</section>Section
Container
Link color & target="_blank"
<a href="https://getbootstrap.com/" target="_blank" rel="noopener">https://getbootstrap.com/</a><section class="title-01">
<h2 class="title-main">熊本とともに60年。<br>いつまでも、これからも。</h2>
<p class="title-cap">歴史と伝統が紡いだおもてなしで<br>お客様をお迎えいたします。</p>
</section>Color
.text-default
.text-main
.text-accent
$default-text: #212121;
$mainColor: #692326;Font Family
.gothic 游ゴシック
.mincyo 游明朝体
gothic 游ゴシック fw-normal
gothic 游ゴシック fw-bold
mincyo 游明朝体 fw-normal
mincyo 游明朝体 fw-demibold
mincyo 游明朝体 fw-bold
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
Web Font
ff-europa Europa (Typekit)[Regular 400 Bold 700]
ff-playfair Playfair Display (Typekit)[Regular 400]
ff-futura Futura PT (Typekit)[Book 400]
Line Height
Anchor Link img-max.lh-season fs-14 ホテルの一流シェフたちが自信をもって贈る多彩な料理。うれしい「飲み放題」の特典も付いたお得なプラン。
.lh-season fs-14 mincyo 熊本ホテルキャッスルでは、
おすすめご宿泊プランをご用意しております。
//フォントサイズ+10px
.lh-season{
line-height: calc(1em + #{10 / $font-size-root-num}rem);
}btn
<a href="" class="btn btn-stern-01">リコール情報関連はこちら</a>Reset color
Muted text with a reset link.
<p class="text-danger">
Muted text with a <a href="#" class="text-reset text-decoration-underline">reset link</a>.
</p>Text decoration
This text has a line underneath it.
This text has a line going through it.
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="">This link has its text decoration removed</a>
<a href="#" class="td-hover-underline">This link has its hover text decoration</a>
<a href="#" class="text-decoration-underline">This link has its text decoration removed</a>table
| 採用形態 | フルタイム フルタイムフルタイム |
|---|
| 資格名 | 取得者数 |
|---|---|
| メルセデス・ベンツ 国際認定アドバイザー | 1名 |