見出し画像

htmlとcss　その３(chatGPTに変換してもらった)

仮分数ボリキ

その２の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;
}

説明:

  1. <head> タグ内にCSSファイルをリンクするための <link> タグを追加しました。

  2. インラインスタイルの font タグを <p> タグに変更し、クラス名 large-red-text を付けました。

  3. large-red-text クラスのスタイルを外部CSSファイルに定義しました。

これにより、HTMLとCSSが分離され、管理がしやすくなります。
ーーーーーーーーーーーー
ということです。
でもでも・・・ｰred-・・・  は今いちですね。red　といったら赤色しかないじゃありませんか。青色にしたかったらこのクラス名も変えないとしっくりいかない。
large-color-text
とかにして欲しいですね。

large-red-textの名称は（他の個所で使用していなければ）なんでも良いです。
abcdefgでもOKです。
class=・・・で指定している名称と一致しいてばOKです。
その場合は、styles.cssファイルでは、クラス名は　　.abcdefg 　　と書きます。

html+cssをブラウザで表示


この例文（test2.html）は、html+cssの例としては今一つだったかもしれません。
<b>や<h1>などはそのままcssに移行するのは厳しいいかもしれませんね。
次の投稿までに、html+cssの説明に良い例をもう少し検討してみます。


この記事が気に入ったらサポートをしてみませんか？