tags:レスポンシブ
![BootstrapGutter(ガター)で時短しよう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb40.png)
BootstrapGutter(ガター)で時短しよう
ガターの仕組みと役割を学びます。また、overflow hiddenではみ出した部分を隠す方法を学びます。
TRY to MAKE![Bootstrap Google Fontsを使ってみよう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb33.png)
Bootstrap Google Fontsを使ってみよう
GoogleFontsの使い方や設定方法の他、cssでのタグ・クラス名・一括指定方法も学び舞うs。
TRY to MAKE![Bootstrapパンくずリストを作ろう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb36.png)
Bootstrapパンくずリストを作ろう
Breadcrumbでパンくずリストを作ります。flexのjustify-contentを利用した配置の方法も学びます。
TRY to MAKE![Bootstrapデザイン画からコーディングしよう!](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb20.png)
Bootstrapデザイン画からコーディングしよう!
デザイン画像を見ながらコーディングします。cssで背景画像の指定方法やレイヤー、余白の入れ方などを学びます。
TRY to MAKE![Bootstrapメニュー固定と戻るボタンを作ろう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb22.png)
Bootstrapメニュー固定と戻るボタンを作ろう
サイトの可読性や操作性を上げるため、ナビゲーションの固定とページTOPに戻るボタン設置を学びましょう。
TRY to MAKE![[Tips]デベロッパーツールを使おう!](https://sakuweb.liruu.com/wp-content/uploads/2022/11/devTools17.jpg)
[Tips]デベロッパーツールを使おう!
WEBサイトのエラーやスピード検証、コードシミュレーションなど、開発者向けの検証ツール「デベロッパーツール」の使い方とテキストエディタとしての活用方法をご紹介!
TRY to MAKE![BootstrapFooterを作っていこう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb25.png)
BootstrapFooterを作っていこう
BootstrapでFooterエリアを作りましょう!全ページのリンクやSNSボタンなど外部コンテンツへの誘導、著作権表記などを組み込みます。
TRY to MAKE![Bootstrap空白カラム(Offset)を学ぼう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb28.png)
Bootstrap空白カラム(Offset)を学ぼう
Bootstrapのoffset(空白カラム)を使って、1カラムレイアウトを作ります。背景画像を暗くする方法も学びます。
TRY to MAKE![Bootstrap余白を作ろう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb05.png)
Bootstrap余白を作ろう
Bootstrapでpaddingやmarginで余白を作りましょう。どこにどのくらい余白を入れるかを考え、クラス名の指定方法も学びます。
TRY to MAKE![Bootstrapブレイクポイントとモバイルフレンドリー](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb09.png)
Bootstrapブレイクポイントとモバイルフレンドリー
Bootstrapのレスポンシブ対応の際に、どのサイズでレイアウトを変えるかを指定できる、ブレイクポイント(トリガー)を学びましょう。
TRY to MAKE![Bootstrapレスポンシブデザインを学ぼう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb06.png)
Bootstrapレスポンシブデザインを学ぼう
レスポンシブ対応とは何かを学んで、レイアウトを実践で組んでいきましょう。スマホサイトでどのように表示されるのかも一緒にみていきます。
TRY to MAKE![Bootstrapナビゲーションを作ろう!](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb03.png)
Bootstrapナビゲーションを作ろう!
Bootstrapスターターテンプレートをつかってナビゲーションを設置していきます!ついでにレスポンシブデザインの概念を学びます!
TRY to MAKE