ga-05-a2

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
spanタグの使い方

spanタグ自身は意味を持っていませんが、<span>~</span>で囲まれた範囲に対してスタイルシートを適用することに用いられます。同様の機能を持っているタグにdivタグがありますが、spanタグは改行しないのに対しdivタグは改行します。 詳細は、 「13.レイアウトの基本」の「3.[inline]と[block]と[inline-block]」   を参照してください。 spanタグはinline要素で、divタグはblock要素です。
spanタグは前後に改行が入らないので、文章のスタイルの一部を変更することに使います。

spanタグ リファレンス

■ ブロックレベル要素/インライン要素 : インライン要素

■ 終了タグ 必須/省略可能 : 必須

■ 属性 : 

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     spanタグの書き方サンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <p>これは、
    <span class="d-moji-red">文字を赤色にする</span>
    サンプルです。
    </p>

    <p>これは、
    <span class="d-underline">アンダーライン</span>
    のサンプルです。</p>

    <p>これは、
    <span class="d-keikoupen-red">赤色蛍光ペン</span>
    のサンプルです。</p>
    
    <p>これは、
    <span class="d-haikei-yellow">背景色を黄色にする</span>
    サンプルです。</p>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    spanタグの書き方サンプル
--====================================*/
.d-moji-red{
    color:red;
}
.d-underline{
    text-decoration:underline;
}
.d-keikoupen-red{
    background:
    linear-gradient(transparent 70%,#ff99ab 70%);
}
.d-haikei-yellow{
    background-color: yellow;
}
        
 back
pagetop
 next

pタグの
使い方サンプル

spanタグの
使い方サンプル

divタグの
使い方サンプル

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken