top of page

レスポンシブでつまずかない！「カスケーディング」の考え方


WixStudioの大きな魅力の１つに、シームレスなレスポンシブが可能であることが挙げられます。


でも初めてWixStudioで制作をすると、レスポンシブの設定をするときに通常のWixEditor とは勝手が違い「あれあれ？」なんだかうまくいかない・・と混乱してしまうことがあると思います。


そこで今日はレスポンシブを楽にするカギ、「カスケーディング」の考え方についてお伝えしたいと思います！


WixStduioのブレイクポイントについて


カスケーディングのお話をする前に、前提となるWix Studioのブレイクポイントについて簡単にお伝えします。


通常のWixエディタではブレイクポイントがPCとスマホの２種類ですが、WixStudioではPC、タブレット、スマホの３種類のサイズ設定になっています。



しかもPCからタブレット、タブレットからスマホの画面幅の間をピクセル単位でシームレスに繋ぐことができ、どんなデバイスでサイトを閲覧しても完璧なレスポンシブを整えることができる自慢のツールなのです！



カスケーディングとは？


レスポンシブの設定をするときに、「PC→タブレット→スマホ」のように幅の大きいものから小さいものへ順に設定する人が多いのではないでしょうか。最近はスマホファーストの考え方でスマホのデザインを先にする場合もあると思いますが、基本的な考え方は同じです。

さて本題です。


  • 最大のブレイクポイントで行なった変更は、それよりも小さなブレイクポイントにも反映します。


逆に、


  • 小さいブレイクポイントで行なった変更はそれよりも大きいブレイクポイントには反映されません。


これがカスケーディングです。


例えばタブレットの編集画面で、ある画像の表示幅を小さくしたとします。その表示幅はそのままスマホ画面にも適用されますが、PC画面には適用されません。

Webサイトのコーディングをする人には、このカスケーディングは馴染みの感覚かもしれませんね。


ここを押さえておくと、PC・タブレット・スマホの操作画面を行き来しながらレスポンシブを整えているときに混乱が起きにくくなります。


ところでWixのエディター画面では「今、自分はどの部分を触っているか」が非常に重要です。

「タブレット画面を編集したつもりが反映されてない。あれ？よく見たらPC画面を編集しちゃってた！」なんていうことがないようにしっかり確認が必要です。


レスポンシブに限らず、デザイン編集中も、セクションを指定しているのか、その中のリピーターなのか、はたまたリピーターの中の画像なのか・・

「どの要素の中の何を編集しているのか」を確認しながら行うことが重要です。非常に些細なことですが、慣れないうちは、あるあるです。


編集画面内にレイヤーパネルがあるので、編集したい要素がどこにあるかをしっかり確認しながら進めていくのがおすすめです！





少々話が脱線しましたが・・

次はカスケーディングの法則についての「例外」をお伝えします。



「削除」と「データそのものの変更」は適用されない


WixStudioにおけるカスケーディングでは大きい画面での変更は小さい画面にも反映されるが、小さい画面での変更は大きい画面には反映されない、とお伝えしました。


ですが例外があって、


  • 要素の「削除」は全てのブレイクポイントに反映されます。

  • テキストの内容など、「データそのものの変更」も全てのブレイクポイントに反映されます。


ここはご注意くださいね！

ちなみにテキストなどのデータそのものを変更する時、WixエディタではPC編集画面からしか変更できませんが、Wix Studioではタブレット・スマホ編集画面からも変更が可能です。こういった勝手の違いもありますが、操作していくうちに慣れていくのかなと思います。




（おまけ）カスケーディングの語源


カスケードはフランス語で「小さな滝」「階段上に連続する滝」の意味だそうです。


Webページの見栄えを設定するCSSは「Cascading Style Sheet」の略。カスケーディングをIT用語で説明すると、”ある要素に適用されるスタイルを、広域な範囲から局所的な部分へと順に引き継ぎながら適用していくこと”になります。


カスケーディングの考え方はレスポンシブの基本であり、頭に入っていればスムーズに作業ができそうです。


このほかにもWixStudioで美しいレスポンシブを実現するために、知っておくと便利な様々な技がありますよ！

より素敵なサイトを作りたい方、Wix Studioの感動機能アレコレをご紹介しているmoheru designさんの記事もオススメですのでこちらもぜひどうぞ♡

↓↓



Wixについてもっと知りたい！話したい！


Wix使いの女子たちと交流したい、Wixをこれから始めてみたい、そんな皆さん。

毎月第3木曜日はWix女子会です。


次回は11月夜の部。毎回アットホームな雰囲気のなか、様々な話題でワイワイと刺激をもらえる素敵な時間になっています。

どなたでもお気軽にご参加くださいね🎵🎶


WixでWeb制作する女子たちのZoom交流会

11月19日（木）21:00~22:00


＼ お申し込みはこちらから ／





---------

サイト共同管理・掲載担当：misolo_design（ミソロデザイン）

https://www.misolodesign.com/

Hiromi.Saita







Comentários

bottom of page