1. paizaラーニングトップ
  2. 「Bootstrap」が学べる動画一覧

「Bootstrap」が学べる動画一覧

Bootstrapとは、モバイルファーストなレスポンシブWebをすばやくデザイン・カスタマイズできるフレームワークのことです。
※初めてpaizaラーニングを使う方は、動画学習を始める前にこちらをご覧ください。

チャプター一覧

(5:42)
LAMP環境上に設置したWeb掲示板をカスタマイズしていきます。
(5:22)
無料公開中
このレッスンでは、Webページの基礎となる、HTMLとCSSについて学んでいきます。ここでは、このレッスンの目的や対象者・進め方を確認します。また、Webページを作成するために必要となる、HTMLとCSS、Bootstrapの概略を説明します。
(6:35)
無料公開中
ここでは、もう少ししっかりとしたWebページを作ります。先ほど作成したWebページは、HTMLの基本を説明するために、本来必要なタグをかなり省略していました。今回は、Webページを作るために、HTML5という最新の規格とBootstrapというHTMLフレームワークを使います。
(5:49)
無料公開中
このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。
(4:28)
無料公開中
ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。
(6:19)
無料公開中
Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。
(6:41)
無料公開中
ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。
(6:04)
無料公開中
ここでは、Webページに箇条書きのリストを追加します。さらに、Bootstrapで箇条書きを使ってナビゲーションバーを作ります。このナビゲーションバーを使って、同じページ内でジャンプする方法も紹介します。
(5:48)
無料公開中
ここでは、Webページに表を追加します。Bootstrapを使うと、見栄えの良い表を簡単に作ることができます。
(4:59)
無料公開中
ここでは、会員登録や問い合わせなどに利用できるフォームを作ってみます。フォームを使えば、情報を見せるだけでなく、相手から連絡してもらうことができます。
(4:09)
無料公開中
ここでは、複数行のテキストエリアとプルダウンリストといった、いくつかのパーツをフォームに追加してみます。このようなパーツも、Bootstrapを使うことで、カッコいいデザインを簡単に設定できます。
(5:06)
無料公開中
Bootstrapのグリッドシステムを使って、フォームのレイアウトを整えてみましょう。
(5:18)
このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、スマートフォン対応と日本語表示を実現します。 まず初めに、HTMLテンプレートのBootstrapを導入します。
(4:22)
ここでは、BootstrapでRailsアプリをレスポンシブデザインにします。そして、テーブルやボタン・フォームにBootstrapのスタイルを適用します。
(3:47)
無料公開中 Django
ここでは、Djangoでテンプレートとフォームを使う概要を学習します。そして、掲示板アプリケーションに、どのように利用するのか確認します。
(5:49)
無料公開中 Django
ここでは、Djangoで複数のテンプレートを利用する場合、その共通部分をまとめる方法について学習します。共通部分をまとめると、Webデザインの作成やメンテナンスを効率よく進めることができます。
(4:15)
ここでは、Djangoで作る掲示板アプリケーションに、HTMLテンプレートのBootstrapを適用します。Bootstrapを利用すると、Webアプリケーションのデザインを簡単にレベルアップさせることができます。
(4:37)
ここでは、Bootstrapを利用して掲示板アプリケーションの見栄えを整えます。Bootstrapには、テーブルタグやボタンに見栄えの良いスタイルが用意してあります。これを利用すれば、アプリケーションのデザインを簡単にレベルアップできます。
(5:50)
ここでは、Lunchmapアプリの共通テンプレートを用意します。HTMLフレームワークのBootstrapを導入して、ナビゲーションバーを追加します。
(4:11)
無料公開中 Laravel
ここでは、Laravelでビューとフォームを使う概要を学習します。そして、掲示板アプリケーションに、どのように利用するのか確認します。
(5:53)
ここでは、Laravelで作る1行掲示板に、HTMLテンプレートのBootstrapを適用します。Bootstrapを利用すると、Webアプリケーションのデザインを簡単にレベルアップさせることができます。
(4:11)
ここでは、Bootstrapを利用して掲示板アプリケーションの見栄えを整えます。Bootstrapには、テーブルタグやボタンに見栄えの良いスタイルが用意してあります。これを利用すれば、アプリケーションのデザインを簡単にレベルアップできます。
ページの先頭へ戻る