HTML・CSS独学応援 3-3「CSSを書いてみよう」

今回の目標

今回の目標は、
「CSSを自分で書いてみる!」です。

以下のような流れで解説していきます。

  1. サンプルコードでCSSの確認
  2. サンプルコードを変更してみる
  3. サンプルコードに追加でCSSを書く

サンプルコードとサンプル画像

今回は、こんな感じのサンプルを使って練習します。

サンプル画像1

見出しの部分、「れおの冒険」の文字をCSSで赤色に変更しています。

サンプルコード

エディターにサンプルコードを、コピーして表示を確認しください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSSを書いてみよう</title>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>れおの冒険</h1>
        <p>昔々あるところにレオというライオンがいました。</p>
        <P>れおのトレードマークは、赤いアロハシャツです</P>
        <p>管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>
</html>

<head>タグの中に、
<style>というものがあるのが確認できます。

この<style>の中に、CSSを書く方法で練習します。

CSSの書き方は、
プログラミング独学応援 第9回 「CSSの書き方」
を参考にしてね。

見てみよう

<body>タグを見てみよう

まず、サンプルコードの<body>の中身を確認してみよう。

  <body>
        <h1>れおの冒険</h1>
        <p>昔々あるところにレオというライオンがいました。</p>
        <P>れおのトレードマークは、赤いアロハシャツです</P>
        <p>管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>

この部分が、webページとして表示されます。

CSSなし
CSSあり

「れおの冒険」の色が違うね

CSSで「赤くして」って指示を出しているので
「れおの冒険」の文字部分の色が変わっています。

CSSを見てみよう

    <head>
        <meta charset="UTF-8">
        <title>CSSを書いてみよう</title>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>

<head>の中に、<style>要素があります。

<style>要素は、
「この中にCSSを書きますよ。」って言う意味です。

今回指定しているCSSは、

h1 {
   color: red;
   }

「<h1>のcolorをredにして」という指示を出しています。

やってみよう

・<h1>の文字を青にしてみよう

エディターにコピーした
サンプルコードをいじって、CSSによる表示の変化を体験してみましょう。

  1. <head>の中の<style>要素を見つけてください。
  2. CSSの部分を変更してみましょう
    ∟color: red;をcolor: blue;に変えてみましょう。

ヒント

h1 {
   color: red;
   }

サンプルコードの上記の部分を、
以下のように書き換えてみてください。

h1 {
   color: blue;
   }

表示結果

変更前
変更後

見出しの「れおの冒険」部分の色が上記のように変わります。

・<p>の文字を赤にしてみよう

<P>の部分の色を赤色に変更してみよう。

「昔々あるところに・・・・・」の部分に対し
CSSを書いてみましょう。

ヒント

上記の「・<h1>の文字を青にしてみよう」では、
「<h1>のcolorをblueにして!」っという指示を出しました。

今回は「<p>のcolorをredにして!」っというCSSを
書くことができればOKです

答えのコードは最後に記載します。
まずは自分で挑戦してみてください。

表示結果

変更前
変更後

まとめ

今回は、HTMLにCSSを付ける体験をしてもらいました。

いかがでしたか?
自分で、サンプルコードをいじることはできましたか?

シンプルなもんでしたが
CSSの書き方の基本でした。

ぜひ、自分の手で試してみてくださいね。

答え

<p>の色を赤にしてみようの答えのコードです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>CSSを書いてみよう</title>
        <style>
            h1 {
                color: blue;
            }
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>れおの冒険</h1>
        <p>昔々あるところにレオというライオンがいました。</p>
        <P>れおのトレードマークは、赤いアロハシャツです</P>
        <p>管理人さんは、レオが大好きでした。</p>
        <a href="https://www.google.com/?hl=ja">Googleで調べる</a>
    </body>
</html>

© 2021 ーれおの部屋ー