30daysトライアル要点まとめ Day11.Bootstrapを知る

CSS Peeperで個別要素を検証

 

解決します

・Bootstrapってなに?

・Bootstrapでできることが知りたい

・Bootstrapの使い方が知りたい

 

こんにちは、ワタリビト(wataribito)です。

30daysトライアルも中間の11日目に突入しましたね。

今日から数日間はBootstrapについて学んでいくので、学習の振り返りを含めて学んだことを書き留めます。

 

 

Bootstrapをおぼえると、すばやくレスポンシブが備わったWebページをつくれます。

早くつくれる=今までより工数が減る=労働時間が減る・回転率が高まる

つまり、時間換算の収入が増えたり、こなせる仕事の数がふえて稼ぎやすくなるんです。

 

もっと稼ぎたい、案件をこなして実力を積みたい人は、Bootstrapの学習をおすすめします?

 

30dayssトライアル Day5

30daysトライアルの要点まとめ Day5

09/14/2019
30daysトライアル Day4

30daysトライアル要点まとめ Day4

09/12/2019

 



そもそもBootstrapってなに?

 

Bootstrapとは

BootstrapはTwitter社が開発したCSSのフレームワークの一つです。

定義されたタグやコードを記述すると、完成されたパーツを組み合わせてWebページがつくれます。

 

…と言われても良く分かりませんよね?

簡単に言うと、「すでに完成している」ボタンなどのパーツを組み合わせるだけでWebページがつくれたり、レスポンシブデザインがわずかなコードの記述で設定できる便利機能です。

 

 

Bootstrapを理解して使えるようになると、Webページ制作の時間が短縮できるほかに、やりかた次第ではデザインが整ったシンプル~リッチなページを有料案件のレベルでつくることも可能ですよ?

 

それでは、Bootstrapについて1つづつ説明をしていきます。

 

Bootstrapでできること

 

Bootstrapは1つ1つピース(ボタンなどのWebページのパーツ)を組み込んでWebページがつくれる機能です。

パズルをイメージするとわかりやすいですね。

 

具体的には、特定のタグやクラスを打ち込むと、Bootstrapで定義でされている見た目のとおりに表示されます。

つまり、Bootstrapを利用すると簡単にCSSを設定できるということです。

オリジナルのCSSが必要なければBootstrapで事足ります。

 

Bootstrapでできること

・文字色やサイズの変更

・色付きの枠の表示

・ドロップダウンリスト作成

他にもいろいろ!

 

詳しくは公式ページで確認できます。

コンポーネント以下のAlertsやBaddeなどの項目がBootstrapで指定できるスタイルです。

 

Bootstrapをつかうための準備

 

Bootstrapを使うためには準備が必要です。

簡単なモノなので、10分もあればすぐにBootstrapを使えるようになります。

 

CDNという「ネット上に存在するSCCファイルを利用する」方法をつかいますが、詳しい仕組みは知らなくても大丈夫です?

 

CDNをつかってラクラク!

 

CDNとは、ネットワーク上に存在するBootstrapのCSSをindex.HTMLで読み込みする記述をして、フォルダの中にBootstrapのCSSファイルをつくらずに利用できる方法です。

 

以下の画像のコードをHTMLにコピペするとBootstrapを利用することができます。

 

*ちょっと解説

下記のコードがネット上に存在するBootstrapファイルをも見込むための記述です。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

 

そして、こちらがjQuery, Popper.jsを読み込むための記述。

Bootstrapではこれらの機能も使用するため、一緒に記述します。

(3行目のBootstrapの記述は上記の記述とは別のものです)

 

・jQuery読み込み

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

・Popper読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

・Bootstrap読み込み

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



BootstrapでWebページをつくろう

 

コピペができたら、あとはbodyタグの中にBootstrapの記述をしていけばOKです。

詳しくは公式ページのコンポーネントとユーティリティの項目を確認しましょう。

 

Bootstrapのちょっとした裏技

 

実はBootstrapは「必要な部分だけ切り出して使う」こともできます。

例えば、グリッドシステムの部分だけはBootstrapのものを利用して、ほかのCSSは自分で記述するといった具合です。

 

Bootstrapは仕事の現場ではほぼつ使われていないようですが、グリッドシステムだけは切り出して使うプロもいるようです。

 

Bootstrap切り出しについて

東京フリーランスより引用

 

便利な部分だけ切り取って利用できるのは便利ですね?

この使い方は、まずはBootstrapについて理解を深めてからのほうが良さそうです。

 

30dayssトライアル Day5

30daysトライアルの要点まとめ Day5

09/14/2019
30daysトライアル Day4

30daysトライアル要点まとめ Day4

09/12/2019

 



CSS Peeperで個別要素を検証

少しでもおもしろいと思ったらシェアお願いします?