講義「CSS基礎/セレクタ」作業スペース

CSSの基本書式

リンクをコピーしました

See the Pen 講義_CSS_基本書式 by miyajima yuya (@pikawaka) on CodePen.

カスケード

リンクをコピーしました

See the Pen 講義_CSS_カスケード by miyajima yuya (@pikawaka) on CodePen.

CSSの適用方法

リンクをコピーしました

準備

リンクをコピーしました

1. classroomチャンネルで共有する「css-apply-cascade.zip」をダウンロードしましょう。
2. css-apply-cascade.zipをダブルクリックし解凍して、css-apply-cascadeフォルダをVisual Studio Codeで開きましょう
3. css-apply-cascadeフォルダの中にあるindex.htmlをGoogle Chromeにドラック&ドロップする

▼2

▼3

style要素で適用する方法

リンクをコピーしました

1
2
3
4
5
<style>
  p {
    color: blue;
  }
</style>

外部CSSファイルを読み込む方法

リンクをコピーしました

1
2
3
p {
  color: green;
}

1
<link rel="stylesheet" href="style.css">

1
2
3
p {
  color: pink;
}

style属性を追加する方法

リンクをコピーしました

1
  <p style="color:red;">CSSとは、文書構造を指定したHTML文書に対して、どのような装飾・配置にするのかを指定する言語のことです。</p>

セレクタ

リンクをコピーしました

基本セレクタ

リンクをコピーしました

See the Pen 講義_CSS_セレクタ by miyajima yuya (@pikawaka) on CodePen.

よく使うセレクタ

リンクをコピーしました

要素名に続けてクラス名を指定する

リンクをコピーしました

See the Pen 講義_CSS_よく使うセレクタ by miyajima yuya (@pikawaka) on CodePen.

子孫セレクタ

リンクをコピーしました

See the Pen 講義_CSS_子孫セレクタ by miyajima yuya (@pikawaka) on CodePen.

セレクタの詳細度

リンクをコピーしました

See the Pen 講義_CSS_セレクタの詳細度 by miyajima yuya (@pikawaka) on CodePen.