この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「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>