span指定 テキスト編(文字間隔・装飾・位置・改行幅)
@tuzura_ori
spanタグを使って、テキスト(文章)に関するあれこれを指定します。
※タグの＜＞は反映防止のため全角になってますので、半角に変更して下さい
【ここで使用する主なタグ】
letter-spacing(文字間隔)・text-decoration(装飾)・text-align(位置)・line-height(行間隔)
文字間隔
文字と文字との間隔を指定することができます。
タグ
＜span style="letter-spacing: ○○"＞文字と文字の間隔＜/span＞
※○○には数値＋単位 (例)5px・5pt・5em・・・など。
表示例
文字と文字の間隔デフォルト(初期設定=いじってないという事)
文字と文字の間隔5px
文字と文字の間隔5pt
文字と文字の間隔2em
装飾
テキストにアンダーライン等のラインを引きます
タグ
＜span style="text-decoration: none"＞装飾指定なし＜/span＞
＜span style="text-decoration: underline"＞アンダーラインを指定＜/span＞
＜span style="text-decoration:overline"＞オーバーラインを指定＜/span＞
＜span style="text-decoration:line-through"＞打ち消し線を指定＜/span＞
表示例
装飾指定なし
アンダーラインを指定
オーバーラインを指定
打ち消し線を指定
応用1
使い道があるか否かは不明ですが、ラインと文字色を変えることもできます。
タグと表示例
＜span style="color:#ff97cb; text-decoration:line-through"＞＜span style="color:#666;"＞線と文字で色を変える＜/span＞＜/span＞
線と文字で色を変える
応用2
こんな方法でも引けます（border-bottomでアンダーライン、border-topでオーバーライン）
タグと表示例
＜span style="border-bottom:1px solid;"＞直線、色指定なし＜/span＞
直線、色指定なし
＜span style="border-bottom:1px solid #ff97cb;"＞直線、色指定あり＜/span＞
直線、色指定あり
＜span style="border-bottom:2px dotted #ff97cb;"＞点線、色指定あり＜/span＞
点線、色指定あり
＜span style="border-bottom:3px double #ff97cb;"＞二重線、色指定あり＜/span＞
二重線、色指定あり
位置
テキストの表示位置を指定することができます。
参照ページ⇒http://privatter.net/p/783501
※本来でしたらdivタグでtext-align: ○○○;を挟み指定します。
…が、ここではdivが使えない為、やや強引ですがdisplay: block;を使う事によって
中央揃え等を可能にしています。
改行幅
いわゆる行間隔を指定します。
タグと表示例
＜span style="line-height : 200%"＞(改行幅200%のタグ)
巷に雨の降るごとく
われの心に涙ふる。
かくも心ににじみ入る
この悲しみは何やらん？＜/span＞
(改行幅200%の表示例)
巷に雨の降るごとく
われの心に涙ふる。
かくも心ににじみ入る
この悲しみは何やらん？
＜span style="line-height : 3em"＞(改行幅3emのタグ)
巷に雨の降るごとく
われの心に涙ふる。
かくも心ににじみ入る
この悲しみは何やらん？＜/span＞
(改行幅3emの表示例)
巷に雨の降るごとく
われの心に涙ふる。
かくも心ににじみ入る
この悲しみは何やらん？