Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
【Bootstrap入門】Bootstrapでレスポンシブなサイトを1時間で作る Bootstrap tutorial | D4mations.com
  • Saturday , 31 October 2020

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

Code Canyon
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

3d Ocean

Related Posts

12 Comments

  1. しもむらともき
    October 6, 2020 at 16:50

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

  2. ガンギマリ猫
    October 6, 2020 at 16:50

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

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

  3. raiya yasunaga
    October 6, 2020 at 16:50

    モーダルの内容の変え方が調べてもわからなかったところだったのでとても助かりました

  4. リヨテラ
    October 6, 2020 at 16:50

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

  5. ちぃ
    October 6, 2020 at 16:50

    内容は良かったです!
    でも、声がちっせえ!

  6. easyアルフォンス
    October 6, 2020 at 16:50

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

  7. 富井隆史
    October 6, 2020 at 16:50

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

  8. 山形県長井ネット塾
    October 6, 2020 at 16:50

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

  9. 尾崎泉
    October 6, 2020 at 16:50

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

  10. Shaun
    October 6, 2020 at 16:50

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

  11. 朱夏
    October 6, 2020 at 16:50

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

  12. uko y
    October 6, 2020 at 16:50

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

Leave A Comment

You must be logged in to post a comment.