span要素

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

span要素の役割

span要素は、囲ったテキストをひとつのまとまりとします。span要素で囲った部分をひとつのグループとして明示することで、HTML構造上でも意味をもたせることができます。

span要素はインライン要素です。ある段落の中の一部分を範囲指定するときなどに使います。段落まるごとをグループとして指定する場合には、div要素を使います。

span要素は、CSSを文書内のある箇所に適用したい場合などによく用いられます。

属性名	意味
class	クラス名。CSSを適用するときなどに使用する。
dir	文字表記の方向。左から右（ltr）と、右から左（rtl）を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
id	ID名。CSSを適用するときに使用する。
lang	言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
style	スタイルシートを直接記述する。
title	補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。

本日は晴天なり。

たとえば、以上のサンプルのように、天気を示すところにspan要素を使い、class属性にweatherを指定することで、天気を表す部分であることを示します。また、このとき、weatherにCSSを設定しておけば、文字にさまざまなエフェクトを与えることができます。

UpDate:2010-5-25

〔Amazonの書籍紹介ページを開きます〕

実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。

HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。中級者向け。

HTMLについてまったくの初心者が読む本。初心者であってもコンピュータ系に理解力がある人には向いていません。本書を読んで大体理解したら上掲の本などで理解を深めましょう。

CSSによる段組レイアウトXHTML／HTMLのテクニックを順を追って解説する良書。実戦的な内容で覚えた知識でウェブサイトをつくりはじめられます。

ウェブデザイン、ウェブサイト作成の初心者～中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。