Web技術入門編02 :class属性とid属性で要素を選択しよう

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Welcome to paiza</title>
        <style>
            body {padding: 40px;}
            div.p-head {border-bottom: 1px solid #aaa;}
        </style>
    </head>
    <body>
        <h1><a href='https://paiza.jp/paijo'>4コマ漫画 ぱいじょ！</a></h1>
        <div class='p-head'>あらすじ</div>
        <div>スーパーITエンジニアを育成するための女子高、私立パイザ女学院高等部(略してぱいじょ)に入学した3人組が繰り広げる、プログラミングしたりしなかったりの学園ライフ4コマ!!</div>
        <div>登場人物</div>
        <ul>
            <li>霧島 京子</li>
            <li>六村 リオ</li>
            <li>緑川 つばめ</li>
        </ul>
        <div>バックナンバー</div>
        <div><a href='https://paiza.jp/paijo'>ぱいじょへGo!</a></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Welcome to paiza</title>
        <style>
            body {padding: 40px;}
            div.p-head {border-bottom: 1px solid #aaa;}
        </style>
    </head>
    <body>
        <h1><a href='https://paiza.jp/paijo'>4コマ漫画 ぱいじょ！</a></h1>
        <div class='p-head'>あらすじ</div>
        <div>スーパーITエンジニアを育成するための女子高、私立パイザ女学院高等部(略してぱいじょ)に入学した3人組が繰り広げる、プログラミングしたりしなかったりの学園ライフ4コマ!!</div>
        <div>登場人物</div>
        <ul>
            <li>霧島 京子</li>
            <li>六村 リオ</li>
            <li>緑川 つばめ</li>
        </ul>
        <div>バックナンバー</div>
        <div><a href='https://paiza.jp/paijo'>ぱいじょへGo!</a></div>
    </body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1

問題ログインすると模範解答や入力を見ることができます

演習課題「スタイルを割り当てる」

右側の環境で、public_htmlディレクトリにindex.htmlを用意してあり「ぱいじょ！」の紹介文がHTMLで記述してあります。

「登場人物」と「バックナンバー」というテキストの要素に、class属性として「p-head」を指定してください。

採点して、すべてのジャッジに正解すれば演習課題クリアです！

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃04:class属性とid属性で要素を選択しよう

HTMLの要素をCSSやプログラムで選択する方法を学習します。Webページの一部にデザインを割り当てたり、内容を変化させるときには、その要素を選択する必要があります。ここで重要なのが、要素が持つclass属性とid属性です。

HTMLを表示する

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Welcome to paiza</title>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body>
        <h1>世界の皆さん、こんにちは</h1>
        <p>ようこそ、<strong>paiza</strong>へ</p>
        <h2>photo</h2>
        <img src='neko.gif'>
        <h2 class='resume' id='works'>works</h2>
        <h2 class='resume' id='skills'>skills</h2>
    </body>
</html>

class属性とid属性

class属性：要素に役割や種類を記述する
id属性：要素を特定するために記述する

CSSやJavaScriptは、このid属性やclass属性をhtmlタグと組み合わせて、要素を選択できます。

h2タグに、スタイルを割り当てる

body {padding: 10px;}
h2 {border-bottom: 1px solid #aaa;}

クラス属性に、スタイルを割り当てる

body {padding: 10px;}
h2.resume {border-bottom: 1px solid #aaa;}

id属性に、スタイルを割り当てる

body {padding: 10px;}
h2.resume {border-bottom: 1px solid #aaa;}
#works {background: lightgray;}

参考になるWebページ

【HTML】

HTMLを始めよう - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started

HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML

HTML5 - Wikipedia
https://ja.wikipedia.org/wiki/HTML5

【CSS】

Cascading Style Sheets - Wikipedia
https://ja.wikipedia.org/wiki/Cascading_Style_Sheets

CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS

プログラミング学習 > PHP > Web技術入門編 > Web技術入門編02 : HTMLを理解しよう > class属性とid属性で要素を選択しよう