アジェンダ
1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
大浜信彦先生
まとめ
本日使ったテキスト
HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css
大浜先生のテキストサイト
https://html-css.hamaya2020.com
話の順番に出てきたテキストをピックアップ
⇓
■CSS
L4
Lesson-4 CSS でデザインを始める前に
https://html-css.hamaya2020.com/lesson-4.html
■色見本
好きな色は名前を覚えればそのまま使える
Appendix-1 色見本（カラーネーム、カラーコード）
https://html-css.hamaya2020.com/appendix-1.html
■background系プロパティ
L7.2
https://html-css.hamaya2020.com/lesson-7.html
Lesson-7 CSS で飾りを追加しましょう
■テキスト系プロパティ
L6.2
https://html-css.hamaya2020.com/lesson-6.html
Lesson-6 CSS で文字飾りを付けましょう
以上は、指定すればできる方法
＊＊＊＊＊
https://html-css.hamaya2020.com/tips-object-fit.html#%25(引用元：HTML-CSS 入門講座)
■レイアウト系プロパティ
L5
Lesson-5 CSS でレイアウトを作りましょう
https://html-css.hamaya2020.com/lesson-5.html
■margin プロパティ
箱を動かしたいとき（重なりによる相殺、マイナス値の指定、ボックスの配置など）の使用方法
知恵袋（Tips）
margin プロパティの注意事項
https://html-css.hamaya2020.com/tips-margin.html
※メモ
マイクロソフト：Visual Studio Code (VSCode) を日本語表示にする方法は以下の通りです。
日本語表示への設定手順
言語の変更を適用するために、VSCodeを再起動します。
言語パックのインストール
VSCodeを開きます。
左側のサイドバーから拡張機能アイコン（□の中に四角があるアイコン）をクリックします。
検索バーに「Japanese Language Pack for Visual Studio Code」と入力します。
公式の日本語言語パックを見つけて、「インストール」をクリックします。
表示言語の変更
言語パックをインストールしたら、コマンドパレットを開きます。 (Ctrl + Shift + P または F1 を押します)
リストから「ja」を選択し、Enterを押します。
VSCodeの再起動
＊＊＊＊＊
午後の作業：
昨日の課題に、グーグルマップをスクショしたものを埋め込んだ画像を作ろうとした。
先生は、Photoshopで合成する方法を伝えてくれたが、私は、HTMLに写真画像を埋め込む方法を試してみた。
検証チェッカーでも間違いがなかったのに、写真が表示されなかった。
理由はいくつか考えられるが、（Ai参照、別ページ・自習）
今回は、USB上のファイルとプラウザの編集をちゃんぽんにしてしまったため、
「ファイルが見つかりません」
との指示が出る。
正しくは、USBからデータをブラウザにコピーしてからUSBを外し、
ブラウザ上で作業をするべきだった。
このような間違いは、今後起こる可能性もあるため、良い経験だった。
