メモ

メモを入力してみよう!


Lesson 10「id属性とclass属性」

学習概要

スタイル指定の幅を広げるid属性とclass属性について学習していきます。

補足

id属性やclass属性はbodyタグとその中で使うタグ(実際に画面に表示するためのタグ)に対してつけることができます。
なので、htmlタグやheadタグなどにつけることはできません。

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 10「id属性とclass属性」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツコーチの斉藤です。これからHTML&CSSについて学んでいきたいと思います。今回学んでいくのはこちら。
id属性とclass属性

では前回と同じくフォルダを作成しましょう。
フォルダを作成したら今回は新しくhtmlファイルを作っていきます。CotEditerを開いたらこちらのコードを記入してみてください。書き終わったら保存をしましょう。先ほど作成したフォルダに保存をしてください。ファイル名は[ index.html ]としたいと思います。次にcssファイルを作成していきましょう。コマンドとNキーを同時に押しファイルの新規作成を行います。新しいウィンドウにこちらのコードを記入してみてください。

書き終わったらコマンドとSキーで保存をしましょう。保存先は新しく作ったフォルダの中に保存してください。ファイル名は[ style.css ]としたいと思います。保存が終わったら先ほど作成したhtmlファイルをブラウザで開いてみましょう。
このような画面が表示されれば完成です。

それではこれからコードの解説をしていきたいと思います。まず今回作成したはファイル2つ、htmlファイルとcssファイルを作成しています。htmlファイルには前回と同じく、linkというタグを使ってstylesheetを読み込むようにしてあります。

bodyタグの中が今回今までと違ってきてます。それぞれのタグに[ id属性 ]というものと[ class属性 ]というものが付いてます。この[ id属性 ][ class属性 ]というのはどのタグにでも付けることができます。[ id属性 ][ class属性 ]を指定することでタグに名前をつけることができるんですね。

この[ id属性 ][ class属性 ]の違いなんですがまず[ id属性 ]というのは一つのhtmlファイル、この中にid属性でつけた名前というのは1つしか存在していけないんですね。なのでid属性でつけた名前というのは必ずhtmlファイルの中では1つになります。なので他のタブに同じ[ id=" " ]でこのように同じ[ title ]とかっていう形で入れるっていうことはできない形になっています。重複した名前は指定できないっていうことですね。

次に[ class属性 ]というものなんですけども、これも同じように名前を指定できるんですがこのclass属性というのは1つのhtmlファイルに対していくつでも同じ名前を付けることはできます。なので今みたいにpタグh2タグ両方どちらにも同じに[ "bg-color1" ]これはバックグラウンド、背景の色を変えたいのでこの名前に今しているんですけれどもこういう形で色々な名前というのをどのタグにでもつけられるというのがclass属性というものになります。

このid属性class属性を使ってタグに名前をつけると何がいいのかっていうとこなんですが、タグに名前をつけることでその名前に対してcssファイルでスタイルを指定することができます。で実際にスタイルシートを見ていきたいと思うんですけれども、こういった形で書かれておりまして、まず1つ目ですね、これが1つのスタイルを指定してます。中見てみると何書いてあるかと言うとまず[ #(シャープ) ]という形で書いてあります。なにかと言うと#はid属性という意味です。[ #title ]とあるのでid属性が[ title ]の名前のもの、これに対してスタイルを指定しますよ、という形の指定方法になってます。最後のtitleというid属性にどんなスタイルが指定されてるかというと、[ background: #333; ]という値が指定されてます。これはRGBという色の指定方法になります。
また後で説明します。

次に[ padding ]という形で指定されてます。そのタグの余白みたいなものになります。余白を15pxにしますよ。最後[ color ]、文字色をwhiteで白にしますよという形でスタイルを指定しています。そのid属性がtitleのものはどれかと言うと先ほどのhtmlファイルをみてみるとh1タグに[ id="title" ]いう形で属性がついてます。なのでこれに対して先ほどのスタイルが指定されるはずですね。実際に画面にはh1タグで書かれたホームページの見出しに対して、余白がついて背景が黒っぽくなって文字色が白抜きになってるっていう形でスタイルが指定されてます。次にみていきたいのはclass属性の指定方法です。これ[ .(ドット) ]と付いていてます。これでclass属性を指定します。[ .bg-color1 ]なのでclass属性が[ .bg-color1 ]の名前のものに対してこのスタイルを指定しますよっていう形になってます。どんなスタイルを指定しているかというとこれがbackground、背景色をRGBの色指定で指定しています。この色はライトグレーのような色なんですけども。実際にclass属性が[ .bg-color1 ]のものがこの2つpタグとh2タグについてますので2つに対して先ほどのスタイルが指定されるはずです。
画面を見てみるとpタグとh2タグで囲んだ文字に対して背景がライトグレーぽくなってます、という形でスタイルが指定されてます。こういう形でスタイルを指定することができます。
もう1つこの指定方法に合わせ技のようなものがあります。一番下の9行目からスタイルシート見て頂きたいんですが、[ p.bg-color1 ]となってます。どういう意味かというとpタグかつclass属性が[ bg-color1 ]に対してスタイルを指定してください、という形で指定してます。今回は[ color: red; ]なので文字色を赤にします。pタグのさらにclass属性がbg-color1のものっていう形でさらに指定を絞り込むことができるんですね。なのでhtmlファイル見てみるとpタグ2つありますけれども、その中でもpタグかつ[ bg-color1 ]がついてるものだけがスタイル指定されます。なのでもう1つの2つ目の段落ですというところはスタイル指定されないってことですね。画面見てみるとこういう形でこれは段落ですというところだけ赤文字になってます。こういう形でid属性class属性を使ってスタイルを指定することでさらに複雑なスタイルの指定方法ができるようになります。

次回はそのスタイルの指定方法を詳しくまた見ていきたいと思います。
ではまたお会いしましょう、さよなら。