メモ

メモを入力してみよう!


Lesson 10「id属性とclass属性」

学習概要

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

補足

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

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

【入門】HTML言語・CSS言語初心者向け について学んでいきます。今回学んでいくのはこちら ID 属性と Class 属性電話前回と同じくフォルダを作成しましょう。俺の作成したら今回は新しく htmlファイルを作っていきますコットエディターを開いたらこちらの行動を記入してみてください。竹を割ったら保存しましょう。先ほど作成したフォルダに保存をしてくださいファイル名は INDEX . HTML としたいと思います次に CSS ファイルを作成していきましょう【入門】HTML言語・CSS言語初心者向けコマンドとえのきを同時に押しファイルの新規作成を行います新しいウィンドウにこちらの【入門】HTML言語・CSS言語初心者向け行動を記入してみてください。

書き終わったらコマンドとりつき保存をしましょう保存先は新しく作ったフォルダの中に保存してくださいファイル名は STYLE . CSS としたいと思います。保存が終わったら先ほど【入門】HTML言語・CSS言語初心者向け作成した htmlファイルをブラウザで開いていましょう。

このような画面が表示されれば完成ですそれではですねこれから【入門】HTML言語・CSS言語初心者向けコードの解説をしていきたいと思いますまず今回作成したファイル二つですね HTML ファイルと CSS ファイルを作成していますですね前回と同じくリンクという【入門】HTML言語・CSS言語初心者向けタグを使ってスタイルシートを読み込むようにしてありますねですね BODY タグの中が今回ちょっと今までと違ってきてますそれぞれのタグにですね ID ID 属性というものと暮らすクラス属性というものが付いてますこの ID 属性 Class 属性というのはですねどの【入門】HTML言語・CSS言語初心者向けタグにでも付けることができますで ID 属性 CLASS 属性を指定することでた国ですね名前をつけることができるんですね。

猫の ID 属性 Class 属性の違いなんですがまず ID 属性というのはですね一つの htmlファイルこの中に ID 属性でつけた名前というのはひとつしか存在していけないんですねなので ID 属性でつけた名前というのは必ずお前の中では一つになりますので他の【入門】HTML言語・CSS言語初心者向けタブにですね同じ ID 属性でこのように同じタイトルとかっていう形で入れるって言うことはできないの形になっています重複した名前は指定できないっていうことですね次にですねクラス属性と思うんですけどもこれも同じように名前を指定できるんですがこのクラス属性というのはひとつにして【入門】HTML言語・CSS言語初心者向けファイルに対していくつでも同じ名前を付けることはできますので今見たいんですね P タグ H 2タグ両方どちらにも同じに力はまこれはバックグラウンド背景ですね背景の色をちょっと変えたいのでこの名前に今しているんですけれどもこういう形で色々な名前というのをどのタグにでもつけられる Class 属性というものになりますね。

この ID 属性 CLASS 属性を使ってタグに名前をつけると何がいいのかっていうとこなんですがタグに名前をつけることですねその名前に対して親切ファイルでスタイルを指定することができますで実際にですねスタイルシートを見ていきたいと思うんですけれどもこういった形ですかれてましてまず一つ目ですねこれがひとつのスタイルを指定してますなんか見てみると何書いてあるかと言うとまずですねという形で書いてありますがなにかと言うとしたとは ID 属性の意味ですシャープタイトルとあるので ID 属性がタイトルの名前のもこれに対してスタイルを指定しますよ私の指定方法になってます最高の【入門】HTML言語・CSS言語初心者向けタイトルという ID 属性にですねどんなスタイルが指定されてるかと言うとバックグラウンド シャープ333という値が指定されてますこれは RGB という色の指定方法になります。

また後でちょっと説明しますね次にですねパディングという形で指定されてます俺はその【入門】HTML言語・CSS言語初心者向けタグのですね余白みたいなものですねになります弱くを15ピクセルにしますよね最後から俺の文字色ですね森色を白にを愛という形で白にしますよという形でスタイルを指定していますその ID 属性がタイトルのものはどれかと言うとお酒えしてみる【入門】HTML言語・CSS言語初心者向け見てみると H 1タグに ID 属性のタイトルという形で属性がついてますのでこれに対して酒どのスタイルが指定されるはずですね実際に画面にはですね【入門】HTML言語・CSS言語初心者向け英語で書かれたホームページの見出しに対して8と余白がついて背景が黒っぽくなって文字色が白白抜きになってるって言う形でスタイルが指定されてます次にですねみて行きたいのはクラス属性の指定方向ですねこれとっとと着いてますこれでクラス属性を指定します. BG COLOR 1なのでクラス属性が火力は名前のものに対してこのスタイルを指定しますよっていう形になってますどんな【入門】HTML言語・CSS言語初心者向けスタイルを指定しているかと言うと俺がバックグラウンド背景色ですね背景色を RGB の色指定で移動してくださいこの色ライトグレーの色なんですけどもね実際にクラス特性が BG から1の胸この二つ B タグ都営住宅についてますので二つに対して先ほどのスタイルがしてされます。

【入門】HTML言語・CSS言語初心者向け画面を見てみるとですね TT 8 A 2で囲んだ文字に対して背景画とライトグレーぽくなってますという形でスタイルが指定されてます親方してスタイルを指定することができますでもう一つですねこの方法に合わせなかったものがあります一番下の9行目からスタイルシート見て頂きたいんですがこれがですねとなって BG COLOR ONE となってますどういう意味かと言うと P タグていたのに対して P タグの数と七でクラス属性 Class 属性神に力1に対してスタイルを指定してくださいという形で指定してますね今回はカラーレッドなのでも離職あかいしますたー P タグのさらに Class 属性が BG から1の物っていう形で空に絵指定をですで絞り込むことができるんですね【入門】HTML言語・CSS言語初心者向け安定して見れる見てみると Vita が二つありますけれどもその中でも P タグで勝つ Class 属性2 BG から1がついてるのスタイルしてさ何でもう一つの二つ目の段落ですというところを伝える指定されないってことですね画面見てみるとこういう形でこれは段落ですというところだけ赤文字になってますこういう形でですね ID 属性 CLASS 属性を使ってスタイルを指定することでさらに複雑な【入門】HTML言語・CSS言語初心者向けスタイルの指定方法ができるようになります市川ですねそのスタイルの捨て方を詳しくまた見ていきたいと思います