Nocode「STUDIO」 → レスポンシブのルール。ヘッダー設定など
Nocodeの「STUDIO」の使い方に関しての、操作マニュアルです。
少しずつ、整理しながらマニュアルとして作っていきますので、良かったらご参考下さい。
- レスポンシブの設定
- mobile（モバイル）場面のみ、「MENU」を消したいとき
- ヘッダー要素を固定する（タイトル固定）
レスポンシブの設定
STUDIOで設定できるのは、3タイプ
- PC
- tablet（タブレット）
- mobile（モバイル）
PC
tablet（タブレット）：グリーン画面
mobile（モバイル）：オレンジ画面
ルール
- 必ず、PC → tablet（タブレット）→ mobile（モバイル）の順で設定していく
- ※mobile（モバイル）などから設定していくと、PCやtablet（タブレット）のレイアウトが崩れるので注意！
- フォントの種類、レイヤー構造（html）は変更できない
- サイズやパディングは変更可能
各画面ごとにちょうど良いサイズに調整する。↓
例えば、PCでは２０サイズの所を、tablet（タブレット）では１４サイズに変更する
mobile（モバイル）場面のみ、「MENU」を消したいとき
携帯画面の時だけ、「MENU」を消すことが可能
「MENU」に焦点をあて、左上の「表示」の「mobile（モバイル）」のチェックを外す
「MENU」が消える
完成画像はこんな感じ↓
（上記の３タイプをもう一度見たとき、PCやtablet（タブレット）は「MENU」がついています。）
ヘッダー要素を固定する（タイトル固定）
ヘッダーは全てのページの共通のパーツになります。
ヘッダー部分をクリックして、「固定」を選択
右クリックで、「シンボル化」をクリック
「header」と記入（名前は何でも良いです）
他の画面にいっても、ヘッダーのタイトル名は変わらないようになっています。
余談
No codeで作成の際も、html構造で整える
名前を入力した際、最初は「p」タグになっているので、「h1」に変更する。
- 理由：検索エンジンにページの内容を伝えることができる。
以上です。