🐼

CSS ”Learn the basics CSS”

2023/07/27に公開

CSS

css基本

tech

CSSとは

CSSとはWebページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。

・WEBコンテンツのスタイルを指定するコード
・プログラミング言語、マークアップ言語ではなくスタイルシート言語
・HTML要素のスタイルを選択的に指定する時使用

🌂example

h1タグ内容に青い色を適用したようにHTML要素にもスタイルを指定することができます。

HTML + CSS 読み込み方（適用方法）

スタイルシートのコードが適用するには

🌥️外部CSS

HTMLファイル<head>タグの間に入れます。

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

🌥️内部CSS

内部CSSは<head>タグ内部に<style>を追加します。

    <style>
      h1 {
        color: blue;
      }
    </style>

🌥️inline CSS

スタイルを適用したい要素に直書きします。

<h1 style="color: blue">This is Title</h1>

優先度高い順

inline CSS
内部CSS
外部CSS

CSSルール

◽ Selector : スタイル与えたい要素を書きます。
◽ Declaration : スタイルを指定する要素を書きます。
◽ Property : HTML 要素をスタイル付けするための方法です。
◽ Property value : 値と呼びます。Propertyに値を与えます。

➰守るべきのルールがあります。

Selectorと別で宣言された全ては「{ }」で囲んであげます。
各宣言内では「:」コロンで区切ります。
各宣言内「;」セミコロンで区切ります。

CSSセレクタ（Selector）

🌤️CSS IDセレクタ

idセレクターはHTML要素のidを使ってそのid要素を選択します。
そのidを持っている要素を選択するにはハッシュ（#）を文字と要素のidを一緒に書きます。

#h1 {
  color: blue;
  width: 500px;
  height: 500px;
  background-color: skyblue;
}

<h1 id="h1">This is Title</h1>

🌤️CSS Classセレクタ

ClassセレクタはクラスがあるHTML要素を選択します。
そのclass要素を選択する為はトッド「.」とclass nameを一緒に書きます。

.h1 {
  color: blue;
  width: 500px;
  height: 500px;
  background-color: skyblue;
}

<h1 class="h1">This is Title</h1>

🌤️CSS 全ての要素セレクタ

全ての要素セレクタは「*」ページ全ての要素を選択します。

* {
  font-family: 'Zen Old Mincho', serif;
  color: var(--dfColor);
}

🌤️CSS グループ選択セレクタ

スタイルが同じの場合コードを最小限に抑えるために選択者をグループ化できます。

.ecomark_des,
.ecoaward_des {
  font-size: var(--fz18pt);
  font-weight: 700;
  margin-top: 1.5rem;
  line-height: 1.8;
}

🌤️CSS 擬似クラスセレクタ（Pseudo-class）

セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。

button:hover {
  color: blue;
}

🌞参考サイト