spanタグの使い方

span

spanはスタイルシートを指定するための汎用的なタグです。ですので、ホームページのデザインを反映させるために使います。このタグ自体には他のHTML5タグのようにセマンティクスを表すような意味は持ちません。
また、<p>のように改行が行われないので、文章の中に使うこともできます。

注)セマンティクスとはデータの意味のことです。HTML5ではタグに文章を構成するための意味が付けられています。

span要素

カテゴリ グループ化
タグ <span>
機能 グループ化します。
共通属性 id
class
使用例
<span class="任意の名前"></span>

spanタグの説明

<span></span>で囲まれた部分を、グループとして扱うことができます。グループ化したものをCSSで装飾をかけます。

まず、グループ化する範囲を<span></span>で囲います。次にダブルクォーテーション内に任意の文字を入力します。自分でわかる文字で構いません。

次にCSSの記述になります。任意の文字の先頭に「.」をつけます。そして、CSSの指定をします。

idを使う場合は、任意の文字の先頭に「#」(シャープ)をつけます。idとclassについての詳細はidとclassの使い方を参照ください。

.titleを青に指定します。

.mojiを赤に指定します。

spanの使い方

CSSで文字の色を指定します。

上記の例では一文章全体に指定をかけていますが、特定の文字だけ指定することも出来ます。例えば”グループ”だけを青色に変えることも出来ます。強調させたい部分のスタイルを変える時によく使用します。

spanタグを利用したホームページ制作のヒント

色々なclassを指定するとどれが何のスタイルなのか解らなくなることがよくあります。
そんな時はエクセルやメモ帳などでclass名を管理すれば、どのclass名にどんなスタイルを適用しているか解りますので、便利です。作業効率がアップします。

spanタグのような使用方法のdivタグについても学習しておくといいでしょう。divタグについてはこちら