[学習]CSS単位について
px … 画面を構成する画素(ピクセル)を単位と指定
・文字の大きさはは16px程度が基本
・画面の最大幅は1,000px程度が基本
in,cm,mm,Q,pc,pt
印刷・組版由来の単位
%,em,ch,ec,lh
相対長の単位
em … 「M」の大きさが1em
rem … Root emの略、親要素に影響されない
vw / vh … ビューポートの幅と高さの割合
vmin / vmax … 端末の向きによらない短い辺と長い辺
dvw / dvh(ダイナミック) … アドレスバーの表示状況にあわせる
svw / svh(スモール) … アドレスバーが表示された時
lvw / lch(ラージ) …. アドレスバーが隠れた時
ビューポートを基準とした単位
スマホ等で見えている範囲のこと
・論理的プロパティ
border-inline-start
direction: start
「writing-mode:vertical-rl」縦書き、横書きの切り替え
「inline」横書きの時の横方向 … vi
「block」横書きの時の縦方向 … vb
——————————————————
[学習 - JavaScriptについて]12:30~
・Bootstrapの復習
↪︎Bootstrapのサイトにアクセス後「Get started」で取得
HTMLの
・HTML内にJavascriptを記述する場合はscriptタグを使用
"script" document.write('<p class="date">20xx/01/23</p>'); "script"
2023/10/10
——————————————————
[学習 - Figma]17:30~
<プロパティ>
・デザイン … 選択したオブジェクトの情報
・プロトタイプ … 制作物のプロトタイプを表示
・インスペクト
<フレームの作成>
・フレームの選択 … 「Command+クリック」
・要素のコピー … 「option + コピー」
・キーボード操作だとフレームインしない
・ショートカット
ズームイン/アウト … 2本指
コピペ … Command + C,V
複製 … Command + D
スタイルを引き継かずペースト … Command + Shift + V
スタイルのみコピぺ … Comannd + Option + C / V
画面を動かす … Space + ドラッグ
<検索と置き換え>
検索 … Command + F
検索 + 置き換え … 全てのフレームの文字を置換可能
<ツールバーの使い方>
「選択ツール」
移動ツール … V
拡大縮小 … K 縦横比を保ったまま拡大縮小
「フレームツール」
フレーム … F デザインエリアの枠組/
↪︎ 右クリック[選択範囲のフレーム化] or option + Command + G
セクション … Shift + S
↪︎階層毎にセクション分け可能 / コンポーネントをまとめて配置 *フレーム名が見える
スライス … s
↪︎画像の一部分を書き出す
「シェイプツール」
画像の配置 … オブジェクトへの配置が可能
↪︎ <塗り>からの配置も可能
「描画ツール」
「テキストツール」
「リソースツール」
・コンポーネント
↪︎ブックマークのようなもの
・プラグイン
・ウィジェットを管理する機能
「手のひらツール」… Space
「コメントツール」
↪︎デザインにコメントを残せる/コミュニケーションツール
<プロパティパネルの使い方>
「デザイン」
・整列
・制約
↪︎親フレームに対する位置
・スクロールする際に位置を固定
↪︎「プロトタイプ」チェック時に有効/画面に追従する
・レイヤーのプロパティ
↪︎透明度、レイヤーON/OFF、ブレンド
・線のプロパティ
↪︎線の形状、透明度
・エフェクト
↪︎シャドウ、ぼかし(組み合わせ、プリセット保存可能)
・エクスポート
↪︎重なるレイヤーの使用不使用を選択できる
・テキスト
↪︎詳細設定、テキストを切り捨てるで「…」と以降の文章を省略可能
「プロトタイプ」
「インスペクト」
・CSSデータなどが掲載されている
「オートレイアウト」
親フレームのサイズを自動調整したい場合→「コンテンツを内包」選択
「コンポーネント」
・「class」のようなもの
↪︎セクションツールを使い管理する
・バリアントを追加
↪︎バリエーションを追加、カラー/ネームを変更する事で「プロパディ」切替が可能
「スタイル」
・色スタイル/テキストスタイル/エフェクトスタイル
↪︎プリセットを作って、コール可能
「マスクを使った写真合成」
↪︎オブジェクトを重ねてグループ化、ぼかしなどエフェクト適用可
「グラデーションマスク」でビジュアル作成
↪︎外側のオブジェクトを作成、グループ化、元イメージの複製、マスク化、グラデーションで合成していく
「プラグイン・ウィジェット」
・プラグイン … 作業者が使用するもの “Unsplush” “iconyfy”
↪︎ショートカット … Command + /
・ウィジェット … 共有すれば他の人も使用できる “Todo”