CSS layout3 〜レイアウト横並び〜

下記のWebページを内部スタイルシート形式で作成してください。
事前準備
ヒント
こたえ
- 解答例

下記のWebページを内部スタイルシート形式で作成してください。

■表示状態1のレイアウトを■表示状態2に修正してください。

■表示状態1(セミナーとスクールの２つのコンテンツが縦に並んでいる状態)

■表示状態2(セミナーとスクールの２つのコンテンツが横に並んでいる状態)

事前準備

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

「webst8」フォルダの中に「css-layout3」フォルダを作成して、Atomで「lesson-layout3.html」を新規作成します。

以下はCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson-layout3.html」に内部スタイルシート形式でCSSを記述していってください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSSセミナー</title>
  <style media="screen">
  *{
    margin: 0;
    padding: 0;
  }
  header{
    background-color:lime;   
  }
  #main{
    background-color: skyblue;
  }
  footer{
    background-color: #999;
  }
  .content{
    width: 960px;
    margin: 0 auto;
  }
  .seminar{
    width: ???;
    float: ???;
  }
  .school{
    width: ???;
    float: ???;
  }
  .clear{
    clear:???
  }
  .text-center{
    text-align: ????
  }
  </style>
</head>
<body>
  <header>
    <div class="content">
      <h1>CSSの練習</h1>
      <h2>ヘッダーエリア</h2>      
    </div>
  </header>
  <section id="main">
    <div class="content">
      <div class="seminar">
        <h2 class="text-center">ウェブストエイトのセミナー</h2>
        <p class="text-center">
          <img src="images/img1.jpg" alt="">
        </p>
        <p>
          ウェブストエイトでは、これからホームページを作成したいけど詳しいことはわからない初心者の方向けにWordPress・HTML・CSS・SEO対策などの講座を開催しています。
          <br><br>
          初めての人にはまずWordPressセミナーを受講いただくのがおすすめです。
        </p>        
      </div>
      <div class="school">
        <h2 class="text-center">ウェブストエイトのスクール</h2>
        <p class="text-center">
          <img src="images/img2.jpg" alt="">
        </p>
        <p>
          ウェブストエイトは自分でホームページ作成して集客したい方向けの少人数制の個別指導スクールです
          <br><br>
          ウェブストエイトでは受講生が知識だけではない実践的なノウハウを身につけてもらうために、Web(箱)の作り方だけではなくコンテンツ(中身)の作り方にも焦点を当ててお教えいたします。 
        </p>              
      </div>
    </div>
    <div class="clear"></div>
  </section>
  <footer>
    <div class="content">
      <p>
        ©Copyright2018 大阪のWebスクール
      </p>      
    </div>
  </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

margin: 0;

padding: 0;

}

header{

background-color:lime;

}

#main{

background-color: skyblue;

}

footer{

background-color: #999;

}

.content{

width: 960px;

margin: 0 auto;

}

.seminar{

width: ???;

float: ???;

}

.school{

width: ???;

float: ???;

}

.clear{

clear:???

}

.text-center{

text-align: ????

}

</style>

</head>

<body>

<h1>CSSの練習</h1>

<h2>ヘッダーエリア</h2>

</div>

</header>

<h2 class="text-center">ウェブストエイトのセミナー</h2>

</p>

<p>

ウェブストエイトでは、これからホームページを作成したいけど詳しいことはわからない初心者の方向けにWordPress・HTML・CSS・SEO対策などの講座を開催しています。

初めての人にはまずWordPressセミナーを受講いただくのがおすすめです。

</p>

</div>

<h2 class="text-center">ウェブストエイトのスクール</h2>

</p>

<p>

ウェブストエイトは自分でホームページ作成して集客したい方向けの少人数制の個別指導スクールです

ウェブストエイトでは受講生が知識だけではない実践的なノウハウを身につけてもらうために、Web(箱)の作り方だけではなくコンテンツ(中身)の作り方にも焦点を当ててお教えいたします。

</p>

</div>

</section>

<p>

</p>

</div>

</footer>

</body>

</html>

■上記ソースコードの表示状態

■下記のように横並びにできていれば完了です。

画像はこちらをダウンロードして利用して下さい。

ヒント

横並びはfloatで実現することができます。

横並びにしたい要素に対して、floatの設定とwidthの設定をしましょう。
横並びにした後でfloatの解除を行いましょう。

詳細はこちらをご確認ください。
CSSのfloatプロパティで要素を横並びにする方法

こたえ

解答例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>はじめてのCSSセミナー</title>
  <style media="screen">
  *{
    margin: 0;
    padding: 0;
  }
  img{
    max-width: 100%;
  }
  header{
    background-color:lime;   
  }
  #main{
    background-color: skyblue;
  }
  footer{
    background-color: #999;
  }
  .content{
    width: 960px;
    margin: 0 auto;
  }
  .seminar{
    width: 450px;
    float: left;
  }
  .school{
    width: 450px;
    float: right;
  }
  .clear{
    clear: both;
  }
  .text-center{
    text-align: center;
  }
  </style>
</head>
<body>
  <header>
    <div class="content">
      <h1>CSSの練習</h1>
      <h2>ヘッダーエリア</h2>      
    </div>
  </header>
  <section id="main">
    <div class="content">
      <div class="seminar">
        <h2 class="text-center">ウェブストエイトのセミナー</h2>
        <p class="text-center">
          <img src="images/img1.jpg" alt="">
        </p>
        <p>
          ウェブストエイトでは、これからホームページを作成したいけど詳しいことはわからない初心者の方向けにWordPress・HTML・CSS・SEO対策などの講座を開催しています。
          <br><br>
          初めての人にはまずWordPressセミナーを受講いただくのがおすすめです。
        </p>        
      </div>
      <div class="school">
        <h2 class="text-center">ウェブストエイトのスクール</h2>
        <p class="text-center">
          <img src="images/img2.jpg" alt="">
        </p>
        <p>
          ウェブストエイトは自分でホームページ作成して集客したい方向けの少人数制の個別指導スクールです
          <br><br>
          ウェブストエイトでは受講生が知識だけではない実践的なノウハウを身につけてもらうために、Web(箱)の作り方だけではなくコンテンツ(中身)の作り方にも焦点を当ててお教えいたします。 
        </p>              
      </div>
    </div>
    <div class="clear"></div>
  </section>
  <footer>
    <div class="content">
      <p>
        ©Copyright2018 大阪のWebスクール
      </p>      
    </div>
  </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

margin: 0;

padding: 0;

}

img{

max-width: 100%;

}

header{

background-color:lime;

}

#main{

background-color: skyblue;

}

footer{

background-color: #999;

}

.content{

width: 960px;

margin: 0 auto;

}

.seminar{

width: 450px;

float: left;

}

.school{

width: 450px;

float: right;

}

.clear{

clear: both;

}

.text-center{

text-align: center;

}

</style>

</head>

<body>

<h1>CSSの練習</h1>

<h2>ヘッダーエリア</h2>

</div>

</header>

<h2 class="text-center">ウェブストエイトのセミナー</h2>

</p>

<p>

初めての人にはまずWordPressセミナーを受講いただくのがおすすめです。

</p>

</div>

<h2 class="text-center">ウェブストエイトのスクール</h2>

</p>

<p>

ウェブストエイトは自分でホームページ作成して集客したい方向けの少人数制の個別指導スクールです

</p>

</div>

</section>

<p>

</p>

</div>

</footer>

</body>

</html>

レッスン一覧

CSS layout3 〜レイアウト 横並び〜

下記のWebページを内部スタイルシート形式で作成してください。

事前準備

ヒント

こたえ

解答例