授業中はなかなか時間が取れないので、
週末にまとめて学んだ内容をざっくり記録に残しておこうと思います！
令和7年1月6日(月)
総合問題の課題
・メディアクエリ時はパーツごとに分けて記述する！
・カスタムプロパティ…何度も同じカラーが出てくる場合、こちらを使うと便利！
例）「:root{–main-color : #fff ;}」
.container{color : var ;}等。
※font-sizeの場合は「html」を使用する。サイトでは「62．5％(＝10px)」の数値が使用されていることが多い。
・「aspect-ratio:2/1;」動画等、埋め込みコンテンツを比率で表示してくれる。
・リセットCSS…＜link rel＞の一番目に記述。基本は「destyle.css」で進める（将来自分に合うリセットCSSがあれば、そちらを使用してもよい）
ノータッチ。弄らないように（必要があれば「common／共通のコード」で「list-style:none;」等上書き）。
コーディング時注意点：「height」を設定するのは「header、キービジュアル、footer」のみ。
令和7年1月7日(火)
総合問題の課題
令和7年1月8日(水)
総合問題の課題解説
・インナークラスを設定するもの：（キービジュアル、地図はwidth100％なので不要）
（総合問題の課題・間違えていたポイント）
・「img」の値をbackground-sizeで指定していた。
⇒「img」は「object-fit:cover;」で指定。
・「footer」を「wrap」の外に書いていた。
・ごちゃごちゃになってた原因…「main」内の要素が「section(「h1」「h2」「h2」が入っている場合はこちらを使用)」や「div」等でグルーピングされていなかった。
・「ｈ2」「ｈ3」ときちんと分ける！
（自分のコード） ／ 【正解のコード】
・「footer_inner」を入れているので「footer_wrap」は不要。
・「main」等もclassを付けた方がよい。
・「common.css」で必要なかった記述⏬
・テキストが溢れた際に三点リーダーを表示させるコード
・header、footerは個別のインナーで設定。
（divがいっぱいになってきてわからなくなった場合）
１．divの後ろにタグのコメントアウトを書くとよい。
２．後ろのdivを消して、右下のプリティアで確認。
（⚠注意点）
※メディアクエリで表示を消すにしても、HTMLにすべてのテキストを入力しておかないといけない。
※flexをかけるのは直近の親にかける。
※なんでもclassを記載しなくてもよい。親のみに記述。
（CSSでの属性指定について）
基本は属性名で書かない方がいいが、
子を指定するときは「ul」と属性名を書いても良い。
ベースルールも要素名で書いても良い。
「＞」直下のという意味。
（レスポンシブ対応をするとき）レスポンシブしないといけないものと、そうでないものを分けていく。
（JavaScriptとは）クリックしたらこのアニメーションになる。クリックしたら現れる機能
・▽のようにまとめて記載してもよい。
（隣接セレクタの使い方）
↑右のみ適用されている。リストの兄がいる要素。
隣接セレクタ…一番目だけ省略したいとき。
（配布された正解のHTML・修正部分）
HTML…61「ul liに変更」
（Webフォントの記述場所について[CSSの場合]）
・「html」では一番よく使うフォント
・「top.css」では一部で使うフォントを記述
（画像（「img」「background-image」）の「cover」「contain」指定時の使い分け）
HTML「object-fit」／CSS「background-size」
↑CSSで読み込んだ場合は「background」の方。
（キービジュアルテキストの折り返し位置指定）
〈▽HTML〉
〈CSS〉
（キービジュアルのメディアクエリ化時、「height:auto;」
「aspect-ratio」↑「aspect-ratio:2/1;」動画等、埋め込みコンテンツを比率で表示してくれる。）
（font-size 参考スクショ）
（文字間隔を開けるコード：「letter-spacing」）
↑「%」←「letter-spacing:○○em;」（文字間隔を開ける）
（▽「line-clamp」の表記方法）
↑line-clampが効かなかった場合、下の「webkit」が効く。
・メディアクエリ…serviceエリアのものはある程度まとめて書く。
・カスタムプロパティ…同じようなサイズが出てくる場合に使う。
令和7年1月9日(木)Photoshopの授業-1日目
・Webデザイナーを考えられている方は、ショートカットを優先して覚える！
・Photoshopの大まかな機能を学んだ。
…ある程度機能を知っておけば、後々自分自身で検索して実行できるため。
令和7年1月10日(金)Photoshopの授業-2日目
・レイヤーマスクという影（効果）を設定できる。
・マスクという機能を使って、一部だけ編集できる。
・非破壊編集（特にここが大事）…元のデータを修復可能な状態で編集すること。