divとclass属性を使った課題に挑戦しよう

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

それではclass属性についてきちんと理解ができているか課題に取り組んで確かめましょう！

今回は左のHTMLの状態をdivやclassを上手く活用して右側のように装飾していくことがゴールです。

【Before】このHTMLを→

【After】classを使ってこのように装飾

課題の手順

❶環境の準備

以下に手順が記載してありますが、不安な方は「#09 CSSの課題｜シンプルなWEBページを作ろう」の環境準備の動画を参考にしてみてください。

手順01

デスクトップに「webliker」>「kadai-class」という課題用のフォルダを作成する

HTMLの課題の時と同様にweblikerというフォルダの中にkadai-classというフォルダを作りましょう。

手順02

VS Codeで「index.html」を作成し「kadai-class」の中へ保存する

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <!-- 1つ目のdiv -->
    <div>
        <h1>classをマスターしよう！</h1>
        <p>classは属性の1種です。</p>
        <p>複数の要素にいくらでも命名することができます</p>
    </div>
    
    <!-- 2つ目のdiv -->
    <div>
        <h2>命名のポイント！</h2>
        <ul>
            <li>なるべく英単語を使う</li>
            <li>誰が見てもわかりやすい名前をつける</li>
        </ul>
    </div>

</body>
</html>

VS Codeで新規ファイルを作成し「左のコード」をコピペ
index.htmlというHTMLファイルを作成
デスクトップ > webliekr > kadai-classへ保存

手順03

VS Codeで「style.css」を作成し「kadai-class」の中へ保存する

@charset "UTF-8";

VS Codeで新規ファイルを作成し「左のコード」をコピペ
style.cssというCSSファイルを作成
デスクトップ > webliekr > kadai-classへ保存

手順04

index.htmlを開いて表示をチェック

HTMLだけの表示では左のようになります。

❷実践｜課題に取り組もう

コピー用のカラーコード

#0B78D7

#FF6658

#E5E5E5

今回の課題も以前と同様に、上記のように指示を加えているので、それに従ってファイルの内容を変更していきましょう。

ポイントは２つです！

HTMLには「class名」を付ける必要がある
CSSには「class名」をセレクタとして「プロパティ」と「値」を書く必要がある

web兄さん

ヒントが少ない分、今までより少し難易度も上がりますが、これまで学習したことをきちんと理解できていればきっとできるはずです！

課題の解答

正解のHTMLのコードを確認する

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <!-- 1つ目のdiv -->
    <div>
        <h1>classをマスターしよう！</h1>
        <p class="bg-blue">classは属性の1種です。</p>
        <p class="bg-red">複数の要素にいくらでも命名することができます</p>
    </div>
    
    <!-- 2つ目のdiv -->
    <div class="content">
        <h2>命名のポイント！</h2>
        <ul>
            <li>なるべく英単語を使う</li>
            <li>誰が見てもわかりやすい名前をつける</li>
        </ul>
    </div>

</body>
</html>

HTMLの回答の解説

13行目と14行目に注目してください。<p>が２つありますが、それぞれ違う見た目であるため、class名を付けてCSSを分けなければいけませんよね。そのため.bg-blueと.bg-redというclass名をそれぞれ付けています。

次に16行目の<div>ですが、このHTMLには<div>が２つありますが、枠線をつけたい<div>は<h2>と<ul>を囲っている方のみですよね。そのため、2つ目の<div>に対して.contentというclass名を付けています。

👉正解のCSSのコードを確認する

.bg-blue{
    background: #0B78D7;
    color: #fff;
    padding: 10px;
}

.bg-red{
    background: #FF6658;
    color: #fff;
    padding: 10px;
}

.content{
    border: solid 1px #E5E5E5;
    padding: 40px;
}

CSSの回答の解説

1行目と7行目は２つの<p>にそれぞれつけたclass名をセレクタとして、異なるCSSを適用させています。

backgrond : #0B78D7とbackground: #FF6658と背景色の設定がそれぞれのセレクタで異なっていますね。

13行目の.contentは見出しとリストを囲った<div>に対して付けたclass名です。余白と枠線のCSSが適用されています。

動画解説

まとめ

どうでしたか？みなさんが書いたコードとピッタリ一致していたでしょうか？

難しいと感じた方は

関連記事よく使う10個のプロパティを覚えよう

関連記事レイアウトを制御する｜divとspanについて理解しよう

関連記事class属性とid属性について理解しよう

あたりを改めて学習してみてください。