見出し画像
Photo by noouchi

#22-26 Bootstrap

Minaki(Kredoを受講中)

Bootstrap Basics

containers: the most basic layout element. required when using the default system
→デフォルトでは<div class="container"></div>を使います。
スタイルを考えるときは、デスクトップ、タブレット、スマホなど表示画面のサイズに対応するように作らなければ見にくくてしかたありません。
例えば、<576pxサイズのExtra smallでは .containerは画面の100%に表示されますが、どれくらいのpxで表示されるかは画面サイズによります。画面サイズとpxの対応関係は次のサイトを参照。

以下ではスタイルを使用するためのsyntaxをおさらいします。
bootstrapでの色の指定方法は以下のサイトを参照。


・Background


cssのようにbackground-colorと書く必要なし。
class名前の横に<!--bg-指定したい色の名前-->を書きます

・Background gradient
class名内にbg-gradientと書く

Text
・Color
文字の色の場合は
text-指定したい色の名前
ex)<p class="text-primary">Text Primary</p>
この場合、Text Primaryは青色で表示されます。

・Font size= fs-1
fs-1からfs-6まで
ex) <p class="fs-1">font size value 1</p>

・Monospace
ex) <p class="monospace">font monospace</p>

・Font-weight= fw
Boldにする場合、フォントを細くしたい場合に使用
以下にsyntaxの一覧と、目安の数値を書きます
<p>Normal Text</p>                                                     <!--400-->
<p class="fw-bold">font weight value bold</p>　　   <!--700-->
<p class="fw-bolder">font weight value bolder</p>　<!--800-900 -->
<p class="fw-light">font weight value light</p>          <!--300 -->
<p class="fw-lighter">font weight value lighter</p>    <!--100 -->

・Font-style = fst
classにfst-italicというように書きます。elementを分けずに、その中だけでitalicとnormalの字体を混ぜて書く場合、inline elementの<span></span>をp tagの入れ子にして次のように書きます。
<p class= "fst-italic">text italic text italic <span class="fst-normal">normal text</span>text italic text italic
</p>

・Text-decoration = text-decoration
syntaxはtext-decoration-指定したい下線の種類です
ex)
下線：<p class="text-decoration-underline">text decoration value underline</p>
中線：<p class="text-decoration-line-through">text decoration value line-through</p>
線なし：<a href="" class="text-decoration-none">Learn More</a>

Grid System


Bootstrapではcontainers, rows, columnsをセットで使います。
containerが親要素。containerの中にrowが入り、さらにその中にcolumnを入れることで、elementを横並びで表示できるようになります。
入れられるcolumnは全部で12。
syntax と対応するアウトプットは次の通りです。


Grid Systemの見本syntax

classでcolのサイズを指定します。(col-1だと1列分、col-4だと4列分)

見本のsyntaxのアウトプット

colに続けてbg-で背景色を指定することもできます。

columnにはgutterというpaddingが含まれています。
例えば、それぞれのcolについて余白が欲しい場合は、colの親要素であるrowで余白のスタイルを指定します。

余白を指定する場合の見本syntax


上記のsyntaxのアウトプット

mb-1はmargin bottomのサイズを指定する役割、gx-1はrowのpaddingを指定する役割です。

また、次のようなコードの場合、画面の大きさにより表示のされ方が変わります。

見本のsyntax


画面がsm, xsの場合
画面サイズの意味については本稿冒頭のContainersのリンクを参照


画面がMD, LG, XL, XXLの場合


Typography


文字の大きさを指定するためのsyntaxは以下の2種類です。
1. "h1"(~h6)というclassを作成
ex) <p class="h1">h1. Bootstrap Heading</p>
2. display-1(~6)というclassを作成
ex) <h1 class="display-1">Display 1</h1>
     <p class="display-1 text-uppercase">the website</p>

Text-alignment


左寄せはtext-start, 中央ぞろえはtext-center, 右寄せはtext-rightです
ex)
<p class="text-start">Start</p>
<p class="text-center">Center</p>
<p class="text-end">End</p>

Text-transform


大文字、小文字、頭文字のみ大文字に指定する場合は以下の通り
<p class="text-lowercase">lowercase</p>
<p class="text-uppercase">uppercase</p>
<p class="text-capitalize">capitalize</p>


Image


画面サイズに合わせて写真もサイズが変わるようにするためには
img=fluidというclassを指定します。
ex)
<img src="assets/images/pexels-chevanon-1108099.jpg" alt="" class="img-fluid">
写真のスタイルを指定したいときは、そのclassに続けて必要なsyntaxを書きます。
ex)
<img src="assets/images/pexels-chevanon-1108099.jpg" alt="" class="img-fluid rounded-circle">
→この場合、写真の角が丸くなります。

今日はここまで！今回も読んでいただき、ありがとうございました。😊


筆者が受講中のKredoの公式ラインはこちらです。 未経験からwebエンジニアに転職した卒業生の方の体験記なども載っているので ぜひ覗いてみてください！

Kredoについて詳しく知りたい方はぜひこちらもご覧ください。＾＾



　　








この記事が気に入ったらサポートをしてみませんか？