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

tags:css

Bootstrapドロップダウン付タブメニューを作ろう 2023年6月26日

Bootstrapドロップダウン付タブメニューを作ろう

Bootstrapのドロップダウン付タブメニューを作ります。どんな仕組みなのかも併せて学びます。

TRY to MAKE
Bootstrap縦書き横書きコンテンツを作ろう 2023年6月26日

Bootstrap縦書き横書きコンテンツを作ろう

縦書きと横書きの混在コンテンツと、縦長画像のサイズ、ページ内リンクの位置の移動を学びます。

TRY to MAKE
Bootstrap縦書きページ内リンクを作ろう 2023年6月22日

Bootstrap縦書きページ内リンクを作ろう

縦書きのページ内リンクを設置していきます。またcssの共通化と細分化も学んでいきます。

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

Bootstrap要素の下付けを学ぼう

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

TRY to MAKE
Bootstrap縦書きでオシャレなデザインを作ろう 2023年6月13日

Bootstrap縦書きでオシャレなデザインを作ろう

cssを使って、デザインの幅が広がる「縦書きデザイン」の作り方を学びます。

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

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

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

TRY to MAKE
BootstrapFlexをマスターしよう 2023年5月18日

BootstrapFlexをマスターしよう

flex（フレックス）を利用して要素の配置を変えたり、デバイスによって表示順を変えたり、レイアウトを学んでいきます。

TRY to MAKE
Bootstrap「row」の役割を学ぼう 2023年5月16日

Bootstrap「row」の役割を学ぼう

rowやcontainerの役割を理解します。

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セカンドページの土台を作ろう！ 2023年1月15日

Bootstrapセカンドページの土台を作ろう！

セカンドページを構築するための準備を学んでいきます。ナビゲーションを変更して、階層を作って、リンクを修正していきます。

TRY to MAKE
[猫図解]ナビゲーションを作ろう！navタグ 2022年11月16日

[猫図解]ナビゲーションを作ろう！navタグ

ナビゲーションnavタグを学ぼう！cssを利用した横並びメニューや入れ子メニューも作ります。

TRY to MAKE
Bootstrapコンテナに背景をいれよう 2022年11月3日

Bootstrapコンテナに背景をいれよう

bootstrap幅いっぱいのコンテナを学んで、cssを使って背景画像とカラーコード、テキストをいれてみよう！

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

Bootstrap余白を作ろう

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

TRY to MAKE
図解でわかる！WEBサイト構成要素の役割を理解しよ！ 2022年10月19日

図解でわかる！WEBサイト構成要素の役割を理解しよ！

WEBサイトは、「html」「css」「js」などのプログラム言語で構成されています。 それぞれの役割を初心者にもわかるように図解しますね。

TRY to MAKE
[Tips]すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」 2022年10月19日

[Tips]すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」

すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」を使ってみよう！

TRY to MAKE

関連タグ

Back To Top