span 単語、フレーズ、文章のグループ化 コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

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プロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。

text-shadowを使って影をつける

文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは2つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
LINEで送る
Pocket

タイトルとURLをコピーしました