本日のテーマ
CSSの記述を始めましょう
授業詳細
昨日の復習と実践を行う。
画像の取り扱い
普通にデジカメで写真を撮ると4000pxくらい
写真の大きさはアップロードする前に事前に自分で加工して容量を小さくしたりサイズをそろえておく
pngイラストレーターのようなくっきりはっきりはpng形式がよい。圧縮して元に戻しても戻る
gif 昔のフォーマットぱらぱら漫画のようなアニメーションが作れる
pngとgifは背景透過可能、jpegは背景透過できない
相対パスと絶対パス
基本自分の画像を使う場合、相対パスで描くのが一般的
代替テキスト データの読み込みが遅いときなど、画像の代わりにテキストが出るようにする
フォントについて
safariは明朝体、それ以外はゴシック体がデフォで設定されているので、フォントについては指定しておく。わからない場合はリセットCSSで検索するとベター。リセットCSSはファッションのようなものなので、自分のリセットCSSを持っておいたほうが良い。
全体スクリーンショットの作り方
クロームの・・・のところから、全体スクリーンショットをすると、スクリーンショットのpngがダウンロードされる。
本日の成果
CSSの記述・検証ツールの活用
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
セレクタの得点について
計算式
- 以下の点数を加算していく
- セレクタの種類
| 指定方法 | 例 | 点数 |
|---|---|---|
| タグのstyle属性 | style=”color: red;” | 1000点 |
| ID | #hoge | 100点 |
| クラス | .hoge | 10点 |
| 属性セレクタ | a[href*=”google”] | 10点 |
| 要素名 | ul | 1点 |
| 擬似要素 | :first-child | 1点 |
| ユニバーサルセレクタ | * | 0点 |
計算例
| 例 | 計算 | 合計点 |
|---|---|---|
| style=”” | 1000(style属性) | 1000点 |
| #hoge | 100(ID属性) | 100点 |
| li.color.label | 1(要素名) + 10(クラス属性) + 10(クラス属性) | 21点 |
| table tr td.color | 1(要素名) + 1(要素名) + 1(要素名) + 10(クラス属性) | 13点 |
| div + *[href$=”com”] | 1(要素名) + 0(ユニバーサルセレクタ) + 10(属性セレクタ) | 11点 |
| h1 div + span | 1(要素名) + 1(要素名) + 1(要素名) | 3点 |
| li:last-child | 1(要素名) + 1(擬似要素) | 2点 |
デベロッパーツール（検証ツール、開発モード）を使いながら検証していく。
paddingプロパティはコンテンツの外側でborderの内側の領域です。つまりpaddingはコンテンツとborderの間の余白を調整します。paddingはWebページに配置される要素のサイズに影響しますが、別の要素との距離には影響しません。
要素間の余白の調整はmarginプロパティを使います。marginは要素のサイズには影響しません。
フォントはGoogleフォントが無料で使えるようになっているので、フォント指定はGoogleフォントがおすすめ
フォントの行間はpt×1.3が見やすいと言われている。
セレクタの得点について
class名はページ内で何か所も指定できる
id名はページ内で１か所しか指定できない
＃がついてたらid
参考サイト
L3.8.1 セレクタ得点表
https://html-css.hamaya2020.com/lesson-3.html#L3-8
コンテンツの周りのスペース
paddingは書いたとおりにでるが、marginは相殺が起きるので思った通りにできない場合がある。可能であれば、paddingだけで仕上げるのが簡単。
widthとhight
横幅は指示することが多いが、縦幅は指示することはほとんどない。正方形の箱を作るときは指定することがある。
float/clear プロパティ（回り込み／回り込み解除）
HTMLとCSSの初期からあるプロパティでちょっと難しい。CSSのバージョン３から変わってflexboxに代わるので、知識として知っておけばよい。
授業の感想
HTMLよりCSSのほうが整理整頓大事かと思った。
何回やってもエラーが出るので、慣れていきたい。
コードの説明をただ聞いているだけで、たまに何を聞いているかわからないときがあった。実践の時に体感して確認したい。