【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial


https://i.ytimg.com/vi/fou-ZR9LhGM/hqdefault.jpg



作ったサイト
https://shimotmk.com/BootStrap-YouTube-lp/

回答コード例:index.html
https://drive.google.com/open?id=1JB0J3Qg7sSVQ10aO8G-co415H-04-l6l

BootStrap公式サイト
https://getbootstrap.com/

この動画を元に書籍化しました!
よかったらご覧ください
https://amzn.to/2VowuY7

Kindle Unlimitedに入れば無料です
https://amzn.to/3eGY4rx

✅目次
00:00 イントロ
03:27 ナビゲーションバーを作る
06:48 スライダーを作る
11:12 3つの特徴を作る(column)
14:27 お客様の声を作る(Flex)
20:46 タブを作る(nav-tabs)
29:17 YouTubeの埋め込みを作る(embed)
30:54 モーダル(modal)
41:22 Bootstrapカード(card)
45:47 アコーディオン(accordion)
48:14 お問い合わせ(validation-form)
53:27 footerを作る

■使ったコンポーネント
Navbar
https://getbootstrap.com/docs/4.4/components/navbar/#nav

Carousel Slides
https://getbootstrap.com/docs/4.4/components/carousel/#with-captions

Row columns
https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Flex
https://getbootstrap.com/docs/4.4/utilities/flex/

nav tab
https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior

Embeds
https://getbootstrap.com/docs/4.4/utilities/embed/

modal
https://getbootstrap.com/docs/4.4/components/modal/#vertically-centered

Cards
https://getbootstrap.com/docs/4.4/components/card/

Accordion
https://getbootstrap.com/docs/4.4/components/collapse/#accordion-example

Bootstrapのおすすめ動画はこちら
・Bootstrap 4入門 #01:コンテナとスペーシング

・Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

・Build A Complete HTML & CSS Website with Bootstrap 4

チャンネル登録はこちら😌
https://www.youtube.com/channel/UChbGtmE4qQP_HrPqMCxgoxw?sub_confirmation=1

———————————————————————–
SNS
———————————————————————–

【Twitter】

【Portfolio】
https://shimotmk.com/Portfolio/

【お問い合わせフォーム】
https://forms.gle/PfiFd68r32R6kiv58

【BLOG】
https://shimotmk.com/

【BLOG】
http://nabla72.com/

■ お知らせ
Web制作や動画編集の営業マンを募集しています!
興味のある方はこちらの動画をご覧ください

■ 販売しているもの
ゼロからはじめる はじめてのWordPress自作テーマ制作
https://amzn.to/2UEmXv4

Kindle Unlimitedなら無料で読めます
https://amzn.to/2wGjWlY

———————————————————————–
使用機材
———————————————————————–

■ 映像
MacBook Pro
https://amzn.to/2JjEgw5

■ 音声
SHUREマイク
https://amzn.to/2WLFKal

■編集ソフト
Adobe Creative Cloud
https://amzn.to/2wFXI3u

Original source

12 thoughts on “【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial

  • October 6, 2020 at 16:50
    Permalink

    初見です!とても参考になりました!

    質問なのですが、お問い合わせのボタンを中央に寄せるにはどうすればいいですかね?

  • October 6, 2020 at 16:50
    Permalink

    19:49あたりの <col-md-6 col-12 p-0 align-self-center h3 p-4>のコードですが、
    p-0の後にp-4を書き足してますが、前者は消してもいいですか?
    あとcol-12も消しても動作変わりませんでした。

  • October 6, 2020 at 16:50
    Permalink

    モーダルでミスったとこはどこをミスっていたのか、コードのどの部分を直したのかなど細かく解説していただけるとよかったです。全文見てクリアできました。

  • October 6, 2020 at 16:50
    Permalink

    こんにちは
    スライドショーの画像の部分なのですが、自分でネットから拾ってきたものだと、サイズがバラバラになってしまうのですが
    その時は、直接CSSで調整すればよいのでしょうか?

  • October 6, 2020 at 16:50
    Permalink

    今までで一番実践的で分かりやすいです。これからも事例を元に解説して頂ければ嬉しいです!自分でコードを書いてアップロードするのが夢でした。昨日ともきさんのおかげで夢が叶いました。ありがとうございます。

  • October 6, 2020 at 16:50
    Permalink

    動画拝見しました。すごくわかりやすくて参考になりました。ウェブの模写をしているのですが、bootstrapの使い方が良くわからなかったのでHTMLとCSSで進めていたのですが上手くいきませんでした。これはbootstrapを勉強せねばと思っていたところにこちらの動画に出会いました。その晩マナブさんのTwitterにしもむらさんのお名前が出てきましたので、秒でチャンネル登録させていただいましたwありがとうございました。

  • October 6, 2020 at 16:50
    Permalink

    bootstrapの勉強を始めたばかりだったので、非常に参考になりました!ありがとうございます!!!

  • October 6, 2020 at 16:50
    Permalink

    こんにちは😃
    私もbootstrapよく使っていますが、しもむらさんの動画の書き方めっちゃ参考にさせていただいています。
    わかりやすい!

  • October 6, 2020 at 16:50
    Permalink

    おぉ✨
    まさに今Bootstrapの学習しているので助かります🙇‍♂️
    動画見ながら模写してみます☺️
    ありがとうございます!

Leave a Reply