読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

クラス

Bootstrapの基本的な利用方法

  • 各要素にクラスを適用することにより書式指定を行います
img-circle
  • 画像を円形に切り抜かれて表示する
<h1>img要素にimg-circleのクラスを指定</h1>
<p><img src="img/wine.jpg" alt="" class="img-circle"></p>


jumbotron
  • 「ジャンボトロン」周囲を囲ってタイトルのように表示する
text-center
  • 文字を中央揃えで配置する書式
<div class="jumbotron text-center">
<h1>img要素にimg-circleのクラスを指定</h1>
<p><img src="img/wine.jpg" alt="" class="img-circle"></p>
</div>


クラスとCSS
  • Bootstrapを利用する場合は、CSSを記述する必要はありません
  • 「bootstrap.min.css」に、クラスが登録されています


《例》

.img-circle {
  border-radius: 50%;
}
.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.text-center {
  text-align: center;
}

Bootstrapを利用するにあたって必要となる知識は、クラスの適用方法を理解していること。

導入後の変化

  • 「bootstrap.min.css」には、h1やh2、blockquote、preなどの要素に対する書式指定も登録されています(クラスを指定しなくても、Bootstrap独自のデザインで表示される場合があります。)