[学習]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”