この content というものには 幅 や 高 さがあるんですけども CSS でそれを 表 す 時 には こ の content という 物 自 体 を height や wedth という 値 で 表 します なので CSS で 幅 や 高 さを 指 定 するとき content そのものに 対

CSS 2 章 はじめに 大 切 なこと2つ ボックスモデル セレクターの 種 類 セレクターの 種 類 はたくさんあるので 覚 えるしかありません ボックスモデルを 理 解 しないと CSS ができません これは 重 要 すぎるほど 重 要 な 部 分 です! 各 html 要 素 には BOX モデルと 言 って 各 部 分 部 分 を 表 すようなものがある 具 体 的 な 図 で 見 ていきましょう まず 中 身 content という 内 容 という 部 分 が その BOX の 中 には 一 番 内 側 にあります 例 えば p と 書 いた 時 に p 要 素 だったら 内 側 に 中 身 が 入 ってくると 思 うんですけども それそのも のが 内 容 content というものです 1

この content というものには 幅 や 高 さがあるんですけども CSS でそれを 表 す 時 には こ の content という 物 自 体 を height や wedth という 値 で 表 します なので CSS で 幅 や 高 さを 指 定 するとき content そのものに 対 して H がいくつですよ W がいくつですよ とか 数 値 の 指 定 をするわけですね この content の 外 側 には padding(パディング)と 呼 ばれる 余 白 の 領 域 があります この 余 白 の 領 域 というのは content や H は W の 外 側 にありますので 例 えば padding というものを CSS で 指 定 した 時 には 実 際 には height の 大 きさに 加 えて padding の 高 さ width に 加 えて padding の 幅 が 加 算 された 大 きさになります 2

padding の 外 側 に 黒 い 線 が 引 かれていますが この 部 分 を border(ボーダー)と 言 います ようは 枠 線 の 事 です CSS を 使 うと 要 素 に 対 して 枠 線 を 引 いたりすることができるんですけども その 枠 線 はど こに 入 るのかというと padding の 外 側 に 入 ります そして 要 素 に 対 して 背 景 色 や 背 景 画 像 のバックグラウンド 関 係 の 指 定 をした 場 合 それは background と 矢 印 で 指 定 したところ ここがいわゆる 背 景 と 言 われるところ 3

さらに background の 外 側 には margin(マージン)と 呼 ばれる 領 域 があります これは 一 番 外 の 余 白 ですね なので P が 2 つ 並 んでいたとして その p の 間 を 離 したい あるいは 近 づけたいというような 感 覚 の 指 定 をするときには この margin を 使 って 外 側 の 余 白 の 大 きさを 指 定 してあげて 近 づけたり 離 したりということをします なので CSS を 使 って 要 素 の 大 きさを 指 定 してあげる 時 content の 幅 高 さにさらに padding の 大 きさも 加 わり さらに border の 太 さ( 更 にその border に 太 さがあればその 太 さも 加 わり) も 加 わり margin の 領 域 がある 場 合 には margin の 領 域 も 加 わって 全 部 ひっくるめて 一 つの 大 きさの 要 素 になります このあたりの 構 造 は モノとモノの 距 離 を 近 づけたり 離 したり というようなレイアウト をしていくときに 非 常 に 大 切 になりますのでしっかり 覚 えておいてください 特 に 左 右 に 並 べて 全 体 の 大 きさをいくつにするというような 計 算 が 入 ってくる 場 合 例 えば メインコンテンツの 全 体 の 幅 が 800 で サブコンテンツの 部 分 は 幅 が 200 です トータル 1000 ですというような 大 きさを 指 定 するとき これらの H や W それから padding の 幅 や 大 きさ border の 太 さ マージンの 領 域 全 部 ひっくるめてトータル 1000 になるように というような 計 算 をしなくてはいけないので どこがなんなのかということをしっかり 把 握 しておかないと これらの 計 算 ができないということですね 4

どんな 要 素 にもこういった 目 に 見 えない 領 域 というものがあります これらを CSS でコントロールすることでレイアウトをしていくということになるわけです 例 これで CSS の 指 定 など 何 もない 状 態 でブラウザで 見 てみます 特 に 何 も 指 定 していませんが 見 出 しと 文 章 の 間 には 隙 間 があります また 見 出 しと 文 章 の 外 枠 にも 余 白 があります この 辺 りが padding や margin と 呼 ばれているところです 実 は 要 素 というのはデフォルトでこれらの padding や margin を 持 っていることがありま す それはブラウザがこの 大 きさということを 定 義 していて それは W3C が 例 えば 見 出 しな らこのくらいの 余 白 文 章 であればこのくらいの 余 白 と 指 定 している それらをデフォル トで 持 っています そこに 対 して CSS を 使 って magin や padding を 指 定 することで これらの 大 きさなどを レイアウトしていくということです 5

例 えば こんな 風 にボーダーを 入 れます の 種 類 はソリッドです というのを 書 いた Solid というのは 実 線 の 事 です ボーダーは 1px で 線 の 色 は#000 で 線 こんな 感 じにボーダーが 入 りました それで ボーダーがどこだったかというと magin と padding の 間 Padding の 外 側 にひかれるのが border ですよ ということでしたね 見 出 し1に 関 しては padding が 全 くない 状 態 magin が 外 側 にある 状 態 ということになっ ています では padding を 増 やしてみましょう padding のまわりが 10px になったということなので どこが 広 がるか 考 えてみてください Padding というのは content と border の 間 ということですね 6

ですので 広 がるのはここです た ここが padding です 中 身 がこの 領 域 だったのに 対 し border と 中 身 の 間 にちょっと 隙 間 が 増 え background-color をつけましょう padding の 領 域 ですので このカラーはどこにつくのかというと こうなります グレーになったのは border の 内 側 です 7

同 じことをコピーして p にもやってみましょう そうすると ほとんど 同 じような 見 た 目 になりましたね 見 出 しグレーと 文 章 グレーの 間 に 白 い 余 白 がありますが ここが magin です 8

例 えば h1 に 対 して margin を 0 にしてあげると ちなみに CSS でゼロの 指 定 をするとき 単 位 は 関 係 ないのでゼロの 場 合 は 単 位 を 省 略 することが 出 来 ます 全 体 的 にちょっと 隙 間 が 減 りました ちょっと 縮 まった アフター これは margin をいじってない 状 態 ビフォア 9

pに 対 しても margin0にしてあげると これによって h1 と p の margin が 全 くなくなったということなので 要 素 と 要 素 はぴった りくっつきました このように 要 素 と 要 素 を 離 すくっつけるには padding border margin の 関 係 を 理 解 しておかないといけない まだ 上 と 左 にも 余 白 が 残 っている これはなにかというと body にも magin や padding という 要 素 がありますので body に 対 しても padding と margin を 0 としてあげると 10

これによって 完 璧 にブラウザの 枠 とくっついたという 状 態 このように 要 素 には border margin padding という 要 素 がありますので CSS でこれを コントロールするということが 大 切 なわけです 例 えば これはブロック 要 素 なので 幅 が 限 界 まで 広 がっています h1 に 対 して W を 300px にしてあげると 幅 が 300px になりました ただ どこが 300px になったかというと W や H というのは 実 際 には 要 素 そのもの content の 内 側 の 領 域 が 300px になったということですので 11

この 黒 枠 ボーダーまでの 大 きさは 幾 つかというと 12

黒 枠 全 部 の 大 きさは 322px ある 物 を 配 置 していくときは 足 し 算 をしてあげないといけない クロームにはこの 辺 りをわかりやすくする 機 能 が 付 いていて 右 クリック 要 素 を 検 証 こんなパネルが 出 てくる ここで 見 たい 場 所 h1にカーソルを 合 わせると 322 55px って 出 てますよね 13

ボックスモデルも 出 ている 要 素 にはそれぞれボックスモデルがあり それぞれに 対 して CSS をもって 数 値 指 定 をする ことでレイアウトするということ 非 常 に 大 切 ですので 覚 えておいてください 14

セレクターはどこを 選 ぶのかという 場 所 指 定 をすることを 以 前 お 話 ししましたけども セ レクタの 書 き 方 はいろいろな 種 類 があります HTML の 構 造 を 考 えて そこにたいしてどういうセレクターを 書 けば 自 分 が 一 番 見 たい 場 所 をピンポイントで 選 べるのかということを 考 えながらセレクターを 書 いていくことにな ります これから 2~3 章 でセレクターの 種 類 をどんどんやっていくんですけども 大 切 なことが2 つあります CSS のためだけに HTML をあまり 汚 さない 例 えば CSS を 使 ってここだけ 変 えたいので HTML の 構 造 を 無 理 やり 書 き 換 えちゃう そうやっ て CSS 側 に HTML を 寄 せて 書 くというやり 方 はお 勧 めしない 何 故 なら デザインのために HTML の 構 造 を 複 雑 にしたりとか 余 計 な class をふりまくると HTML 自 体 がごちゃごちゃしてしまいます 例 えば 更 新 して HTML の 構 造 が 変 わったとかですね そういうときメンテナンスが 非 常 にしにくくなります なので なるべくプレーンなシンプルな HTML を CSS に 指 定 できるように 色 々 考 える 必 要 がある ということ 15

そのためにも いろんな 種 類 のセレクターを 知 っていれば このセレクターの 書 き 方 だと これは 指 定 できないけど こっちのセレクターを 使 えばここが 選 べるよね と 考 え 方 など 思 いつくことが 出 来 ますので セレクターはたくさん 覚 えておきましょう 同 じことを 何 度 も 書 かない 同 じことを 何 度 も 書 かなくて 済 みます セレクターを 正 しく 知 っていれば 例 えば HTML のこことここに 共 通 したルールを 適 用 したい なんて 時 それぞれ 何 度 も 書 いているとコードが 長 くなってしまいます これもセレクターを 工 夫 することで 複 数 のカ 所 に 対 して 一 気 に 同 じルールを 適 用 する なんてことが 出 来 ますので やっぱりセレクターの 種 類 をたくさん 知 っておくということ は 大 切 なんです! これからどんどんセレクターをやっていくので どんな 特 徴 があるのか どういう 書 き 方 をするのか そうすると HTML のどこを 選 ぶことになるのか しっかり 踏 まえながら 覚 え ていくようにしましょう セレクターの 種 類 を 知 っていれば 知 っているほど CSS の 書 き 方 を 工 夫 することが 出 来 ます 引 き 出 しが 増 えていくことになるので 頑 張 って 覚 えていってください 16

もっとも! 基 本 的 なセレクター タイプセレクタをやっていきます element 要 素 名 例 えば h1 とか body とか 単 純 に 名 前 が 入 るところです そこをセレクターにし property 値 と 書 いていきいます 要 素 名 を 指 定 してスタイルを 適 用 する 最 も 基 本 的 なセレクタ タイプセレクタ といったり 要 素 セレクターと 言 ったり そんな 呼 び 方 をします そして ページ 内 に 同 じ 要 素 が 複 数 ある 場 合 はその 要 素 すべてに 適 用 される 例 えば p フォントサイズ 20px と 指 定 しておいて そのページに p が 複 数 出 てくれば 全 部 に 適 用 されるということ 全 部 のフォントサイズが 20px になりますよということ とてもシンプルなセレクターです 17

サンプルで 説 明 します ページの 中 に p が 1 個 あるだけの 状 態 ここに 要 素 名 が 来 るということがタイプセレクターの 書 き 方 です font-weight(ウェイト 文 字 の 重 さ つまり 太 さを 表 す)で bold と 入 れると 太 字 に 変 わ ります ブラウザで 見 ると 太 字 に 変 わっています 18

複 数 の 段 落 があれば 全 部 太 字 です ちなみに CSS は 書 き 換 えていませんので 先 ほどのままです 19

CSS の 方 をカラーを 変 えてあげると 全 部 に 適 用 されました これが 基 本 的 なタイプセレクタの 使 い 方 です 実 習 CSS02-1.html CSS02-1.css 両 方 ともテキストエディタで 開 きます Html の 方 に 指 示 が 書 いてあります CSS の 方 にセレクターを p としてカラープロパティを#0000ff この 色 にする ということ で 書 いてみてください 20

ユニバーサルセレクター(ゼンショウセレクターともいう) セレクタの 部 分 を*(アスタリスク) 記 号 にします アスタリスク 記 号 をセレクターにすると これはユニバーサルセレクターと 言 って この ページの 中 のすべての 要 素 が 対 象 になります ですので 正 直 使 いどころはそんなにないです あんまり 使 うこともないけど ルール 上 そんなものがある そのページに URI p 要 素 h1 要 素 などたくさんあったとして * でフォントサイズ 20px にしたら あらゆる 要 素 すべてが 20px になる 21

サンプルで 説 明 します text-decoration(テキストのデコレーション 装 飾 に 関 するプロパティ) underline( 下 線 ) 上 のは 要 素 が 一 個 だからいいんですけど 例 えばここに p も 加 えてみて p に 対 してもア ンダーラインが 入 る 22

二 つとも 上 に 線 が 適 用 される 元 々h1 や p には text-decoration はついてないので none としても 意 味 ないんですけど 例 えば a 要 素 ですね デフォルトでアンダーラインを 持 っているような 要 素 (link など) リンクの 下 線 を 消 したいときには none が 使 える ただ リンクは 下 線 があってユーザーがリンクと 気 が 付 いてくれるのでユーザービリティ 的 にはよろしくない まぁ そんなことが 出 来 る text-decoration があるということは 合 わせて 覚 えておくと 良 い と 思 います 23

class セレクタは 非 常 にたくさん 使 う 大 切 なセレクタの 1 つです 要 素 の class 属 性 を 指 定 してスタイルを 適 用 する これは 何 かというと 要 素 Html にはクラス 属 性 がふれるという 話 をしましたが HTML にはクラス 属 性 という 汎 用 属 性 をつけることが 出 来 ます その 属 性 に 入 っている 名 前 を 使 って スタイルを 適 用 するというものです 書 き 方 の 特 徴 としては 最 初 にピリオドが 入 ります このピリオドが 入 っていることによって class セレクタです!ということになりますので これは HTML の 方 に class 属 性 がついていることが 前 提 になりますので HTML を 書 く 段 階 で ここに 対 して class の 属 性 をつけて その 名 前 を 入 れておくと そこに 対 して class セレクタを 使 って 指 定 していくということになります class 属 性 は 複 数 の 要 素 に 対 して 同 じ 名 前 を 指 定 できる この p にも text という class 名 がついているし 他 の p にも 同 じように text という class 名 がついているなんてことが 出 来 るわけです なので 複 数 のカ 所 に 同 じようなルール 汎 用 的 に 使 いたいルール 24

例 えば 文 字 を 赤 くするなんて 言 う あちこちに 使 いたいルールを class 名 で 指 定 するなんてことを よく 使 う ではこれも 実 際 にやってみましょう サンプルを 使 って 説 明 します まず HTML にクラス 属 性 がついていないと 始 まりません ドット text ということで class セレクタですよ ということになる あとは 書 き 方 は 同 じです 25

Class 名 を tecxt としていますので text という class 名 がついていればルールが 適 用 され るということ p をもう 一 つ 増 やして class 名 はついてない 状 態 ついてない 方 には 適 用 されないということ やってしまいがちな 間 違 えというのは HTML の 方 にピリオドを 書 いてしまいがち ピリオドがつくのはあくまで CSS のセレクタの 方 です 26

Html のルール 上 class は 複 数 の 個 所 に 指 定 していいということになっていますので こうすると 全 部 の 個 所 に 同 じようにルールが 適 用 されます なので Class を 使 うときは 使 いまわしたい 汎 用 的 なルール 文 字 を 強 調 して 太 字 にして 赤 にするな どを class 名 で 降 っておくといいと 思 います そしてそれを class セレクターで 一 気 にまとめて 指 定 をしてあげるということをすれば HTML の 中 に 何 回 も 出 てくるけどそれは CSS の 方 で 一 発 で 複 数 個 所 を 指 定 するということが 出 来 るということですので とっても 便 利 なよく つかうセレクタです 覚 えておいてください 27

id セレクタも class セレクタとよく 似 ています HTML の 方 についている id 属 性 の 名 前 を 指 定 してスタイルを 適 用 するというやり 方 です Class と 違 うのは id セレクタはハッシュ 記 号 # を 使 います これで 始 まっていたら id セレクタですよ ということ #のあとに id の 属 性 の 名 前 を 書 くということです 記 号 が 違 うだけで とても 似 ている id セレクタと class セレクタですが 明 確 に 違 うとこ ろが もう1つあります これは HTML のルールですけれども id 属 性 というのは 要 素 に 対 して 固 有 の 名 前 をつける 同 じ 名 前 を 複 数 個 所 につけることはできません CSS で 同 じ 名 前 を 何 度 も 書 いてはいけませんということではなくて HTML 側 の 方 ですね HTML 側 で 一 か 所 に 名 前 を 付 けたのであれば その 名 前 は 別 の 場 所 に 着 けてはいけないと いう 決 まりがある そこに 注 意 して 下 さい それ 以 外 は class セレクタと 同 じです Id セレクタと class セレクタをどう 使 い 分 けていくかということなんですけども HTML 側 で id を 付 けるか class 属 性 のどっちを 付 けるかということですね これは 特 性 の 通 りで id 属 性 というものは 固 有 の 名 前 ですから 絶 対 他 に 何 も 出 てこないケ ース 28

例 えばよく 使 うのは ページの 中 のヘッダーの 部 分 を div で 囲 っておいて その div に 対 し て id のヘッダーにする ヘッダーというのはページの 中 に 1 回 しか 出 てこないので id を 使 っておいて 問 題 ないとい うことですね フッターとかもそうです 絶 対 に 1 回 しか 出 てこないものは id 属 性 を 使 って 名 前 を 付 ける それに 対 して class エレクタというものは 汎 用 的 なもの よく 出 てきて そこを 一 括 で 指 定 したい 場 合 そんなときは class 属 性 を 付 けて class セレクタで 指 定 する なんて 使 い 分 けをすると 良 い と 思 います サンプルを 使 って 説 明 します まずは HTML の 方 に id 属 性 がついてないとけませんので(p には id はつけませんがサン プルということでやっておきましょうか) 同 じ 名 前 は 付 けられないので 01.02 と 変 えておきます 29

背 景 が 変 わりましたね id 名 を 同 じ 名 前 で 二 つ 付 けてしまったとする 一 応 ルールは 適 用 されます ブラウザがうまいこと 解 釈 してくれるのですがルールですので 同 じ 名 前 は 使 わないよう にしましょう 二 つのところで 同 じ 名 前 を 使 いたいなら id ではなくて class を 使 うべきですね Id と class には 大 きいな 違 いがるんですけども ややこしいので 後 々やります id は 1 か 所 しか 使 っちゃいけないということと class とは 明 確 に 違 うということを 覚 えておいてください 実 習 02-3 のファイル 30

まとめ ボックスモデルの 構 造 は 嫌 というほど 使 っていくというか 考 えなくてはいけなくなるので 叩 き 込 んでおいてください 中 身 が 内 容 content があって HW があって その 外 側 に padding があって border があっ て margin がくるという この 順 番 ですね Padding border margin と 唱 えて 覚 えてください それらをのちのちコントロールするということで 覚 えておいてくださいね Id セレクター class セレクター 出 てくるのでよくよく 覚 えてください 31