【STUDIO】基本編
業務や研修を通じてわかったことをメモに残していきます
今回は前提知識というか全体的に知っといたほうがいいことというか。
要素系は下記です。
基本構造
<header>
<main>
<footer>
div選択後もsectionやmainに変更できるから階層さえしっかりしてればOK
FigmaからSTUDIOに移行するとき
Figmaから一気に持っていこうとすると｢ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません。｣とエラーが出る可能性。
→セクションごと、部品ごとにやる方が吉（リストにしたりするしね）
💡ロゴなどはFigmaでSVGで書き出したほうがいいかも（分解されちゃう）
😵💫画像をクリップボードにコピーするとフリーズ
・レイヤーに<img>入れてダメ
・Downsizeで圧縮やリサイズしてもダメ
解決策:画像を塗りにしエリア確保して、後で差し替え。
単位
ピクセル(px)
ピクセルは固定値
💡設定した値が最大値になり画面幅が縮むと自動で小さくしてくれる
パーセント(%)
親ボックスまたはページのサイズに影響される
要素とページ、コンテナボックスの比率はボックスやページの縮小と合わせて変化
auto
子要素を持つ親要素に設定できる
横幅と縦幅は内包されるボックスを基準に自動で設定される
💡Figmaでいう内包
💡テキストや親ボックスの縦幅をこれにしとくとレスポンシブしやすいかも
フレックス(flex)
姉妹要素が複数並ぶとき親ボッスの幅をどんな比率で満たすかを指定できる
💡Figmaでいうコンテンツに合わせて拡大
vh
縦幅をvhに設定するとスクリーンのサイズに対する比率で高さを定義する
💡どんなスクリーンサイズでもページいっぱいに表示ができちゃう
画像
Boxモード
画像を背景の塗りとして扱う。
👍 明るさ、コントラスト等のフィルタ。子要素として別要素を挿入できる
👎 画像のサイズの情報は認識されない。縦横比を保つ設定が不可能
Imgモード
画像を質量をもった要素として扱う
👍 画像の比率を認識し、「auto」で保持可能。altの設定できる
👎 画像に効果をかけたり、子要素はのせられない
二つの画像を重ねて中央に乗せたいとき
どちらかをboxモードで下にひき子要素としてもう一つを追加する（上に来るのはimgのままでOK）
ブレンドモード
重ね順隣の「>」を押すことで同じようなメニューがだせるけど、写真以外も対応してる反面ホバーなどのアニメーションには対応してなさそう。
😵💫画像にリンクが設定できない～
画像を選択、右クリックでグループにしてそのdivに設定するしかなさそう？
コンポーネント
どれか1つを編集すると、配置されたすべてのコンポーネントへ反映される
各コンポーネントに個別の編集を加えたい（プロパティ追加）
コンポーネントで扱える値一覧
・テキスト
・数値
・画像
・URL
・ブール値（オンオフ）
・カラー
コンポーネントを選択した状態でレイヤーパネルを開くとプロパティ管理画面になる
💡編集時に要素をコンポーネント内に追加する時に出る「プロパティを作成」をクリックすると自動的に追加される
💡数値はパディング、横幅など各スタイルに対応（マージン、枠線は×）
プロパティをけしたい
プロパティ名をクリックすると名称の変更と削除が選べる
フォーム
はみ出し
親ボックスからはみ出した子要素をどうするか
表示：はみ出たものをそのまま表示する。
非表示：はみ出た子要素を隠す
スクロール：子要素をスクロールさせることができる（水平化垂直）
⚠️スクロールバーはエディタ上では出るけどプレビューや本番サイトでは出ない（シフト押しながらスクロールすると動く、分かりづらい）
モーダル
ページ追加から「モーダル」を選択
😵💫アニメーションの設定がはどこで？
背景の透過の場所をクリックするとパディングの横に「トランジション」の項目が出てくる（速度など細かい調整には非対応）
参考になりそうなサイト
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？