「CSS」が学べる動画一覧

ウェブサイトの見た目を制御するために利用されるCSSについて学ぶことができるチャプターです。

チャプター一覧
(5:22)
無料公開中 HTML/CSS/Bootstrap
このレッスンでは、Webページの基礎となる、HTMLとCSSについて学んでいきます。ここでは、このレッスンの目的や対象者・進め方を確認します。また、Webページを作成するために必要となる、HTMLとCSS、Bootstrapの概略を説明します。




(6:48)
無料公開中 HTML/CSS/Bootstrap
ここでは、もう少ししっかりとしたWebページを作ります。先ほど作成したWebページは、HTMLの基本を説明するために、本来必要なタグをかなり省略していました。今回は、Webページを作るために、HTML5という最新の規格とBootstrapというHTMLフレームワークを使います。




(5:49)
無料公開中 HTML/CSS/Bootstrap
このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。




(6:48)
無料公開中 HTML/CSS/Bootstrap
ここでは、Webページの色を変えてみます。そのために、CSSの色指定について学習します。




(4:23)
ここでは、Webページのテキストのサイズや種類をCSSで設定する方法について学習します。




(5:00)
ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。




(4:28)
ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。




(6:19)
Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。




(6:41)
無料公開中 HTML/CSS/Bootstrap
ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。




(6:04)
無料公開中 HTML/CSS/Bootstrap
ここでは、Webページに箇条書きのリストを追加します。さらに、Bootstrapで箇条書きを使ってナビゲーションバーを作ります。このナビゲーションバーを使って、同じページ内でジャンプする方法も紹介します。




(5:48)
無料公開中 HTML/CSS/Bootstrap
ここでは、Webページに表を追加します。Bootstrapを使うと、見栄えの良い表を簡単に作ることができます。




(4:59)
無料公開中 HTML/CSS/Bootstrap
ここでは、会員登録や問い合わせなどに利用できるフォームを作ってみます。フォームを使えば、情報を見せるだけでなく、相手から連絡してもらうことができます。




(4:09)
無料公開中 HTML/CSS/Bootstrap
ここでは、複数行のテキストエリアとプルダウンリストといった、いくつかのパーツをフォームに追加してみます。このようなパーツも、Bootstrapを使うことで、カッコいいデザインを簡単に設定できます。




(5:06)
無料公開中 HTML/CSS/Bootstrap
Bootstrapのグリッドシステムを使って、フォームのレイアウトを整えてみましょう。




(5:57)
無料公開中 キャリア
ここでは、エンジニアがスキルをアピールするときに役立つポートフォリオページの作り方を説明します。HTMLとBootstrapを使って、具体的な作例を作りましょう。まずは、全体の構成とベースになるHTMLについて取り上げます。




(3:35)
無料公開中 キャリア
ここでは、ポートフォリオページで作品例を紹介するコーナーを作ります。そして、Bootstrapのグリッドの使い方をおさらいしましょう。




(5:17)
ここでは、ポートフォリオページにアピールポイントを紹介するコーナーを追加します。そして、Bootstrapで3つのアピールポイントをレイアウトしてみましょう。




(3:51)
ここでは、ポートフォリオページで一番目立つページのトップを作りたいと思います。そして、Bootstrapでこのようなレイアウトを実現するジャンボトロンを使ってみましょう。




ページの先頭へ戻る