HTML5 Logo

span要素


SPAN

SPAN要素は、特に何の意味も持たないタグです。
囲まれた部分にスタイルシートを適用したりするのに用いられます。
同様なタグに DIV要素 がありますが、DIV要素 はブロック要素(一般的に前後に改行がはいる様な要素)として、SPAN要素 はインライン要素(一般的に前後に改行が入らない要素)として定義されています。

カテゴリー

フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ

SPAN属性

固有の属性はありません。

SPAN使用例

SPAN要素1
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Javascript | tech.pjin.jp</title>
	</head>
	<body>
		<header class="page-header">
			<h1>Javascript</h1>
			<p>初心者から始める、簡単なプログラム言語</p>
		</header>
		<main class="art-container">
			<article id="A112-009">
				<header class="art-header">
					<h2>if文</h2>
					<p><span class="txt-green">簡単</span>な条件分岐</p>
				</header>
				<section>
					<div class="left">
						<pre><code>
							var a = 3;
							if(a == 10){
								console.log('a is 10.');
							}else{
								console.log('a is not 10.');
							}
						</code></pre>
					</div>
					<div class="right">
						<p>左の<span class="bold txt16">実行結果</span>を予想してください。</p>
					</div>
				</section>
			</article>
		</main>
	</body>
</html>
SPAN要素2
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>PHP | tech.pjin.jp</title>
	</head>
	<body>
		<header class="page-header">
			<h1>PHP</h1>
			<p><span class="txt-green">初心者</span>から始める、<span class="txt-blue">簡単</span>なプログラム言語</p>
		</header>
		<main class="art-container">
			<article id="A210-017">
				<header class="art-header">
					<h2>if文</h2>
					<p><span class="txt-green bold">簡単</span>な条件分岐</p>
				</header>
				<section>
					<div class="col-sm-10">
						<p>みんなのコメント</p>
						<p>Javascriptと同じ。見るのは簡単だが、いざ書くのは難しいかも</p>
					</div>
				</section>
			</article>
		</main>
	</body>
</html>
  • このエントリーをはてなブックマークに追加

PAGE TOP