この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

CSSの継承とは？

CSSの継承とは、親要素に指定したスタイルが、子要素にも自動的に引き継がれる仕組みのことです。まるで、親の性質が子に遺伝するように、スタイルも受け継がれていきます。

継承されるプロパティ：主にテキスト関連のスタイル（color 、font-family 、font-size 、text-align など）
継承されないプロパティ：主にボックスモデル関連のスタイル (width 、height 、margin 、padding 、borderなど)

`inferit` と `initial` キーワード

inherit と initial は、この継承のルールを意図的に操作するためのキーワードです。

`inherit`

「親から強制的に継承しろ」という命令
通常は継承されないプロパティ（border など）を、親要素から無理やり継承させたい場合に使う

`initial`

「全ての継承を無視して、初期値に戻せ」という命令
親から継承したスタイルをリセットし、そのプロパティが元々持っている CSS 仕様上のデフォルトの値に戻したい場合に使う

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0031</title>
    <style>
      .parent {
        color: blue;
        border: 2px solid red;
      }
      .child {
        border: inherit;
        color: initial;
      }
    </style>
</head>
<body>
    <main>
      <h1>CSSの継承</h1>

      <div class="parent">
        <p class="child">これは文章です。これは文章です。これは文章です。これは文章です。これは文章です。</p>
      </div>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>

</body>
</html>