まぬねこの足跡。。。

備忘録＋たのしさ＋ひっそりと

トップ > CSS > CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)

CSS

CSS

見た目のスタイルを設定

CSS 記述方法

1. インラインstyle

HTMLファイル：タグに直接スタイルを記述

<p style="color: green; background-color: orange">緑文字でオレンジ背景</p>

表示イメージ

緑文字でオレンジ背景

ちょこっとメモ

スタイルの継承

親のタグにスタイルを設定：子のタグにも適用

2. styleタグに記述

<head>
     :
    <style>
      p {
        color: red;
      }
    </style>
</head>
<body>
    <p>赤い文字</p> 
</body>

表示イメージ

赤い文字

3. CSSファイルを読込む

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>赤い文字</p> 
</body>

style.css

@charset "utf-8";
p {
    color: red;
}

表示イメージ

赤い文字

セレクタ

要素セレクタ

P(ｾﾚｸﾀ)｛
　　color(ﾌﾟﾛﾊﾟﾃｨ)：red(値)；
　　｝

classセレクタ

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="moji">赤い文字</p> 
</body>

style.css

.moji {
    color: red;
}

表示イメージ

赤い文字

idセレクタ

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p id="moji">赤い文字</p> 
</body>

style.css

#moji {
    color: red;
}

表示イメージ

赤い文字

全称セレクタ

すべてに適用

* {
  color: red;
}

複数のセレクタ

h1, p {
  color: red;
}

子セレクタ・子孫セレクタ

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
<article>
  <h1>メイン</h1>
  <p>サブ</p>
  <div>
    <p>１行目</p>
    <p>２行目</p>
  </div>
</article>
</body>

style.css

article p {
  color: red;
}
表示イメージ

メイン

サブ

１行目

２行目

子セレクタのみ

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
<article>
  <h1>メイン</h1>
  <p>サブ</p>
  <div>
    <p>１行目</p>
    <p>２行目</p>
  </div>
</article>
</body>

style.css

article > p {
  color: red;
}

表示イメージ

メイン

サブ

１行目

２行目

兄弟セレクタ：同一階層要素

index.html

<head>
       :
    <link rel="stylesheet" href="style.css">
</head>
<body>
<article>
  <h1>メイン</h1>
  <p>サブ</p>
  <div>
    <p>１行目</p>
    <p>２行目</p>
  </div>
    <p>３行目</p>
</article>
</body>

style.css･･･「+」最初の兄弟要素だけ

h1 + p {
  color: red;
}
表示イメージ

メイン

サブ

１行目

２行目

３行目

style.css･･･「~」兄弟要素すべて

h1 ~ p {
  color: red;
}
表示イメージ

メイン

サブ

１行目

２行目

３行目

擬似クラス

状態

条件

  • :first-child：最初の兄弟要素
  • :last-child：最後の兄弟要素
  • :nth-of-type(n)：n番目の要素

特定部分の生成

  • ::before：要素の前に子要素
  • ::after：要素の後に子要素
  • ::first-letter：要素の最初の１文字

コメント

/* コメント */

優先度

同じセレクタ

後から記述したCSSが適用

異なるセレクタ

高　!important ＞インライン属性＞id＞class＞要素＞全称セレクタ　低

詳細度

セレクタの内容がより具体的

セレクターの重み分類

高　ID列ーCLASS列ーTYPE列　低
ID列：ID(#example)セレクター
CLASS列：クラス(.myClass)、属性([type="radio"])、擬似クラス(:hover)セレクター
TYPE列：要素(p)、擬似要素(::before)セレクター
カウントなし：全称(*)セレクター、擬似クラス(:where())

CSS リセット

デフォルトのCSSを解除