spanタグの使い方

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

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

span要素

spanタグの説明

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

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

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

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

spanの使い方
CSSで文字の色を指定します。

.title{
  color:blue;
}
.moji{
  color:red;
}

.titleを青に指定します。

.mojiを赤に指定します。

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