サクッとWEBサイトを作る「SAKUWEB（さくうぇぶ）」

tags:レスポンシブ

Bootstrapアコーディオンを設置しよう 2023年6月29日

Bootstrapアコーディオンを設置しよう

FAQで利用されることの多いアコーディオンを作っていきます。

TRY to MAKE
Bootstrap要素の下付けを学ぼう 2023年6月14日

Bootstrap要素の下付けを学ぼう

要素の配置場所を自由に設定できる「d-flex」を学びます。

TRY to MAKE
Bootstrap特定のデバイスで非表示にしてみよう 2023年5月26日

Bootstrap特定のデバイスで非表示にしてみよう

特定のデバイスで、要素の表示・非表示を制御する方法を学びます。

TRY to MAKE
Bootstrap下層ページのリンク集を作ろう 2023年5月25日

Bootstrap下層ページのリンク集を作ろう

カードデザインで、WEBサイトの導線として下層ページのリンク集を作ってみましょう。

TRY to MAKE
Bootstrap列数はrow-colsで指定して時短しよう 2023年5月23日

Bootstrap列数はrow-colsで指定して時短しよう

時短コーディングとしてrow-colsを利用して列数を指定する方法を学びます。

TRY to MAKE
BootstrapGutter（ガター）で時短しよう 2023年5月22日

BootstrapGutter（ガター）で時短しよう

ガターの仕組みと役割を学びます。また、overflow hiddenではみ出した部分を隠す方法を学びます。

TRY to MAKE
Bootstrapレスポンシブ対応の時短コーディングを学ぼう 2023年5月19日

Bootstrapレスポンシブ対応の時短コーディングを学ぼう

時短コーディングの方法を学びます。

TRY to MAKE
Bootstrap見出しに斜線、画像を楕円にしてみよう 2023年5月15日

Bootstrap見出しに斜線、画像を楕円にしてみよう

見出しに斜線を入れる方法や、背景画像を楕円にする方法、背景画像の位置指定などを学びます。

TRY to MAKE
Bootstrapレスポンシブに対応させよう 2023年5月12日

Bootstrapレスポンシブに対応させよう

メディアクエリを利用してデバイスごとの指定を変える方法を学びます。

TRY to MAKE
Bootstrap Google Fontsを使ってみよう 2023年5月11日

Bootstrap Google Fontsを使ってみよう

GoogleFontsの使い方や設定方法の他、cssでのタグ・クラス名・一括指定方法も学び舞うs。

TRY to MAKE
Bootstrapブロークングリッドレイアウトを作ろう 2023年5月10日

Bootstrapブロークングリッドレイアウトを作ろう

ブロークングリッドレイアウトやインライン要素・ブロック要素を学びます。

TRY to MAKE
Bootstrapおしゃれな見出しデザインを作ろう！ 2023年5月9日

Bootstrapおしゃれな見出しデザインを作ろう！

cssを使って見出しデザインを作ります。縁取りや文字色の透過、影の付け方などを学びます。

TRY to MAKE
Bootstrapパンくずリストを作ろう 2023年5月8日

Bootstrapパンくずリストを作ろう

Breadcrumbでパンくずリストを作ります。flexのjustify-contentを利用した配置の方法も学びます。

TRY to MAKE
Bootstrapデザイン画からコーディングしよう！ 2023年5月8日

Bootstrapデザイン画からコーディングしよう！

デザイン画像を見ながらコーディングします。cssで背景画像の指定方法やレイヤー、余白の入れ方などを学びます。

TRY to MAKE
Bootstrapメニュー固定と戻るボタンを作ろう 2022年11月24日

Bootstrapメニュー固定と戻るボタンを作ろう

サイトの可読性や操作性を上げるため、ナビゲーションの固定とページＴＯＰに戻るボタン設置を学びましょう。

TRY to MAKE
[Tips]デベロッパーツールを使おう！ 2022年11月22日

[Tips]デベロッパーツールを使おう！

WEBサイトのエラーやスピード検証、コードシミュレーションなど、開発者向けの検証ツール「デベロッパーツール」の使い方とテキストエディタとしての活用方法をご紹介！

TRY to MAKE
BootstrapFooterを作っていこう 2022年11月4日

BootstrapFooterを作っていこう

BootstrapでFooterエリアを作りましょう！全ページのリンクやSNSボタンなど外部コンテンツへの誘導、著作権表記などを組み込みます。

TRY to MAKE
Bootstrap空白カラム（Offset）を学ぼう 2022年11月3日

Bootstrap空白カラム（Offset）を学ぼう

Bootstrapのoffset（空白カラム）を使って、1カラムレイアウトを作ります。背景画像を暗くする方法も学びます。

TRY to MAKE
Bootstrap余白を作ろう 2022年10月31日

Bootstrap余白を作ろう

Bootstrapでpaddingやmarginで余白を作りましょう。どこにどのくらい余白を入れるかを考え、クラス名の指定方法も学びます。

TRY to MAKE
Bootstrapブレイクポイントとモバイルフレンドリー 2022年10月30日

Bootstrapブレイクポイントとモバイルフレンドリー

Bootstrapのレスポンシブ対応の際に、どのサイズでレイアウトを変えるかを指定できる、ブレイクポイント（トリガー）を学びましょう。

TRY to MAKE
Bootstrapレスポンシブデザインを学ぼう 2022年10月30日

Bootstrapレスポンシブデザインを学ぼう

レスポンシブ対応とは何かを学んで、レイアウトを実践で組んでいきましょう。スマホサイトでどのように表示されるのかも一緒にみていきます。

TRY to MAKE
Bootstrapナビゲーションを作ろう！ 2022年10月29日

Bootstrapナビゲーションを作ろう！

Bootstrapスターターテンプレートをつかってナビゲーションを設置していきます！ついでにレスポンシブデザインの概念を学びます！

TRY to MAKE

関連タグ

Back To Top