HTMLのお勉強

spanって何?

<>で囲まれたものをHTMLタグといいます。ホームページは、HTMLタグを使用し形成されています。

<br /><p><span>は、そのひとつです。

<span> <br /> <p>の違い

3つの違いを簡単にいうと、

<br />は、改行する命令

<p>は、段落を作る命令

<span>は、そのものに意味はなく、文章の途中に入れられる便利なタグ。

といった感じです。

 

例えば、『<p>げげげのげ</p>らららのら』と書くと、げげげのげが1つの段落なので、げの後で改行されます。

----------------
げげげのげ

らららのら

----------------

 

一方『<span>げげげのげ</span>らららのら』と書くと、<span>に特に意味がないので、「げげげのげらららのら」と並列に表示され、特に変化がありません。

----------------

げげげのげらららのら

 ----------------

 

じゃあ、<span>は、書く必要ないよね??と思いますよね。

 

はい。普通は必要ありません。ただプチ☆カスタマイズでは、結構便利なタグだったりします。

 

プチ☆カスタマイズの文字の色の変更を例にとると、

『<span style="color:red;">げげげのげ</span>らららのら』とコピペすると、

げげげのげだけ、色が赤くなり、文章の途中で命令を入れられる、、という訳です。

 

Jimdoでは、『<p>&nbsp;</p>』というタグが自動的に表示されていたりしますが、その場合は、『&nbsp;』の部分を消して、以下のように記述すれば、OKです。

※『&nbsp;』は、特に表示されません。HTMLソース内で「タグ間が空だよ」とわかりやすく知らせるためのものです。

 

『<p><span style="color:red;">げげげのげ</span>らららのら</p>』

 

 

▼タグの整理

タグ 命令 書き方
<br /> 改行する為のタグ(break) <br />
このタグの後が、改行されます。
<p> 段落をつくるためののタグ(paragraph) <p>内容</p>
内容をはさみます

<span>

要素をまとめる為のタグ
文章の一部(text span)
<span>内容</span>
内容をはさみます。

※<br>は、<br />と同じ意味です。Jimdoでは、<br>を入力しても自動的に<br />に変換されます。

 

▼記述と表示結果一覧

<br>記述例 表示結果

あいうえお</br>かきくけこ<br />さしすせそ

あいうえお
かきくけこ
さしすせそ
<br />の後が改行されています。
<p>の記述例 表示結果

<p>あいうえお</p><p>かきくけこ</p><p>さしすせそ</p>

あいうえお

かきくけこ

さしすせそ

一見<br />と変わっていませんね(^^ゞ

※Jimdoでは変わりませんが、通常は、ブラウザによって、<p></p>の前後に1行空きがでたりします。

<span>記述例 表示結果

 あいうえお<span>かきくけこ</span>さしすせそ

あいうえおかきくけこさしすせそ

タグを入れても変わらないので、必要あるの?って感じですね。

でも文字の色やサイズを変更するだけなら、このspanタグが大活躍です♪

 【おまけ】

↓これ、気になる人います?(^^ゞ 

 

<div>は、要素をまとめる為のタグ・ブロック要素(division)

【書き方】<div>内容</div>・・・・・・内容をはさみます。