Bootstrap

Bootstrapセカンドページの土台を作ろう!
セカンドページを構築するための準備を学んでいきます。ナビゲーションを変更して、階層を作って、リンクを修正していきます。
TRY to MAKE
Bootstrapメニュー固定と戻るボタンを作ろう
サイトの可読性や操作性を上げるため、ナビゲーションの固定とページTOPに戻るボタン設置を学びましょう。
TRY to MAKE
BootstrapFooterを作っていこう
BootstrapでFooterエリアを作りましょう!全ページのリンクやSNSボタンなど外部コンテンツへの誘導、著作権表記などを組み込みます。
TRY to MAKE
Bootstrapお問合せ(電話)ボタンを作ろう
Bootstrapのアイコンを使ってお問合せ(電話)ボタンを作ろう!スマホで電話を掛けられるよう、Displayで表示・非表示を学びます。
TRY to MAKE
Bootstrapお知らせリストを作ろう
Bootstrapの「リスト」を作って、お知らせとお問合せを2カラムで作ります。見やすくするために仕切り線も作ります。
TRY to MAKE
Bootstrapテーブルをつくろう
エクセルでも使われるテーブルをBootstrapでも利用できます。tableタグでフロアガイドを作っていきましょう。
TRY to MAKE
Bootstrap空白カラム(Offset)を学ぼう
Bootstrapのoffset(空白カラム)を使って、1カラムレイアウトを作ります。背景画像を暗くする方法も学びます。
TRY to MAKE
Bootstrapグリッドシステムを学ぼう
Bootstrapのグリッドシステムを学んで、いろんなレイアウトの組み方を学びます。また入れ子レイアウトも一緒に学びます。
TRY to MAKE
Bootstrapカードデザインを学ぼう
Bootstrapカードデザインは、柔軟性や拡張性が高いコンテナなので、画像を組み込んだり、線を消したりして、素敵なデザインを作ります。
TRY to MAKE
Bootstrapコンテナに背景をいれよう
bootstrap幅いっぱいのコンテナを学んで、cssを使って背景画像とカラーコード、テキストをいれてみよう!
TRY to MAKE
Bootstrap見出し(タイトル)を入れてみよう
Bootstrapで見出しを作っていきます。タイトル名を見出しとしてマークアップする方法や、見出しタグのルールを学びます。
TRY to MAKE
Bootstrap余白を作ろう
Bootstrapでpaddingやmarginで余白を作りましょう。どこにどのくらい余白を入れるかを考え、クラス名の指定方法も学びます。
TRY to MAKE
Bootstrapブレイクポイントとモバイルフレンドリー
Bootstrapのレスポンシブ対応の際に、どのサイズでレイアウトを変えるかを指定できる、ブレイクポイント(トリガー)を学びましょう。
TRY to MAKE
Bootstrapレスポンシブデザインを学ぼう
レスポンシブ対応とは何かを学んで、レイアウトを実践で組んでいきましょう。スマホサイトでどのように表示されるのかも一緒にみていきます。
TRY to MAKE
Bootstrapナビゲーションを作ろう!
Bootstrapスターターテンプレートをつかってナビゲーションを設置していきます!ついでにレスポンシブデザインの概念を学びます!
TRY to MAKE
Bootstrapテンプレートのコードを編集しよう
Bootstrapのスターターテンプレートをいじってみよう!headタグやbodyタグなども学びます。
TRY to MAKE
初心者必見!1分でできるBootstrapで「WEBサイト」の土台を作ろう!
初心者必見!Bootstrapスターターテンプレートをつかえば1分でできる「WEBサイト」の土台を作ってみよ!
TRY to MAKE