本日のアジェンダ
1限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて
2限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて
3限目
学科 HTML/CSS基礎⑦
CSSのプロパティと値を考える
4限目
学科 HTML/CSS基礎⑦
Webページ制作実践
5限目
学科 HTML/CSS基礎⑦
Webページ制作実践
本日のテーマ
レイアウト系プロパティを理解しましょう
本日のレポート
レイアウト系プロパティ【position-】【z-index】
- 元の表示位置（今いる場所＝初期値）からの相対位置に配置
「position: relative;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。 - 親要素からの相対位置に配置
基準になる親要素に「position: relative;」プロパティを指定して自要素に「position: absolute;」プロパティを指定します。
例えば、top/leftを0pxにした場合、親要素の左端にぴったりくっ付く - 画面（ウィンドウ）上の固定位置に配置
「position: fixed;」プロパティを指定して top/bottom/left/right プロパティで配置する位置を指定します。
本指定を行うとページをスクロールしても表示位置は変化しません。
- 要素の重なりの順序を変える
「z-index: 数値（大きい方が全面）」要素が重なったときのみ有効。
レイアウト系プロパティ【border-】
- -style: ボーダーのスタイル;
- -color: ボーダーの色;
- -width: ボーダーの幅;
- border: ボーダー一括指定;
ボーダーのスタイル・色・幅を一括して指定（ショートハンド）します。
スタイル・色・幅の指定は、任意の順序でスペースで区切って指定します。
本指定では上下左右を別々に指定することはできません。
その他のプロパティ
- border-radius: コーナーの角丸値;
ボックスの 4 つのコーナーの角丸を指定します。それぞれの角を指定可能。 - box-shadow: ボックスの影値;
ボックスに対して1つまたは複数の影を指定します。
ボックスの影値は、「水平方向の影のオフセット距離」・「垂直方向の影のオフセット距離」・「ぼかしの距離」・「広がりの距離」・「色」・「inset」の順でスペースで区切って指定します。ボックスの影値は、カンマ（,）で区切って複数指定することができます。 - content: 挿入コンテンツ;
要素の直前または直後に文字列や画像などのコンテンツの挿入を指定します。
content プロパティを適用できるのは ::before 疑似要素や ::after 疑似要素だけです。 - object-fit: はめ込み方法;
img タグや video タグのコンテンツのはめ込み方法を指定します。
指定した箱の大きさの中に収める方法（比率を崩さずに、トリミングなど）
基本的にはPhotoshopで画像の大きさを合わせたほうが良い。 - vertical-align: 垂直方向位置;
インラインブロック、表セルボックスの垂直方向位置を指定します。
擬似クラス系セレクタ
- セレクタ:link { プロパティ名: 値; }
未訪問リンクのスタイルを指定します。 - セレクタ:visited { プロパティ名: 値; }
訪問済リンクのスタイルを指定します。 - セレクタ:hover { プロパティ名: 値; } ※ホバーよく使う
要素にカーソルが乗った時のスタイルを指定します。
スマホの場合は対象の要素をタップしてから他の要素をタップするまでの間になります。 - セレクタ:active { プロパティ名: 値; }
要素がアクティブになった時のスタイルを指定します。
アクティブとは要素をクリックしてから離すまでの状態を示します。
スマホの場合はタップしている間になります。 - セレクタ:first-child { プロパティ名: 値; }
- セレクタ:last-child { プロパティ: 値; }
先頭（first-child）・最終（last-child）の子要素にスタイルを指定します。 - セレクタ:nth-child(n) { プロパティ名: 値; }
n 番目の子要素にスタイルを指定します。
n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。 - セレクタ :not(x) { プロパティ名: 値; }
親要素内で x を含まない要素を指定します。
例えば、「div :not(p) { color: #f00; }」と指定すると、親要素（div タグ）内にある子要素の中で p タグ以外の要素が対象になります。
擬似要素系セレクタ ※コロンが2個
- セレクタ::first-letter { プロパティ: 値; }
要素の 1 文字目を指定します。 - セレクタ::first-line { プロパティ: 値; }
要素の 1 行目を指定します。 - セレクタ::before { プロパティ: 値; }
- セレクタ::after { プロパティ: 値; }
要素の直前（::before）または直後（::after）へのコンテンツの挿入を指定します。
実際に挿入するコンテンツは、content プロパティで指定します。
制作物（レスポンシブ対応まで完成）
TOPに戻るボタンはブラウザだと正しく右下に固定表示されるが、画面コピーだとヘッダーに位置してしまう。
感想
マニュアルを見ながら自力で完成させることができた。
レスポンシブ対応のための記述はかなり複雑に感じたので現時点ではとりあえずコピペしただけ。
明日以降、再度初めから見直しながら、同時にオリジナルLPの構想もする。
