読者です 読者をやめる 読者になる 読者になる

ゆるNOTE

独学でWebの勉強をはじめたemyさんの覚書NOTEです。たまに岡山弁でぼやきます。

すごいよグローバル属性

f:id:keito_emi:20160616000357j:plain

グローバル属性とは!HTMLのすべての要素に指定できる属性のことです。いろんなタグにくっついて、たくさん仕事しているすごいヤツらです。

今回はそんなグローバル属性の中でも代表的な3つの属性についてまとめました。

id属性

固有の名前をつけることができます。

値は文書の中で一つだけしか使えません。重複NGです。いくら子沢山でも、同じ名前をつけないのと似たようなものでしょうか。また、空白を使うことができません。

スタイルシートセレクタ=適応対象にしたり、リンクの参照先にしたりできます。

class属性

クラス名をつけることができます。

値は自由に決められますが、見ためではなく意味を表すものを選ぶほうがいいです。例えばこんなときはclass="pink"ではなく、class="girlsName"がベター。

みか、えりな、かずは、きょうこ、よしえ

1つの要素に対して複数のクラス名を指定することもできます。空白スペースで区切ってあげます。

class="flower yellow summer" 

style属性

直接スタイル=見ためを決められます。値にはスタイルシートの指定を入れることができます。複数指定したいときは、セミコロンで区切ります。

style="color: #ff0000 ; font-size: 150%"

スタイルシートの指定方法は他にもあるし、style属性はあんまり出番がないような気がします。

まとめ

グローバル属性の代表例として、id属性、class属性、style属性について整理しました。id属性とclass属性がごっちゃになりそうだけど、id属性は重複NG!って押さえていれば大丈夫。あとは実践あるのみ、使いながら覚えましょう。

今日のひとこと

構造とは関係なく、意味をくっつけるって、なんかおもしろいなー。