Perl Web開発者のHTML・CSS入門

【HTML5】spanタグ - インライン要素の作成

spanタグは、インライン要素を作成します。

インライン要素

<span>インライン要素</span>

インライン要素の幅は、内側の要素の幅になる

インライン要素の幅は、内側の要素の幅になります。

こちら本日のディナーになります。

こちら<span style="background:pink;">本日のディナー</span>になります。

インライン要素では、幅や高さを指定することはできません。また上下のマージンを指定することはできません。この二つが、ブロック要素との大きな違いです。

どんなときにspanタグを使いますか?

文字の大きさや色を一部分だけ変えたい場合です。

電話番号

Tel. だけは小さく、電話番号は大きく、色を付けたい場合。

Tel. 012-3456-7899

Tel. <span style="color:green;font-size:28px;letter-spacing:3px;">012-3456-7899</span>

インライン要素になるタグ

spanタグ以外では、以下のタグがデフォルトでインライン要素になります。

• aタグ
• bタグ

<ul class="list">
  <li><a href="/blog/20200222082049.html">aタグ</a></li>
  <li><a href="/blog/20200221093554.html">bタグ</a></li>
</ul>

aタグで、高さや幅が効かない

aタグで、高さや幅が効かない場合は、aタグが、インライン要素だからです。その場合は「display:block;」で、ブロック要素にしましょう。

• aタグで作るボタン1
• aタグで作るボタン2

<ul>
  <li><a href="/" style="display:block;width:100%;background:yellow;">aタグで作るボタン1</a></li>
  <li><a href="/" style="display:block;width:100%;background:pink;">aタグで作るボタン2</a></li>
</ul>