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

tags:レイアウト

Canvaでデザインのアクセシビリティをチェックする!初心者向け制作ガイド 2023年11月15日

Canvaでデザインのアクセシビリティをチェックする!初心者向け制作ガイド

Canvaでフッターにコピーライトを表記する方法と、デザインのアクセシビリティをチェックと、代替テキストの設定方法も紹介します。

TRY to MAKE
Canvaで背景画像を暗くしておしゃれにする!初心者向け制作ガイド 2023年11月13日

Canvaで背景画像を暗くしておしゃれにする!初心者向け制作ガイド

Canvaで背景画像を透過させる方法や、アイコン付きボタンの作り方を紹介します。また、無料メールフォームサービスも紹介します。

TRY to MAKE
Canvaでページ内に飛ぶリンクボタンを作る!初心者向け制作ガイド 2023年11月10日

Canvaでページ内に飛ぶリンクボタンを作る!初心者向け制作ガイド

Canvaでページ内の特定の場所に飛ぶボタン「ページ内リンクボタン」を作ります。またレイアウトのテンプレートの使い方も紹介します。

TRY to MAKE
BootstrapアコーディオンAlways openを使ってみよう 2023年6月30日

BootstrapアコーディオンAlways openを使ってみよう

常に開いているアコーディオンの設置と、デフォルトの仕様を学びます。

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

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

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

TRY to MAKE
Bootstrap縦型のドロップダウン付タブメニューを使おう 2023年6月28日

Bootstrap縦型のドロップダウン付タブメニューを使おう

縦型ドロップダウン付タブメニューのメリットと設置方法を学びます。

TRY to MAKE
Bootstrapブレイクポイントで要素の表示順を変えよう 2023年6月27日

Bootstrapブレイクポイントで要素の表示順を変えよう

orderクラスを使って、要素の表示順を変える方法と、ブレイクポイントを利用した順番の変更方法を学びます。

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

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

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

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

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

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

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
Bootstrapレスポンシブ対応の時短コーディングを学ぼう 2023年5月19日

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

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

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

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

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

TRY to MAKE
Bootstrapスマホサイトを最適化しよう! 2022年11月21日

Bootstrapスマホサイトを最適化しよう!

スマホサイトで最適にレイアウトができるように、デベロッパーツールを利用してスマホ表示を確認します。

TRY to MAKE
Bootstrapお知らせリストを作ろう 2022年11月4日

Bootstrapお知らせリストを作ろう

Bootstrapの「リスト」を作って、お知らせとお問合せを2カラムで作ります。見やすくするために仕切り線も作ります。

TRY to MAKE
Bootstrapテーブルをつくろう 2022年11月3日

Bootstrapテーブルをつくろう

エクセルでも使われるテーブルをBootstrapでも利用できます。tableタグでフロアガイドを作っていきましょう。

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

Bootstrap空白カラム(Offset)を学ぼう

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

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

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

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

TRY to MAKE
Back To Top