tags:タグ
![BootstrapGutter(ガター)で時短しよう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb40.png)
BootstrapGutter(ガター)で時短しよう
ガターの仕組みと役割を学びます。また、overflow hiddenではみ出した部分を隠す方法を学びます。
TRY to MAKE![BootstrapFlexをマスターしよう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb38.png)
BootstrapFlexをマスターしよう
flex(フレックス)を利用して要素の配置を変えたり、デバイスによって表示順を変えたり、レイアウトを学んでいきます。
TRY to MAKE![BootstrapData属性と疑似要素でデザインしよう](https://sakuweb.liruu.com/wp-content/uploads/2023/05/sakuweb37.png)
BootstrapData属性と疑似要素でデザインしよう
HTMLのdata属性と、cssの疑似要素、attr関数の合わせ技でデザインする方法を学びます。
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![[Tips]デベロッパーツールを使おう!](https://sakuweb.liruu.com/wp-content/uploads/2022/11/devTools17.jpg)
[Tips]デベロッパーツールを使おう!
WEBサイトのエラーやスピード検証、コードシミュレーションなど、開発者向けの検証ツール「デベロッパーツール」の使い方とテキストエディタとしての活用方法をご紹介!
TRY to MAKE![[猫図解]リストを作ってみよー!ulタグ・olタグ・liタグ](https://sakuweb.liruu.com/wp-content/uploads/2022/11/ultag.jpg)
[猫図解]リストを作ってみよー!ulタグ・olタグ・liタグ
リスト(箇条書き)を制御するのは、ulタグ、olタグ、liタグです。 ナビゲーションやお知らせ、目次など、可読性UPできるリストを作ります。。
TRY to MAKE![Bootstrapお知らせリストを作ろう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb04.png)
Bootstrapお知らせリストを作ろう
Bootstrapの「リスト」を作って、お知らせとお問合せを2カラムで作ります。見やすくするために仕切り線も作ります。
TRY to MAKE![Bootstrapテーブルをつくろう](https://sakuweb.liruu.com/wp-content/uploads/2022/10/sakuweb02.png)
Bootstrapテーブルをつくろう
エクセルでも使われるテーブルをBootstrapでも利用できます。tableタグでフロアガイドを作っていきましょう。
TRY to MAKE![[猫図解]Htmlの「タグ」って何だろ?](https://sakuweb.liruu.com/wp-content/uploads/2022/11/htmltag01.jpg)
[猫図解]Htmlの「タグ」って何だろ?
htmlタグそれぞれの持つ意味と閉じタグについて学ぼう!html5から追加された閉じタグの省略についても学びます。
TRY to MAKE