span要素の概要
| 単語、フレーズ、文章のグループ化HTML | ||
| <span>～</span> |
||
| 目的 | テキストの一部等をグループ化し、スタイルシートで装飾する際に用いる。<span>自体は意味を持たない。 | |
| 関連 | <div> | |
|
つれづれなるまゝに、日くらし硯に向かひて、心にうつりゆくよしなしごとをそこはかとなく書き付く
|
||
つれづれなるまゝに、日くらし硯に向かひて、<span style="background-color: #333333; color: #ffffff; border-radius: 4px;">心にうつりゆく</span>よしなしごとをそこはかとなく書き付く |
||
属性
グローバル属性のみ
CSSデザイン
文字や文章の装飾をしたい際は出来る限り、spanを用いるよう心がけること。以下はspan要素を使った文字デザインの事例。
text-decorationを使って線を引く
text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。
programming-cafe.com
text-shadowを使って影をつける
文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは２つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
programming-cafe.com