Nocode「STUDIO」 → レスポンシブのルール。ヘッダー設定など

code-all STUDIO

Nocodeの「STUDIO」の使い方に関しての、操作マニュアルです。

少しずつ、整理しながらマニュアルとして作っていきますので、良かったらご参考下さい。

  • レスポンシブの設定
  • mobile(モバイル)場面のみ、「MENU」を消したいとき
  • ヘッダー要素を固定する(タイトル固定)

レスポンシブの設定

STUDIOで設定できるのは、3タイプ

  • PC
  • tablet(タブレット)
  • mobile(モバイル)

PC

tablet(タブレット):グリーン画面

mobile(モバイル):オレンジ画面

ルール

  • 必ず、PC → tablet(タブレット)→ mobile(モバイル)の順で設定していく
  • ※mobile(モバイル)などから設定していくと、PCやtablet(タブレット)のレイアウトが崩れるので注意!
  • フォントの種類、レイヤー構造(html)は変更できない
  • サイズやパディングは変更可能

各画面ごとにちょうど良いサイズに調整する。↓

例えば、PCでは20サイズの所を、tablet(タブレット)では14サイズに変更する

mobile(モバイル)場面のみ、「MENU」を消したいとき

携帯画面の時だけ、「MENU」を消すことが可能

「MENU」に焦点をあて、左上の「表示」の「mobile(モバイル)」のチェックを外す

「MENU」が消える

完成画像はこんな感じ↓
(上記の3タイプをもう一度見たとき、PCやtablet(タブレット)は「MENU」がついています。)

ヘッダー要素を固定する(タイトル固定)

ヘッダーは全てのページの共通のパーツになります。

ヘッダー部分をクリックして、「固定」を選択

右クリックで、「シンボル化」をクリック

「header」と記入(名前は何でも良いです)

他の画面にいっても、ヘッダーのタイトル名は変わらないようになっています。

余談

No codeで作成の際も、html構造で整える

名前を入力した際、最初は「p」タグになっているので、「h1」に変更する。

  • 理由:検索エンジンにページの内容を伝えることができる。

以上です。