マークアップの練習
今まで学んだ要素名や属性を使用し、マークアップの練習を行いました。
実際に先生が入力している画面を共有してくださったので、理解できました。
インデントがされていると、美しく見やすいです！
CSSの基本構造について
- HTML ファイルとは別に記述する場合 これが主流
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”> - HTML ファイル内に記述する場合
<head>内に<style>で入力する - HTML タグにインラインで記述する場合
<div>や<p>にインラインで入力する
セレクタの記載方法
- 全称セレクタ { プロパティ: 値; }
- 型セレクタ要素名 { プロパティ: 値; }
- id セレクタ #id名 { プロパティ: 値; }
- class セレクタ .class名 { プロパティ: 値; }
- 子孫結合子セレクタ セレクタ セレクタ { プロパティ: 値; }
- 子結合子セレクタ セレクタ > セレクタ { プロパティ: 値; }
- 隣接兄弟結合子セレクタ（+） セレクタ + セレクタ { プロパティ: 値; }
- 一般兄弟結合子セレクタ（~） セレクタ ~ セレクタ { プロパティ: 値; }
幅・高さの単位
- px ピクセル値
<p style=”width: 200px; font-size: 30px; background: pink; line-height: 1;”>サンプル</p> - % 要素の割合 百分率
<div style=”background: skyblue; line-height: 1;”>親サンプル
<p style=”width: 20%; font-size: 200%; background: pink; line-height: 1;”>子サンプル</p></div> - em 要素の割合
<div style=”font-size: 20px; background: skyblue; line-height: 1;”>親サンプル <p style=”font-size: 2em; background: pink; line-height: 1;”>子サンプル</p></div> - rem ルート要素の割合 フォントの初期値は16ｐｘ
<div style=”font-size: 20px; background: skyblue; line-height: 1;”>親サンプル<p style=”font-size: 2rem; background: pink; line-height: 1;”>子サンプル</p></div> - vw 画面の表示幅の割合
<p style=”font-size: 3vw; background: pink; line-height: 1;”>サンプル</p> - vh 画面の高さの割合
<p style=”font-size: 3vh; background: pink; line-height: 1;”>サンプル</p> - calc (カルク)関数 値の計算
<div style=” background: skyblue; line-height: 1;”>親領域<p style=”width: calc(100% – 40px); margin: 0 auto; background: pink; line-height: 1;”>子領域</p></div>
色の指定方法
- カラーネーム
- #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
- #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
- #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
R２ケタ G２ケタ B２ケタ 各0～255まである - R２桁rgb(r,g,b)（rgb 関数）
- rgba(r,g,b,a)（rgba 関数）
- hsl(h,s,l)（hsl関数） トーンを統一できる
- hsla(h,s,l,a)（hsla関数）
- 線形グラデーション（linear-gradient 関数）
- 放射グラデーション（radial-gradient 関数）
※ｈ 色相 Ｓ 彩度 Ｌ 輝度 a 透明度0～1(100％)
コメント