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

  • 〒824-0001
  • 福岡県行橋市行事5丁目3−20
  • TEL : 0930-55-2416

フロートとセンターブロックの書式:Bootstrapコードまとめ



フロートとセンターブロックの書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はフロートとセンターブロックの書式です。

フロートの書式

要素をフロートで左寄せする場合はclass「pull-left」を適用、
右寄せはclass「pull-right」を適用します。

また、子要素に指定されている回り込みを解除するには、class「clearfix」を適用します。

<h1 class="page-header">フロートの指定</h1>
<div class="clearfix">
  <img src="images/tomato002.jpg" class="pull-left" style="width:200px;margin-right:15px;">
  <h3 style="margin-top:0">トマト</h3>
  <p>トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。</p>
</div>
<p>また、その果実のこと。多年生植物で、果実は食用として利用される。</p>

ブラウザでの表示

フロートの書式

センターブロックの書式

要素を中央に配置する場合はclass「center-block」を適用します。
この場合、要素の幅を(width)をCSSで指定する必要があります。

HTML

<h1 class="page-header">センターブロック</h1>
<div class="well center-block" style="width:50%;">
  <h4>トマト</h4>
  <p>トマト(学名:Solanum lycopersicum)は、南アメリカのアンデス山脈高原地帯(ペルー、エクアドル)原産のナス科ナス属の植物。</p>
</div>
<img src="images/tomato002.jpg" class="center-block" style="width:50%;">

ブラウザでの表示

センターブロックの書式