9-10 spanとは

divタグと同様にこのタグ自身で箇条書きが出来たり強調されたりといった意味を持つ物ではありませんが、<span>~</span>で囲まれた範囲を指定するという重要な役割があります。(インライン要素ですので使用しても前後に改行が入りません)。あくまでも 『行内』 を修飾したりする際に使用致します。

[ 関連事項 : HP-TIPS > CSS > divとは ]

9-10-1 具体例

行内を特別に修飾したい場合に使用する方法です。(class属性を利用致します)

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
.caution {
color: #cc0000; /* 文字の色は赤 */
}
-->
</style>

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ~ </body> 内に記述して下さい。
1. 関係者以外<span class="caution">立ち入り禁止</span>です。

表示結果

1. 関係者以外立ち入り禁止です。

CSS部分では .クラス名 { プロパティ: 値; } と書き込み、
(※ 黒い点「.」はピリオドです)
HTML部分で class="" とclass(クラス)名を指定すればOKです。(今回の見本のクラス名は「caution」になります)

[ 関連事項 : HP-TIPS > CSS > classとは ]
[ 関連事項 : HP-TIPS > CSS > 基礎知識 > スタイルシートの書式 ]