【HTML/CSS/PHP講座まとめ⑦】主要な汎用属性をゼロから学びました

PR

汎用属性とは何か?

HTMLに定義されている要素には、ほとんどの要素で共通して使用できる属性があります。

このような属性は汎用属性と呼ばれますが、よく使用される汎用属性の4つを学びます。

  1. style
  2. class
  3. id
  4. title

 

style属性

HTML文書内で、要素に直接スタイルシートを適用する際に使います。

デザインをするためのスタイルシート(CSS=Cascating Style Sheets)は外部にCSSファイルを作成して独立させるのが一般的です。

でも、「一部」にだけスタイルを適用する場合には、style属性をつかってHTML文書のタグ内にstyle属性を用いてスタイルシートを記述してしまうことができます。

例えば、桃太郎というh1タイトルに装飾をつける場合。

例1)赤色をつける場合は・・・

<要素 半角スペース 属性=”・・・”> という公式に当てはめると、

<h1 style=”color: red;”>桃太郎</h1> と書きます。

例2)赤色にしてかつサイズを指定する場合・・・

<h1 style=”color: red; font-size: 36px”>桃太郎</h1> と書きます。

※ 各ブラウザにデフォルトのスタイル設定があり、同じように書いてもブラウザが違うとデザインが違います。

ちなみに、style属性があれば、CSSファイルがなくてもデザインはできます。

しかし、例えば「h2見出しを全部赤にしたい・・・」という場合、style属性で一つ一つ書きなおすのは大変です。

なのでCSSファイルにまとめた指示を別に書くと、記述も少なくて済むし、そのHTML文書すべてに指定したデザインを適用できるというわけです。

class属性

要素を分類させるために使います。

<要素 class=“”></要素> と書きます。

あるHTMLファイルに .css ファイルを適用させるためには、メタタグのどこかに「この.css ファイルを適用させるよ」という指示タグを書き込む必要があります。

test.css を適用させるためのタグの例はこちら↓

(同じ階層にある場合 ./test.cssの場合 

  <link href=”./test.css” rel=”stylesheet”>

こちらを書くのはメタタグ内のどこにでもいいです。

実際にデザインするイメージで・・・

例えば今回は、h2タイトルについてデザインをしたいときの例でいきます。

HTMLファイルのh2タグだけピックアップしてみたら「AAA 」から 「GGG 」までの7つあったとします。

これらのh2タイトルは原則グレーにしたい。でもBBB、CCCはオレンジにしたい。そしてDDD、GGGの背景は青にしたい場合と言う場合どうするか?

class属性でまずチームわけします。

ここではオレンジチームを”abc”、背景青のチームを”haikei-ao”としますが、実はこのタイトルはなんでも構いません。

<h2>AAA</h2>

<h2 class=”abc”>BBB</h2>

<h2 class=”abc”>CCC</h2>

<h2 class=”haikei-ao”>DDD</h2>

<h2>EEE</h2>

<h2>FFF</h2>

<h2 class=”haikei-ao”>GGG</h2>

次に、text.css ファイルを作成し、

に以下の指示を書きます。

h2 {

  color: #999999;

}

h2.abc {

  color: orange;

}

h2.haikei-ao {

  background-color: blue;

}

 

上記のCSSファイルの意味は・・・

1)  h2 {color: #999999;}  = 見出しh2の色はグレー(#999999)にする。

2)  h2.abc {color: orange}  =見出しh2class名がabcのものはオレンジ色にする。

3)  h2.haikei-ao {background-color: blue;}  =見出しh2class名がhaikei-aoのものは背景を青にする。

です。

そうすると、

一つのhtmlページの中で以下のような優先順位でのデザインが適用されます。

1)  <h2>タイトルは原則としてグレー色になる。

しかし、クラス名が指定されたものはそれが優先されるので・・・

2)  <h2 class=“abc”>タイトル</h2>オレンジになる。

3)  <h2 class=“haikei-ao”>タイトル</h2>では背景青になる。

class 属性は、同じものを複数使いまわしてもいいし、複数classをいくつでも適用できます。

ので、「文字がオレンジかつ背景青」としたい場合はこのように書きます。

<h2 class=“abc haikei-ao”>タイトル</h2>

id属性

idは、ひとつのhtmlページに一つしか使えません。

例えばh1タイトルで フォントサイズを72ピクセルとしたい、とする場合は以下のようになります。

HTML

<h1 id=”big-title”>桃太郎</h1>     = idbig−title

CSS側

h1#big-title { font-size: : 72px;}     = big-titleのフォントサイズは72ピクセル

※ idの場合はシャープを入れ、classの場合は.を入れること。

title属性

要素に対し補足的なタイトルをつけます。

多くのブラウザでは、この属性を指定しても何もないこともあるけれど、ブラウザによっては、要素の上にマウスポインタを重ねると、このtitle属性の値がポップアップで表示されるものもあるようです。

そのため、タイトルというより、簡単な説明文を記述するイメージです。

まとめ

CSSのようそもでてきたのでなんとなく立体的なウェブの構成が見えてきました。

7回目は欠席したのですが、動画で復習もよかったです。

PR

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です