ＣＳＳ ６日目
おさらい
●画像を入れるときは、デザインの幅を広げるために
「figure要素」で「img要素」を囲んでおく
★インライン要素はブロック要素に入れる★
<figure class="○○">
<img src="img/●●.jpg" alt="○○">
</figure>●要素セレクタの記述は上の方に書く
要素セレクタが上・クラスセレクタが下、、、が管理しやすい
figure {
margin: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}●floatのデザインが出てきたら
「alignleft」「alignright」「aligncenter」の記述を
先にCSS側に用意しておく
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
text-align: center;
}●margin左右autoでの画像中央揃えはうまくいかない
- margin左右autoは基本的にブロックレベル要素に使用する
- ブロックレベル要素に指定した際も幅の指定とセットで使わないと
要素が中央に移動しない
※幅の指定によって生じる余白を自動割振りするため
●class名等CSSに定義を指定した時に
コメントアウトして「どういう定義を記述しているのか」をメモしておくといい
/* はみ出た要素をスクロール表示 */
.scrollBox {
overflow-x: auto
}第１６章：セレクタの種類
基本セレクタ
要素セレクタ：要素名で場所を特定
サイト全体で使用するデザインで使用
場所を限定することを意図していない
要素名 {
プロパティ名: 値;
}
HTML
<h2>見出し</h2>
CSS
h2 {
color: #f00:
}classセレクタ：class名で場所を特定
要素に名前を付けてデザインする
場所を限定する際に使用
同じデザインを複数個所に使用できる
.クラス名 {
プロパティ名: 値;
}
HTML
<h2 class="title">見出し</h2>
CSS
.class {
color: #f00;
}class属性の特徴
●HTMLファイル内で同じclass名を複数使うことができる
同じ内容のグループが複数ある場合に、同じclass名を使用できる
同じclass名を指定しておくことで、CSSでデザインする際に複数個所に同じデザインを指定することができ便利
●１つの要素に複数のclass名をつけることができる
「半角スペース」で区切ることで複数のclass名を指定できる
idセレクタ：id名で場所を特定
要素に名前を付けてデザインする
場所を限定する際に使用
同じデザインを複数個所に使用できない
※現在はCSSセレクタとしてはあまり使わない（デザイン定義にはあまり使わない）
#id名 {
プロパティ名: 値;
}
HTML
<div id="group">グループ</div>
CSS
#group {
color: #f00;
}id属性の特徴
●１つのHTMLファイル内で同じid名を複数使うことはできない
一度つけたid名を別場所に使えない
同じid名を複数使うと文法エラーとなる
class名に比べて使い勝手が悪いため、グループにid名を使うことはあまりない
class名・id名の命名規則
- 「半角英数字」「ハイフン（-）」「アンダーバー（_）」を使用する
- 最初の文字に「数字」「2つのハイフン（–）」「ハイフン直後の数字（-1）」は使えない
- 大文字と小文字は区別される
classセレクタを使ってみる
HTML
<aside>
<h2 class="asideTitle">アサイド見出し2</h2>
・
・
・
</aside>
CSS
/* クラスセレクタ */
.asideTitle {
color: #f00;
}子孫セレクタ（半角スペース区切り）：子孫要素を対象に絞り込んで特定
複数個所を「半角スペール」で区切りながら特定する
「１つ目のセレクタの子要素である２つ目のセレクタを対象」という風に場所を絞り込む
子孫セレクタと違い、子要素（１つ下の階層）に限定される
絞り込むセレクタをの数はいくつでもOK
複数のセレクタを半角スペースで区切って指定
HTMLの入れ子構造を利用して場所を特定
パーツ単位でデザインする際に使用する
セレクタ セレクタ セレクタ {
プロパティ名: 値;
}セレクタ部分は「要素セレクタ」「classセレクタ」「idセレクタ」等、どれでもOK
子セレクタ（ > 区切り）：１つ下の階層のみを対象に絞り込んで特定
複数個所を「>（大なり記号）」で区切りながら特定する
「１つ目のセレクタの中に入れ子になっている（子孫要素である）２つ目のセレクタを対象」という風に場所を絞り込む
絞り込むセレクタをの数はいくつでもOK
複数のセレクタを「>」で区切って特定
※子要素のみを対象にする
HTMLの入れ子構造を利用して場所を特定
使用頻度は低い
セレクタ > セレクタ {
プロパティ名: 値;
}セレクタ部分は「要素セレクタ」「classセレクタ」「idセレクタ」等、どれでもOK
子孫セレクタを使ってみる
<aside>
<h2>アサイド見出し2</h2>
<p>
サンプルテキストサンプルテキストサンプルテキスト
</p>
</aside>aside h2 {
color: #f00;
}子セレクタを使ってみる
<article>
<h1>記事見出し1</h1>
<p>
サンプルテキストサンプルテキストサンプルテキスト
</p>
<h2>記事見出し2</h2>
<p>
サンプルテキストサンプルテキストサンプルテキスト
</p>
<blockquote>
<p>
引用文引用文引用文引用文引用文引用文引用文
</p>
</blockquote>
・
・
</article>article > p {
background-color: #ccc;
}
グループセレクタ（カンマ区切り）：複数個所に同じスタイルを定義
セレクタ, セレクタ, セレクタ, {
プロパティ名: 値;
}セレクタ部分は「要素セレクタ」「classセレクタ」「idセレクタ」等、どれでもOK
●例）figure要素にfloatを定義して崩れちゃった
↓ 見出しの回り込みをまとめて解除
h1, h2, h3, h4 {
clear: both;
}
★６日目はここまで・・・
来週から11階⇒Ｂ１教室へ移動なのでお引越し準備