span要素 inlineボックス
<span 属性="値">内容</span>
SPAN要素は汎用的なインライン要素（前後に改行が入らない要素）で
<span>〜</span>自身はなにか効果(表示スタイル)を持っているわけではありません。
主にid属性やclass属性を使用して、任意のあるいは特定の
範囲（テキストやインライン要素）をグループ化し、スタイルシートを適用するために用います。
また JavaScriptで文章の一部分（スクリプトで利用するための参照先）に
アクセスする場合に利用します。
widthプロパティ、heightプロパティは適用されません。 上下のmarginは、無視されます。
同じような要素にDIV要素がありますが、汎用的なブロックレベル要素で
前後に改行が入り、矩形(四角形)で表示されます。<DIV>タグでマークアップを行っても
<SPAN>タグと同様に特に効果があることはありません。
これらは文書の構造的意味合いを補強するものです。
ロリポップ！なら月々１０５円から
WordPressなどの簡単インストールやカート機能、
アクセス解析、ウェブメーラーも標準装備！
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
SPAN要素の使い方 サンプル
ID属性でスタイルを適用する。title属性も付加してます。
- CSS
#hani{ color : white; background-color : teal;
font-weight: bold;}- HTML
<div>
指定した範囲に<span id="hani" title="行内のグループ化">
SPAN要素</span>でスタイルを設定</div>- 表示例
-
指定した範囲にSPAN要素でスタイルを設定
CLASS属性でスタイルを適用する。
- CSS
.clr1{ color: #26a5ff; font-size: 35px; padding-right: 5px; }
.clr2{ color: #6fc908; font-size: 25px; padding-right: 5px; }- HTML
<div>
<span class="clr1">機</span><span class="clr2">能</span>
<span class="clr1">充</span><span class="clr2">実</span>seesaaブログ</div>- 表示例
-
機能充実seesaaブログ
CSSインライン設定 要素のタグにSTYLE属性でプロパティ、値を設定。
- HTML
<div style='font-family: "HGP創英角ﾎﾟｯﾌﾟ体"; font-size: 35px;'>
<span style='color: #ff3333'>グ</span>
<span style='color: #e64d2d'>ラ</span>
<span style='color: #cc6626'>デ</span>
<span style='color: #b38020'>ー</span>
<span style='color: #99991a'>シ</span>
<span style='color: #80b313'>ョ</span>
<span style='color: #66cc0d'>ン</span>
<span style='color: #4de606'>文</span>
<span style='color: #33ff00'>字</span>
</div>
- 表示例
-
グ ラ デ ー シ ョ ン 文 字
a:hover を使って非表示のテキストを表示します。
- CSS
a.show span{ display: none; }
a.show:hover span{ display: inline; color: red; }- HTML
<div>
<a href="javascript:void(0);" class="show">
マウスを乗せて、ちょうだい！！ <span>こんにちは</span>
</a></div>- 表示例
文章の一部分（SPAN要素の内容)をjavascriptを使って書き換えます。
- JavaScript
function Hoge(){
document.getElementById('Spn').innerHTML="汎用的なインライン要素";
}
- HTML
<div>SPAN要素は<span id="Spn" style="padding: 3px;color: #ee11b7;">
inlineボックス</span>です。<br />
<button onclick="Hoge()">書替え</button>
</div>- 表示例
- SPAN要素はinlineボックスです。
SPAN要素で横棒グラフ
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
ロリポップ！のドメインは選べる全８５種類！！
marginプロパティ
paddingプロパティ ボックスの内側の余白
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
visibilityプロパティ 領域の表示、非表示
display プロパティ
