汎用要素 素材

ここでは汎用要素と汎用属性について確認します。

  

汎用要素とは要素自体に何か特別な役割はありませんがスタイルシートと組み合わせてスタイルを適用する場合などに用いられます。div要素とspan要素が該当します。

   

汎用属性とは多くの要素で用意されている属性で、その中のid属性とclass属性を紹介します。

汎用要素と汎用属性


=====　div 要素　=====

１．div要素とは

div要素はコンテンツをまとめる箱のようなものです。この箱には複数のコンテンツが入ります。

div要素にid属性やclass属性を付けてスタイルの指定をすることができます。

　
例えば次のように記述します。ここでは設定したdiv要素にclass属性（class名）"sample"が付けられています。class名"sample"にスタイル設定をすることが出来ます。


<div class="sample">
   <p>
   ...
   </p>

   <ul>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

２．div要素を使ったＨＴＭＬページ作り

２－１．div要素の素材

<h1>読書の記録</h1>
<p>２０１７年は東野圭吾の本を多く読んだように思います。
３つほどタイトルを挙げると次の通りです。</p>
<p>東野圭吾：</p>
<ul>
  <li>流星の絆</li>
  <li>ダイイング・アイ</li>
  <li>容疑者Ｘの献身</li>
</ul>

２－２．複数の要素をdiv要素で囲む

<h1>読書の記録</h1>
<p>２０１７年は東野圭吾の本を多く読んだように思います。
３つほどタイトルを挙げると次の通りです。</p>
<div>
  <p>東野圭吾：</p>
  <ul>
    <li>流星の絆</li>
    <li>ダイイング・アイ</li>
    <li>容疑者Ｘの献身</li>
  </ul>
</div>

２－３．div要素にid属性を付ける

<div id="book">

２－４．id属性にスタイルを指定する

<style type="text/css">
    #book {
      background-color: #e0ffff;
      border: 1px solid #a0a0a0;
      padding: 5px;
    }
</style>

 

２－５．ページタイトルを入力し、ＨＴＭＬ文書を保存する

 

=====　span 要素　=====

１．span要素とは

span要素は文字列などの要素内の選択範囲を指定します。
指定した範囲にスタイルを設定できます。範囲にid属性やclass属性を付けてスタイルを設定することなどできます。
例えば次のように記述します。設定されたspan要素の開始タグ内にクラス属性（クラス名）"red"が付けられています。

<p>
東野圭吾の作品は昨年<span class="red">ドラマ化</span>されたものや
<span class="red">映画化</span>されたものがあります。
</p>

２．span要素でのＨＴＭＬページ作り

２－１．span要素の素材

<h1>読書の記録</h1>

<p>
東野圭吾の作品は昨年ドラマ化されたものや映画化されたものがあります。
</p>

２－２．強調する文字列をspan要素で囲む

<p>
東野圭吾の作品は昨年<span>ドラマ化</span>されたものや
<span>映画化</span>されたものがあります。
</p>

２－３．span要素にclass属性を付ける

<p>
東野圭吾の作品は昨年<span class="red">ドラマ化</span>されたものや
<span class="red">映画化</span>されたものがあります。
</p>

２－４．class属性のついたspan要素のスタイルを指定する

<style type="text/css">
    span.red {
      color: #ff0000;
}
</style>

 

２－５．ページタイトルを入力し、ＨＴＭＬ文書を保存する


＝＝＝＝＝　id属性とclass属性　＝＝＝＝＝

１．id属性とclass属性とは

id属性とclass属性はすべての要素で使用できる属性です。すべての要素で使用できる属性のことを「グローバル属性」と言い、代表的なものがid属性とclass属性です。どちらの属性もCSSでセレクタ(スタイルを設定する対象)で使われる機会が多い属性です。ここではこの二つの属性の使い方や違いについて確認していきます。

 

id属性

id属性は要素に固有の名前を割り当てるために使います。

<要素 id="値"></要素>

固有の名前ですので同じid属性の値（id名）は一つのHTML文書内では一度（すなわち、一か所）しか使えません。id名は、「保土ケ谷花子」のように個人の名前のようなものです。

id属性はCSSでセレクタで使用される他にa要素のリンク先を指定する場合などにも使われます。

id属性に指定できる値は、HTML 4.01 では、先頭がアルファベットで始まり、2文字目以降にはアルファベット、数字、ハイフン(-)、アンダースコア(_)、ピリオド(.)、コロン(:)が使用可能です。大文字と小文字は区別されます。HTML 5.0 では日本語も使用できるようになっていますが、さまざまなブラウザ環境での表示を考慮するのであれば、使用しない方が無難でしょう。

 

class属性

class属性は要素に対して分類や種類を割り当てます。

<要素 class="値"></要素>

分類や種類なので同じclass属性の値（class名）は一つのHTML文書内で何度でも（すなわち、何ヶ所でも）使うことができます。class名は、「Ａ組」「Ｂ組」や「受講者」「会員」のように、要素（この場合は個人）が所属するグループを表します。

また一つの要素に複数のclass名を付けることも可能です。その場合は空白文字で区切って続けて記述します。

<要素 class="値1 値２ ...”></要素>

class属性に指定できる値は制限がほとんどありませんが、主に使用されるCSSでセレクタに記述する場合にセレクタ側の制限があります。セレクタに付けることができる文字はアルファベット、数字、ハイフン(-)、アンダースコア(_)が使用可能で1文字目にはハイフンと数字は使用できません。また空白は値の区切りとして使用しているため使用できません。id名と同じように、HTML 5.0 では日本語も使うこともできます。

２．id属性とclass属性を使い、スタイルを指定するＨＴＭＬページを作る

ここではid属性を使用したページを作るが、class属性を使用したページはすでにspan要素の項で紹介されているので、ここでは省略する。

２－１．素材を追加しＨＴＭＬ文書を作成する

    <h1>読書の記録</h1>

    <p>
    東野圭吾の作品は昨年<span class="red">ドラマ化</span>されたもの
    や<span class="red">映画化</span>されたものがあります。
    </p>

    <p id="footer">
    ここまで
    </p>

２－２．id属性のスタイルを追加する

<style type="text/css">
p#footer{
      border-top: 1px solid #c0c0c0;
}
</style>

２－３．スタイルの適用を確認し保存する


＝＝＝＝＝　まとめ　＝＝＝＝＝

１．indexページ本日の作業と作品をまとめる

<h2>汎用要素と汎用属性</h2>
<h4 class="migi">2018/01/13</h4>
<h3>１．div要素</h3>
<div class="items">
<p>① div要素を使ったページを作る</p>
<p>② div要素にid属性を付ける</p>
<p>③ head要素内のstyle要素で、id属性にスタイルを指定する</p>
<p>⇒ 作成ページ：div要素（ファイル名 div00.html）</p>
</div>
<h3>２．span要素</h3>
<div class="items">
<p>① 強調する文字列をspan要素で囲む</p>
<p>② span要素にclass属性を付ける</p>
<p>③ head要素内のstyle要素で、class属性のついたspan要素にスタイルを指定する</p>
<p>⇒ 作成ページ：span要素（ファイル名 span00.html）</p>
</div>
<h3>３．id属性とclass属性</h3>
<div class="items">
<p>① id属性を付けたP（段落）要素をページに追加する</p>
<p>② head要素内のstyle要素で、id属性のついたp要素にスタイルを指定する</p>
<p>⇒ 作成ページ：span要素（ファイル名 span01.html）</p>
</div>