htmlとcss その3(chatGPTに変換してもらった)
その2のhtml文章を、例のchatGPTに修正してもらった。
今回は、
<font size="48" color="red"> おはようございます </font>
の部分だけがcssに移行された。
ーーー chatGPTの回答ーーー
修正後のHTML (test3.html):
<!DOCTYPE html>
<html>
<head>
<title>htmlの例題</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>おは<br>よう<br>ございます<br></p>
<b>おはようございます</b>
<h1>おはようございます</h1>
<h2>おはようございます</h2>
<h3>おはようございます</h3>
<p class="large-red-text">おはようございます</p>
</body>
</html>
外部CSSファイル (styles.css):
body {
font-family: Arial, sans-serif;
}
.large-red-text {
font-size: 48px;
color: red;
}
説明:
<head> タグ内にCSSファイルをリンクするための <link> タグを追加しました。
インラインスタイルの font タグを <p> タグに変更し、クラス名 large-red-text を付けました。
large-red-text クラスのスタイルを外部CSSファイルに定義しました。
これにより、HTMLとCSSが分離され、管理がしやすくなります。
ーーーーーーーーーーーー
ということです。
でもでも・・・ーred-・・・ は今いちですね。red といったら赤色しかないじゃありませんか。青色にしたかったらこのクラス名も変えないとしっくりいかない。
large-color-text
とかにして欲しいですね。
large-red-textの名称は(他の個所で使用していなければ)なんでも良いです。
abcdefgでもOKです。
class=・・・で指定している名称と一致しいてばOKです。
その場合は、styles.cssファイルでは、クラス名は .abcdefg と書きます。
この例文(test2.html)は、html+cssの例としては今一つだったかもしれません。
<b>や<h1>などはそのままcssに移行するのは厳しいいかもしれませんね。
次の投稿までに、html+cssの説明に良い例をもう少し検討してみます。
この記事が気に入ったらサポートをしてみませんか?