sit in a circle and chat happily

CSS 6日目

投稿日:2021-10-29
更新日:2022-03-24
HTML・CSS

おさらい

●画像を入れるときは、デザインの幅を広げるために
「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
}

第16章:セレクタの種類

基本セレクタ

要素セレクタ:要素名で場所を特定

サイト全体で使用するデザインで使用

場所を限定することを意図していない

要素名 {
  プロパティ名: 値;
}

HTML
<h2>見出し</h2>

CSS
h2 {
  color: #f00:
}

classセレクタ:class名で場所を特定

要素に名前を付けてデザインする
場所を限定する際に使用

同じデザインを複数個所に使用できる

.クラス名 {
  プロパティ名: 値;
}

HTML
<h2 class="title">見出し</h2>

CSS
.class {
  color: #f00;
}

class属性の特徴

●HTMLファイル内で同じclass名を複数使うことができる

同じ内容のグループが複数ある場合に、同じclass名を使用できる
同じclass名を指定しておくことで、CSSでデザインする際に複数個所に同じデザインを指定することができ便利

●1つの要素に複数のclass名をつけることができる

「半角スペース」で区切ることで複数のclass名を指定できる

idセレクタ:id名で場所を特定

要素に名前を付けてデザインする
場所を限定する際に使用

同じデザインを複数個所に使用できない

※現在はCSSセレクタとしてはあまり使わない(デザイン定義にはあまり使わない)

#id名 {
  プロパティ名: 値;
}

HTML
<div id="group">グループ</div>

CSS
#group {
  color: #f00;
}

id属性の特徴

●1つのHTMLファイル内で同じid名を複数使うことはできない

一度つけたid名を別場所に使えない
同じid名を複数使うと文法エラーとなる

class名に比べて使い勝手が悪いため、グループにid名を使うことはあまりない

class名・id名の命名規則

  • 「半角英数字」「ハイフン(-)」「アンダーバー(_)」を使用する
  • 最初の文字に「数字」「2つのハイフン(–)」「ハイフン直後の数字(-1)」は使えない
  • 大文字と小文字は区別される

classセレクタを使ってみる

HTML
<aside>
    <h2 class="asideTitle">アサイド見出し2</h2>

    ・
    ・
    ・
  </aside>

CSS
/* クラスセレクタ */
.asideTitle {
  color: #f00;
}

子孫セレクタ(半角スペース区切り):子孫要素を対象に絞り込んで特定

複数個所を「半角スペール」で区切りながら特定する
「1つ目のセレクタの子要素である2つ目のセレクタを対象」という風に場所を絞り込む
子孫セレクタと違い、子要素(1つ下の階層)に限定される
絞り込むセレクタをの数はいくつでもOK

複数のセレクタを半角スペースで区切って指定
HTMLの入れ子構造を利用して場所を特定

パーツ単位でデザインする際に使用する

セレクタ セレクタ セレクタ {
  プロパティ名: 値;
}

セレクタ部分は「要素セレクタ」「classセレクタ」「idセレクタ」等、どれでもOK

子セレクタ( > 区切り):1つ下の階層のみを対象に絞り込んで特定

複数個所を「>(大なり記号)」で区切りながら特定する
「1つ目のセレクタの中に入れ子になっている(子孫要素である)2つ目のセレクタを対象」という風に場所を絞り込む
絞り込むセレクタをの数はいくつでも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;
}
孫要素である「blockquote」内の「p」は定義の対象になっていない

グループセレクタ(カンマ区切り):複数個所に同じスタイルを定義

セレクタ, セレクタ, セレクタ, {
  プロパティ名: 値;
}

セレクタ部分は「要素セレクタ」「classセレクタ」「idセレクタ」等、どれでもOK

●例)figure要素にfloatを定義して崩れちゃった

 ↓ 見出しの回り込みをまとめて解除

h1, h2, h3, h4 {
  clear: both;
}

★6日目はここまで・・・
  来週から11階⇒B1教室へ移動なのでお引越し準備

カテゴリー