-本日のアジェンダ-
1限目
学科 HTML/CSS基礎④
CSSの記述方法について
Terapadの設定
・文字サイズ
フォント→文字サイズ
・全角半角スペースの表示
表示→オプション→✓半角空白と✓全角空白
表示されるようになる
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
| CSSセレクタの優先順位の計算方法 | 得点 | 例 |
|---|---|---|
| 全称セレクタ | 0 | * すべての要素に適用 |
| 要素名 | 1 | h1 p div span table など |
| 擬似要素 | 1 | :after など |
| 擬似クラス | 10 | :hover など |
| class | 10 | .main-text |
| id | 100 | #header |
| style属性 | 1000 | <div style=”font-size:140%;”> |
| !important | 合わせて使用したプロパティを最優先 | font-size:140%!important; |
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
CSSのセレクタでの指定方法
| 記号 | 指定の対象 | 使用例 |
|---|---|---|
| スペース（空白） | 配下の要素 | div p { 処理 } |
| >（大なり） | 直下の要素 | div > p { 処理 } |
| *（アスタリスク） | 全ての要素を指定する | div * { 処理 } |
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
本日のテーマ
CSSの記述を始めましょう
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
本日学んだこと
CSSの基本文法について
リセットCSSについて
TeraPadの設定について
クラスとID
感想
本日からCSSに入りました。
CSSの指定方法はクラスやタグのほか配下にあるものやpタグの＠＠クラスなど細かく設定できることが分かりました。
どういうものを作るときにどういうタグを指定して変えたらよいのかという部分を考えて覚えていけたらと思います。
また、基本的には重複したものは下にあるものが優先されるものの点数によって変わるというお話をより詳しく学べました。
HTMLの中に直接CSSを書くstyle属性のポイントが高いということを覚えつつ、検証ツールもうまく使えるようにしていきたいです。