ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
Bootstrap 5入門
レスポンシブに対応したWebサイトを素早く作るためのツールであるBootstrapについて学習していきます。
0%
動画レッスン一覧
(21)
質問と回答
(9)
#01 Bootstrapを使ってみよう
(02:11)
無料公開中
公式サイトの確認
完成版の確認
Bootstrapに関する注意点
未完了
#02 スターターテンプレートを使おう
(02:51)
無料公開中
index.html の作成
スターターテンプレートの導入
未完了
#03 containerクラスを使ってみよう
(02:48)
無料公開中
container
bg-primary
containerの仕様確認
未完了
#04 コンテンツの幅を調整してみよう
(02:37)
無料公開中
container-md
container-fluid
bg-secondary
bg-success
未完了
#05 複数カラムのレイアウトを作ってみよう
(02:58)
無料公開中
row
col
未完了
#06 グリッドシステムを使ってみよう
(02:58)
グリッドシステム
col-8
col-4
col-md-6
未完了
#07 3カラムのレイアウトを組んでみよう
(02:54)
col-md-4
col-md-8
col-lg-2
col-lg-8
未完了
#08 表示/非表示を切り替えてみよう
(01:45)
d-none
d-lg-block
未完了
#09 ユーティリティ的なクラスを使ってみよう
(02:41)
Background
Colors
Borders
Text
未完了
#10 paddingやmarginを操作してみよう
(02:20)
padding に関するクラス
margin に関するクラス
未完了
#11 実践的なレイアウトを組んでみよう
(02:26)
section
カラム幅の調整
余白の調整
未完了
#12 ヘッダーを配置してみよう
(02:37)
headerの配置
pg-primary
text-center
text-light
p-5
fs-3
mt-5
未完了
#13 フッターを配置してみよう
(01:53)
footerの配置
bg-secondary
text-center
text-light
p-5
mt-5
未完了
#14 リストグループを配置してみよう
(02:00)
リストグループの配置
テキストの書き換え
未完了
#15 見出しのスタイルを整えよう
(02:12)
h1の配置
fs-4
border-bottom
pb-2
mb-3
未完了
#16 表のスタイルを整えてみよう
(02:23)
tableの配置
table-striped
table-bordered
未完了
#17 ボタンを配置してみよう
(02:53)
buttonの配置
btn
btn-primary
btn-sm
headerの配置
未完了
#18 フレックスボックスを使ってみよう
(02:43)
d-flex
align-items-center
h1の位置調整
buttonの位置調整
未完了
#19 アイコンを使ってみよう
(02:50)
CSSの読み込み
アイコンの配置
アイコンのスタイリング
未完了
#20 ナビゲーションバーを配置しよう
(02:42)
ナビゲーションバーの配置
テキストの書き換え
未完了
#21 サイトを完成させよう
(02:51)
navbar-expandmd
navbar-dark
pg-primary
未完了
#01 Bootstrapを使ってみよう
BootstrapはCSSフレームワークと言われていますがJSも使用しているからJSライブラリでもありますか?
2023年6月14日
日本語版の公式サイトがあるようですが、英語版と違いはありますか?
2022年1月27日
#06 グリッドシステムを使ってみよう
HTML/CSS や Bootstrap の幅の比率の基準はすべて 12 なのですか?
2022年1月27日
#17 ボタンを配置してみよう
section タグの使い方について教えてください。
2024年8月20日
#18 フレックスボックスを使ってみよう
header の class 属性に justify-content-between を使用しても良いですか?
2023年8月7日
ms-auto を me-0 にするとうまく行かないのはなぜですか?
2022年1月27日
#19 アイコンを使ってみよう
Bootstrap で用意されたクラスで、自分で用意した画像をアイコンとして表示する方法はありますか?
2023年6月22日
#20 ナビゲーションバーを配置しよう
Bootstrap だけで全てを表現するのは難しいのですか、また CSS も併用して表現するのですか?
2023年6月14日
Bootstrap 記載のコードに navbar-light がないのですがバージョンが古いからですか?
2022年9月24日
リリース情報(note)
『Bootstrap 5入門』をリリースしました。
詳細情報
最終更新日
2021年6月17日
バージョン情報
Chrome 88 / Visual Studio Code 1.53.2 / Bootstrap 5.0.1