Zenn
Open20

HTML/CSS学習記録

CSS
webデザイン
shimizushimizu

HTML
タグで囲んで見出しやリンクといった意味を持たせる
開始タグと終了タグで囲む

shimizushimizu

vh
ビューポートの高さを表す単位

ビューポート
見ている画面全体のこと

svh
スモールビューポートの高さ

スモールビューポート
スマホで見るときにアドレスバーやタブバーが隠れて実際に表示されている部分

shimizushimizu

ｐ
paragraph
段落のこと
囲んだテキストは改行される

shimizushimizu

a
リンクを作成するタグ
href属性
リンクのとび先を指定する

shimizushimizu

li
リストを作る
親要素は必ずulかol
ul
リストが黒い点になる
ol
リストの最初が番号になる

shimizushimizu

window.scrollTo(0, document.body.scrollHeight);

scrollTo(): ウィンドウ全体を指定した座標にスクロールさせます。
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth",
});
left: 水平方向のスクロール位置を指定します。
top: 垂直方向のスクロール位置を指定します。

scrollIntoView():特定の要素へのスムーズスクロール
const targetElement = document.getElementById('target');
targetElement.scrollIntoView({ behavior: 'smooth' });

behavior オプション
smooth: スクロールをスムーズなアニメーションで行います。
instant: スクロールを単一のジャンプで即座に行います。
auto: スクロールの動作を scroll-behavior の計算値によって指定します。

shimizushimizu

Math.max:与えられた数字の中から一番大きな数字を見つける。最大値を求めることができる。小数点以下の数字もOK。

shimizushimizu

document.body.scrollHeight: ページの内容全体の高さ（スクロール可能な領域を含む）
document.documentElement.scrollHeight: HTML要素の全体の高さ
document.body.offsetHeight: ページの表示されている部分の高さ（パディングとボーダーを含む）
document.documentElement.offsetHeight: HTML要素の表示されている部分の高さ

shimizushimizu

window.scrollY は、ページの垂直方向のスクロール位置（ピクセル単位）を返すプロパティです。
具体的には：
window.scrollY は window.pageYOffset と同じ値を返します（pageYOffset は古いブラウザとの互換性のために存在します）。

以下のような場面でよく使用されます：
- スクロール位置に応じてアニメーションを実行
- 無限スクロールの実装
- スクロール位置によって要素の表示/非表示を切り替える

shimizushimizu

isIntersecting は、主にJavaScriptのIntersection Observer APIで用いられるプロパティで、ある要素が視覚的に表示されている領域（viewport）と交差しているかどうかを示す論理値（true または false）です。
true: 観察対象の要素がviewportと交差している（つまり、画面内に表示されている）状態
false: 観察対象の要素がviewportと交差していない（つまり、画面外にある）状態

shimizushimizu

boundingClientRect は、DOM要素のサイズや位置に関する情報を取得するためのプロパティです。より具体的には、要素の外接矩形（要素全体を囲む最小の矩形）を表す DOMRectReadOnly オブジェクトを返します。

shimizushimizu

DOMRectReadOnlyオブジェクトとは？
DOMRectReadOnly オブジェクトは、矩形の位置とサイズを表すためのインターフェースです。以下のプロパティを持ちます。

x: 矩形の左端のx座標
y: 矩形の上端のy座標
width: 矩形の幅
height: 矩形の高さ
top: 矩形の上端のy座標（yと等しい）
right: 矩形の右端のx座標（x + widthと等しい）
bottom: 矩形の下端のy座標（y + heightと等しい）
left: 矩形の左端のx座標（xと等しい）
boundingClientRectの使い道
要素のサイズや位置の取得: 要素の幅、高さ、画面上の位置などを取得し、JavaScriptによる動的なレイアウトやアニメーションに利用できます。
要素同士の位置関係の判定: 複数の要素のboundingClientRectを比較することで、要素同士が重なっているか、または特定の範囲内に収まっているかなどを判定できます。
ドラッグ＆ドロップ: ドラッグ中の要素のサイズや位置をリアルタイムで取得し、ドロップ先の領域を判定するのに利用できます。
Intersection Observer API: 要素がビューポートと交差しているかどうかを判定する際に、boundingClientRectの情報が使われます。

shimizushimizu

document.elementFromPoint(): このメソッドは、指定した座標にある要素を返します。
window.innerWidth / 2: 画面の横幅の半分、つまり画面の中心のX座標を表します。
window.innerHeight / 2: 画面の縦幅の半分、つまり画面の中心のY座標を表します。

shimizushimizu

closest() メソッド
JavaScriptでDOM要素の祖先要素を検索する

shimizushimizu

htmlの中にhead要素、body要素が入っていること。
headにはページに関する情報
bodyには実際に表示したい要素を書くこと

shimizushimizu

<!DOCTYPE html>
htmlのバージョンを指定。
上記は最新のもの。

shimizushimizu

文字コードを指定すると文字化けを防げる。
utf-8

shimizushimizu

8の倍数がデザインの基準として用いられる主な理由

①計算の簡便さ:
8は2の累乗数であり、コンピュータが扱いやすい数字です。
デザイン要素のサイズや間隔を8の倍数にすることで、計算が簡単になり、設計やコーディングの効率が向上します。

②視覚的なバランス:
8の倍数でデザインすることで、視覚的にバランスの取れたデザインになりやすいという経験則に基づいています。

8の倍数を使うメリット
・デザインの一貫性: 全ての要素が8の倍数で統一されることで、デザインに一貫性が生まれ、視覚的にすっきりとした印象を与えます。
・スケーラビリティ: 様々な画面サイズに対応しやすく、レスポンシブデザインの構築が容易になります。
・作業効率の向上: デザインツールやコーディングの際に、計算が簡単になり、作業効率が向上します。
チームでの共有: デザインルールを明確化し、チームメンバー間で共有しやすくなります。

8の倍数にこだわる理由
・計算の簡便さ: 8の倍数は、2の累乗数であり、コンピュータが扱いやすい数字です。
・視覚的なバランス: 8の倍数は、視覚的にバランスの取れたデザインになりやすいという経験則に基づいています。
・歴史的な背景: 多くのデザイナーが、長年の経験から8の倍数がデザインに有効であることを確信しているため、広く採用されています。