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

解決します

・Bootstrapってなに？

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

・Bootstrapの使い方が知りたい

こんにちは、ワタリビト（wataribito）です。

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

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

DAY11.『Bootstrapの基本を学ぼう』

Bootstrapの仕組み、だいたい理解できました

index.HTMLに読み込みコードを記述して、表示させたいパーツやレイアウトのHTMLを記述すると、すでにデザインができ上がっているパーツが表示される

Bootstrap側のCSSをいじればアレンジが可能?#30DAYSトライアル pic.twitter.com/LvEb817vXX

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月19日

DAY11. 『Bootstrapの基本を学ぼう』完了しました

Bootstrap初体験だったけど大体は理解できました

簡単に言うと、出来合いのパーツを組み合わせてWebページがつくれるんですね

特にグリッドレイアウトの部分はBootstrapを使わなくなってもここだけ切り出してずっと使いたい?#30DAYSトライアル https://t.co/mnbFxsLFFt

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月19日

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

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

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

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

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

09/14/2019

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

09/12/2019

読みたい場所へジャンプ

そもそもBootstrapってなに？

Bootstrapとは

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

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

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

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

⏩Bootstrapとは？

簡単に言うと、ネット上に存在するCSSのテンプレート

index.HTMLに特定のコードとタグを記述すると、ネット経由でBootstrapが読み込まれ、すでに完成しているボタンやフォームなどのパーツを使える

テンプレの確認は?のリンクから#30DAYSトライアル https://t.co/TBEPByoGQN

— Wataribito?旅とWebと3DCG (@wataribito) 2019年9月19日

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

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

Bootstrapでできること

Bootstrapは１つ１つピース（ボタンなどの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>