スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

Well(囲み記事)の書式:Bootstrapコードまとめ



Well(囲み記事)の書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はWell(囲み記事)の書式です。

Wellとはコラムのような囲み記事で、コンテンツを背景色で囲みます。

Wellの作成

div要素又はp要素にclass「well」を適用します。

<div class="well">
  <h3>レスポンシブデザイン</h3>
  <p>パソコンだけではなく、スマートフォンやタブレットからでも見やすいホームページを制作する技術です。制作にはCSSの特別な知識が必要となります。
</p>
</div>
<p class="well">従来のパソコン用に最適化されたホームページだとスマ-トフォンなどの小さな画面からはとても見づらく、世の中の趨勢に合わせてホームページもスマフォユーザーに対応する必要があります。</p>

ブラウザでの表示

Well(囲み記事)の作成

余白や角丸のサイズを調整

背景色の囲みを大きくしたい場合はdiv要素又はp要素にclass「well-lg」、
小さくしたい場合はdiv要素又はp要素にclass「well-sm」を追加します。

HTML

<p class="well well-lg">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p>
<p class="well">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p>
<p class="well well-sm">画面サイズに応じてレイアウトを変化させる「レスポンシブデザイン」が主流となりつつあります。</p>

ブラウザでの表示

余白や角丸のサイズを調整