Mile Stones

駆け出しのWebデザイナーが知って得した情報を紹介します。

Web Design / Frontend / Backend / Code Management

Bootstrapを使ったフロントエンド開発入門【スタイリング編】

f:id:yonetggp:20190512234734j:plain

BootstrapではWeb制作で頻繁に使うタイポグラフィー、画像、表組み、フォントサイズ、マージン、パティングなどのスタイルが予め設定されています。これらの定義済みスタイルを用いることで高速に要素のスタイリングができます。

解説の内容は以下Codepenにサンプルを用意しているので適宜見比べながら読んで頂ければと思います。


See the Pen
bootstrap_style
by Tim_Yone (@kazuki-yonemoto)
on CodePen.


見出しの定義済みスタイル

Bootstrapにはh1~h6までの見出しのスタイルが既に設定されています。見出しの場合、クラスを設定しなくてもBootstrapのスタイルが調整されます。
f:id:yonetggp:20190515013642p:plain

見出しに対して副題を付けたい場合は 副題をsmallタグで囲みtext-muted と呼ばれるクラスを付与します。

<h3>Heading3 <small class="text-muted">Sub Heading</small></h3>

見出しをさらに目立たせたい場合は次のようにdisplay-{1~4}の4段階でクラス分けしてサイズを調整することができます。

<h1 class="display-1">display-1</h1>
<h2 class="display-2">display-2</h2>
<h3 class="display-3">display-3</h3>
<h4 class="display-4">display-4</h4>

f:id:yonetggp:20190515013952p:plain

テキストの定義済みスタイル

テキストのなかで文字を目立たせたい場合などはleadクラスを付与します。次の場合"Normal text"が通常の表示、"Lead text"がleadクラスを入れたものの比較になります。leadクラスではフォントサイズが1.25rem, フォントウェイト(文字の太さ)が300に定義されています。

f:id:yonetggp:20190515014811p:plain

<p>Normal text</p>
<p class="lead">Lead text</p>

リストの定義済みスタイル

リストの表示では基本縦並びに表示されます。しかし、実際にはリストを横に並べたいパターンが多いかと思います。
そこでBootstrapではlist-inlineクラスをulタグに、list-inline-itemクラスをliタグに付与することでリストをインライン要素(つまり横並び)で表示させることができます。

<ul class="list-inline">
    <li class="list-inline-item">List Inline1</li>
    <li class="list-inline-item">List Inline2</li>
    <li class="list-inline-item">List Inline3</li>
    <li class="list-inline-item">List Inline4</li>
    <li class="list-inline-item">List Inline5</li>
</ul>

画像の定義済みスタイル

レスポンシブ対応する場合、画像の縦横比を維持したまま画像を伸縮させたいことがあるかと思います。コンテンツ(親要素)のいっぱいまで画像を表示させる場合はimg-fluidクラスをimgタグに付与します。

画像に対してサムネイル(枠)を付けたい場合はimgタグにimg-thumbnailクラスを付与します。

<img class="img-fluid" src="画像のパス" alt="画像のALT">
<img class="img-fluid img-thumbnail" src="画像のパス" alt="画像のALT">

f:id:yonetggp:20190519131200p:plain

テーブルの定義済みスタイル

テーブル要素にtableクラスを付与することでレスポンシブに対応した幅調整が簡単に行えるようになります。
tableクラスに設定されているプロパティがこちらです。

.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

さらにtable-darkクラスを利用することで簡単にテーブルを暗色モードに切り替えることが可能です。またテーブルのデザイン表現で縞模様(ストライプ)で色付けするパターンが多いですが、このような表現もtable-stripedクラスで実現することができます。他にも罫線を無くしたい場合、table-borderlessクラスを利用したり、テーブルのマウスオーバー表現もtable-hoverクラスというものが予め用意されています。

<table class="table table-dark">
    <thead>
      <tr>
        <th>Table Heading1</th>
        <th>Table Heading2</th>
        <th>Table Heading3</th>
        <th>Table Heading4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
    </tbody>
  </table>

図表の定義済みスタイル

図表をHTMLでマークアップする際にはfigure要素を利用することが多いかと思います。
figure要素にはfigureクラス、img要素にはfigure-imgクラス、figurecaption要素にはfigure-captionクラスという定義済みのクラスが用意されています。これらを使うことで基本的なスタイルを適用することが可能になります。

<figure class="figure">
    <img  class="figure-img img-fluid d-block" src="画像パス" alt="Sample Figure">
    <figurecaption class="figure-caption">Caption</figurecaption>
</figure>

これまで説明したようにBootstrapでは定義済みスタイルを如何に利用することができるかで大幅な制作工数の削減が変わってくるかと思います。他にもここでは紹介し切れていない定義済みスタイルがありますので用途に応じて調べてみてください。