🐤

4/26の覚え書き 2

2022/04/28に公開

CSSの基本（p.77まで）

書き方
・基本構造はどこの{何を：どうする；}
・「どこの」はセレクタ、「何を」はプロパティ名、「どうする」は値
・ p{color:red;} なら、p要素の文字を赤くする、という意味
・「何を」「どうする」は複数書くことができる
・プロパティ名に応じて入れることのできる値は変わる

デベロッパーツール
・右クリック→検証か、Comman＋Option＋iで起動
・上部分がHTMLで、下部分がCSS（ツールが下側に出た場合は左がHTMLで、右がCSSになる）
・左上にあるセレクトボタンを押して要素をクリックすると、その要素に適用されているCSSが一覧化されるので、CSSが正確に反映されているかを確認できる。
・ブラウザ上で一時的にCSSを適用させたり、カラーコードを習得できたりもする。

CSSファイルとHTMLファイルの紐付け
・CSSファイルの一行目には @charset"utf-8"; と書く。これはCSSのお決まりのフレーズ（文字コードの指定）。
・HTMLファイルの <head>と</head>の内の五行目にCSSを読み込む記述をする。
<head>
<meta chaset="UFT-8">
<link rel=stylesheet href="適用するCSSファイル">
<title> タイトル </title>
</head>
・読み込みが成功しているかの確認をするために、一時的に背景に色をつけて確認してみる（色はなんでもいい）
body{
background-color: pink;
}
・CSSにもコメントアウト可能

色が変わらない場合
　読み込みミスの調べ方
　・デベロッパーツールを開いて<head>タブの左側にある▶︎をクリック
　・<link>タグのherfの属性値にカーソルを合わせて右クリックし、「Open in new tab」をクリック
　・CSSファイルが開くかを確認する

記述ミスの調べ方
　・CSSを適用させたはずの要素を選択（先ほどの背景に要素をつけた場合は、<body>タグを選択する）
　・「Styles」タブで目的のCSSを確認するプロパティ名や値の書き方にミスがあると取り消し線が引かれ、黄色三角の警告マークが表示される。
　・スペルミスや半角全角のミス、単位のつけ忘れなどをチェックする。

HYMLファイルにCSSを直接書き込む方法
・<hesd>タグ内に<style>タグを書き、その中にCSSを書く。記述したページにのみCSSが反映されるため、1ページだけのサイトやそのページのみのCSSを書くときなどに使う。
・HTMLタグにstyle属性として直接書く。一時的なお知らせなど。短期的なCSSの適用が必要な時に使うことがある。
・どちらも特定の条件で使われるものなので、知ってるだけでおk。

デフォルトCSSのリセット
・HTMLファイルにリセットCSSを読み込むための記述をする（同時に適用するCSSファイルを読み込むための記述をしておくとヨシ）
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="リセットするためのCSSファイル">
<link rel="stylesheet" href="適用するCSSファイル">
<title> タイトル <title>
</head>
・CSSは後に読み込んだファイルが優先されるので、リセットCSSは最初に読み込むこと
・リセットCSSの他に、似た役割をする本としてノーマライズCSSとサニタイズCSSがある。
　ノーマライズCSS：デフォルトのCSSを生かしつつブラウザ間の差異を調整したもの。
　サニタイズCSS：ノーマライズCSSによく使うCSSを加えたもの。
・Web上にテンプレートがあったりするので、それを使わせてもらうのもおk。

ボックスモデルの理解
・HTMLでマークアップされたコンテンツは四角い領域を持つようになる。ボックスモデルとは、その四角い領域を構成する6つのCSSプロパティ（content、border、width、height、padding、margin）が、どのように四角を形成しいているかという概念。
　content：内容
　border：境界線
　width：ボックスの横幅
　height：ボックスの縦幅
　padding：内容と境界線の間、境界線の内側の余白
　margin：他のボックスとの距離。境界線の外側の余白
・Webページは、積み木よろしくこのボックスが積み重なっているイメージ。ボックスの6つのプロパティの値を変更してレイアウトを組んでいくことになる。

ブロックボックスとインラインボックス
・HTMLタグでマークアップされた要素の多くはブロックボックスとインラインボックスのどちらかの性質を持っている。この性質はCSSのdisplayプロパティの初期値によって決まる。
・displayプロパティはボックスの特性を決めるCSSのプロパティ。blockとinline以外にも値はあるが、ボックスモデルに影響するのは主にこの二つになる。
　ブロックボックス：可能な限り横幅いっぱいの領域を取ろうとする
　インラインボックス：単にインラインとも。主にブロックボックスの中に含まれ、マークアップしたコンテンツの幅と同じ幅の領域になる。テキストそのものもインラインボックスと同じ性質になる。
・マトリョーシカ……？
・HTML4.01での呼び方の名残で、ブロックレベル要素、インライン要素と呼ぶことがあるらしい。

Discussion