HTML7 〜グループタグ〜

下記のWebページを作成してください。
設定手順
ヒント
こたえ
- ソースコード

下記のWebページを作成してください。

divタグとspanタグを利用して、下記のWebページを作成してください。

設定手順

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。

「webst8」フォルダ上に、「html-lesson7」フォルダを作成します。

「html-lesson7」フォルダ上にファイル名「lesson7.html」を新規作成してWebページを作成します。

下記のHTMLコードをコピーして貼り付けてから、spanタグ、divタグを適切な箇所に入れてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <style media="screen">
      div{
         background-color:pink;
         width:500px;
         margin:0 auto;
         text-align: center;
      }
      span{ 
        background-color:aqua;
      }
    </style>
  </head>
  <body>
    
    <p>spanタグを利用して背景水色にしています</p>
    
    <p>divで背景ピンク色にしています</p>
    <p>divで幅500pxにしています</p>
    <p>divで中央寄せにしています</p>
    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのHTML</title>

div{

background-color:pink;

width:500px;

margin:0 auto;

text-align: center;

}

span{

background-color:aqua;

}

</style>

</head>

<body>

<p>spanタグを利用して背景水色にしています</p>

<p>divで背景ピンク色にしています</p>

<p>divで幅500pxにしています</p>

<p>divで中央寄せにしています</p>

</body>

</html>

ヒント

参考サイト：
3-13 divタグ | 初心者がはじめに覚えておきたい HTML の基本とタグを紹介

3-13 divタグ | 初心者がはじめに覚えておきたい HTML の基本とタグを紹介

こたえ

下記zipファイルに答えを格納しています。
html-lesson7

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <style media="screen">
      div{
         background-color:pink;
         width:500px;
         margin:0 auto;
         text-align: center;
      }
      span{ 
        background-color:aqua;
      }
    </style>
  </head>
  <body>
    
    <p>spanタグを利用して<span>背景水色</span>にしています</p>
    
    <div>
      <p>divで背景ピンク色にしています</p>
      <p>divで幅500pxにしています</p>
      <p>divで中央寄せにしています</p>      
    </div>
  
  </body>
</html>