HTMLやCSSの初心者からすれば、属性と属性値という単語が、HTMLやCSSの説明で突然この言葉が出てきて話が進むと、これは何をさしてるのか意味がわからない状態のまま、読み進めますよね。
属性ってどれを指すか知らなくても、感覚的にカスタマイズはできますから。HTMLとCSSはツーと言えばカーの存在で属性値を一致させないと反映しないです。
HTMLの要素、要素名と属性名、属性値は何か！例えを見るだけでも感覚的に覚えられるので、ごゆるり、もしくは端折ってご覧くださいね。
HTMLの要素と属性とは何か
『HTMLの要素』は、タグ、タグに囲まれたテキストや画像などの内容を指します。言葉で聞くとややこしいので、下記画像を見てください。これがHTMLの要素です。
HTMLタグとそれに囲まれたテキストや画像などの要素。開始タグを見ればその『要素名』と、『属性名』さらに『属性値』が入ってたりしてます。この画像すべてがHTMLの要素です。
つぎに細かい範囲で要素を見て『属性値を指定する属性』の代表例を見ていくと最終的に理解できますよ。
ここですでに、大混乱をおこしてそうですけどｗ 今あげた名前は、次の画像を見てもらえたら一発で解消します。頭に残しておいてくださいね。
style属性：属性値に装飾を入れてタグ内でスタイルを指定
HTML基本の要素。要素名、属性、属性値CSSの優先順位のインラインの説明画像より
画像の『HTMLの要素』を見てください。要素名が『span』。要素の内容は『テキスト』。開始タグspanに属性が入ってるのがわかります。
| spanの属性は | ||
|---|---|---|
| 属性 | 属性名 | 属性値 |
| class=”pink” | style | color: #ff00ff; |
- 例えば上の画像にあるspanの開始タグと終了タグで囲まれた要素。
- 『テキスト』という『文字の色』を『#ff00ffマゼンタ』に。
- CSSではなく、HTMLタグ（インラインスタイル）で指定して装飾した状態。
装飾はCSSでするものってイメージだけど、フォントの色をちょこっと変えたいときなど、HTMLで指定すると楽な場合があると言う感覚ですね。
aタグの属性と属性値と、要素を見てみる
よく知ってるリンクのaタグや、属性で例えればイキナリ理解できるので、サクッと見てくださいね。
<a href=”URL” target=”_blank“>装飾したいテキスト</a>
開始タグを見てください。HTMLの要素名はHTMLタグの『aタグ』。
- 属性が2つあり、属性名はhrefとtarget
- 属性値はURLと_blank
| 開始タグの要素aの属性 | ||
|---|---|---|
| 属性 | 属性名 | 属性値 |
| href=”URL” | href | URL |
| target=”_blank” | target | _blank |
<a href=“URL” target=“_blank”>
- セレクタを指定してCSSで装飾する例
<a href=”URL” target=”_blank”>装飾したいテキスト</a>
CSSでセレクタ『a』指定して場合、カスタマイズ出来るのはタグで囲まれた要素『装飾したいテキスト』を装飾できます。
a { color: pink }
こうすれば、aタグの要素は『装飾したいテキスト』は、pinkになります。
aタグの属性一覧は、下記サイトさんを参考にしてください。
imgタグの属性と属性値を見てみる
<img src=”画像のパス” alt=”代替テキスト”>
このimgタグを見てみると、属性（と属性値）は2つあるのがわかりますよね。
- src=”画像のパス”
- alt=”代替テキスト”
| imgの属性 | ||
|---|---|---|
| 属性 | 属性名 | 属性値 |
| src=”画像のパス” | src | 画像のパス |
| alt=”代替テキスト” | alt | 代替テキスト |
<img src=“画像のパス” alt=“代替テキスト”>
HTMLタグにclass属性をつける。書きかた例
div、span、pタグなどにclass名をたとえば『hoge』とつけると、CSSで『.hoge』とセレクタをつけて装飾できる！ってことになります。
- class=”hoge”
| 追加したいclass属性 | ||
|---|---|---|
| 属性 | 属性名 | 属性値 |
| class=”hoge” | class | hoge |
このclass属性を、HTML開始タグの中に半角スペースを入れて置いてあげればOK！です。
- <div class=”hoge”>改行をともなう要素</div>
『改行をともなう要素』というテキストにを装飾するには、CSSでセレクタを『div .hoge』として装飾できる。
- <span class=”hoges”>文中に使える要素</span>
『文中に使える要素』というテキストを『span .hoges』で装飾できる。属性値（クラス名）を変えてあげると、よりシンプルなセレクタにすることも可能『.hoges』
※divとspanの使い方の違いは下記をどうぞ。
LINKHTMLタグのdivとspanの違い！ブロックレベルとインライン要素
class名（属性値）を複数にする、HTMLの書き方
現状のカスタマイズに1つ装飾を付け加えたいとき、HTMLのclass属性にクラス名（値）をもう1つ増やしたいときがあります。いたってシンプルで””の中に半角スペースを入れて複数のクラス名を与えることができます。例えると下記みたいに。
属性値（クラス名）だけを取り出してみるとこんな感じで半角スペースが入ります。
color border rotate
- 違った装飾を組み込みたいとき、便利な方法例として色、枠線、回転と言う意味の名前をいれてみました。
CSSは、スタイルシートの下に書いた方が優先されます。colorの変更で装飾がカブッたら上の記載は下に書いたものに上書きされ反映されるので注意してくださいね。
また元々親テーマに書いてあるセレクタの優先順位が高い場合、点数が低いセレクタを指定しても反映されません。ちょっとわかりにくいですか！？下記リンク先を見るとわかるので、セレクタの付け方を工夫すれば反映されます。
またclassやid、インラインその他色んなセレクタのことを書いてるページです。
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
さいごに
クラス属性については、自分がわかるように、ほかのに属性値（クラス名）とカブらないようにつければカスタマイズしやすいです＾＾
『初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？』
初心者向けのページをご紹介！
LINKCSSの基本、class・id・子孫セレクタなど！HTMLタグの装飾、セレクタの指定方法と優先順位
LINKCSSの基本、子セレクタの説明！初心者向け、子孫セレクタとの違い付き
などなど、HTMLとCSSの初歩ページを置いてます。ほかに、スマホで横揺れを起こす原因など、合わせてみると初心者的に面白いかと思います＾＾
LINKCSSでスマホ対応！画面からはみ出す、グラグラ横揺れする原因！画像YouTubeブログカード、テーブル表が見切れる時の対処法
それでは、かうたっくでした！
Comments