2013年03月31日

HTML span要素

スポンサード リンク

 span要素 inlineボックス
<span 属性="値">内容</span>

 SPAN要素は汎用的なインライン要素(前後に改行が入らない要素)で
<span></span>自身はなにか効果(表示スタイル)を持っているわけではありません。
主にid属性やclass属性を使用して、任意のあるいは特定の
範囲(テキストやインライン要素)をグループ化し、スタイルシートを適用するために用います。
また JavaScriptで文章の一部分(スクリプトで利用するための参照先)に
アクセスする場合に利用します。
widthプロパティ、heightプロパティは適用されません。 上下のmarginは、無視されます。

同じような要素にDIV要素がありますが、汎用的なブロックレベル要素で
前後に改行が入り、矩形(四角形)で表示されます。<DIV>タグでマークアップを行っても
<SPAN>タグと同様に特に効果があることはありません。
これらは文書の構造的意味合いを補強するものです。

ロリポップ!なら月々105円から
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(ヘテムル)
ロリポップ!のドメインは選べる全85種類!!
marginプロパティ
paddingプロパティ ボックスの内側の余白
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
visibilityプロパティ 領域の表示、非表示
display プロパティ

posted by javaScript at 15:58 | 大阪 ☁ | HTML タグ 要素 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。