-本日のアジェンダ-
1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項
・文字コードの変更
| <meta charset=”UTF-8″> | HTML文章に記述 |
| @charset “utf-8”; | CSSファイルに記述 |
・コメントアウト
| <!– 〇〇〇〇〇 –> | HTML文章に記述 |
| /* 〇〇〇〇〇 */ | CSSファイルに記述 |
・パス
| 記述例 | 使い方 |
|---|---|
| <img src=”images/sample_img001.jpg” alt=””> | 画像「img」 |
| <a href=”index.html” >リンク</a> | リンク「a」 |
| <link href=”style.css” rel=”stylesheet”> | 外部スタイルシート「link」 |
| background-image:url(“images/home_bg01.gif”); | 背景画像「background」「background-image」 |
・画像
意味がある画像
| 記述例 | 使い方 |
|---|---|
| <img src=”images/sample_img001.jpg” alt=”” width=”400″ height=”300″> | 画像「img」は alt=””(必須) width=”400″(推奨) height=”300″(推奨) ※pxの単位は省略可 |
背景としてあくまで見た目としての画像
※背景画像の領域は内容（コンテンツ）に依存します。特に高さ「height」の扱い方に気を付けましょう。
| 記述例 | 使い方 |
|---|---|
| background-image:url(“images/sample_img001.jpg”); | 背景画像「background」「background-image」 |
| background-size:400px; | 背景の画像サイズ ※pxの単位は省略不可 |
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
CSS:カスケーディングスタイルシート
基本上から下に反映されるため、同じものに対する指定が２つある場合下に書かれているものが反映される。
※ただセレクタの得点が高いほうが採用されることもある。
・CSSの基本文法
セレクタ｛
プロパティ:値;
｝
・全称セレクタ(全部につける)
*｛
color:red;
｝
・型セレクタ(タグに対してつける)
ｐ｛
color:red;
｝
・idセレクタ(使いまわせない、ユニークなもの)
#id名｛
color:red;
｝
・classセレクタ(使いまわせるので何個もあっていい)
.class名｛
color:red;
｝
・子孫結合子セレクタ(親子関係のタグの中身に対してかけられる)
ul li｛
color:red;
｝
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて
検証ツール
↑これ押すと画面上から触れる。クリックするとHTML上のソースを示してくれる。
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
本日のテーマ
HTMLとCSSを結び付けていきましょう
ワンポイントアドバイス
Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。
本日学んだこと
CSSの基本文法
HTMLの復習
検証ツールの使い方
感想
本日はCSSに入りました。CSSのかけ方にもクラスやid、型など様々あると学びました。基本の文法をまずは忘れないようにしたいです。
また、検証ツールの使い方では画面上から触ってソースを見るためのボタンがあることを知らなかったのでソースから探すよりも簡単で便利な機能だなと思いました。うまく活用していきたいです。
検証ツールで取り消し線が引かれている部分は上書きされて反映されていないという点も初めて知りました。また、業務では消すよりも上書きで見た目を変えたほうが良い場合もあるという話も仕事の進め方がイメージできて参考になりました。