CSSでテキストの一部だけ上下にずらす方法イメージ

CSSでテキストの一部だけ上下にずらす方法【HTML/CSS】

文章内の一部だけ上下させたいことってたまにあるんですよね。

今回はクライアント様(同級生だけど 笑)のホームページで使った事例を。


見出しで「News / Campaign」の箇所があります。

もう少しイメージに合う感じにならないか。細かい部分ですけどね。

画像使うまでもないし、

「News * Campaign」

でって事で。簡単なコードですが、ご紹介します。

【HTML】
    
    <h2>News<span class="news">*</span>Campaign</h2>
    

とりあえず、動かしたい箇所をspanで囲みました。

使用しているフォントのデフォルトだとこんな感じです。

CSSでテキストの一部だけ上下にずらす方法事例

CSSを記述します。

【CSS】
    
span.news {
display: inline-block;
margin: 20px 0 0 0;
}
    

インラインブロックにして、margin-topで、はい完了。

と思った方もいるかもしれませんが、実際はこんな感じのイメージになります。

CSSでテキストの一部だけ上下にずらす方法事例

インラインブロック要素にした箇所だけに上下マージンを設定しても全体に影響してしまいました。

パディングでも同様です。

CSSで文章内のテキストの一部だけ上下にずらす場合は「vertical-align」

【CSS】
    
span.news {
    vertical-align:-30%;
}
    

「vertical-align」の%は「line-height」の値に対してです。emなど他の相対的な値も使えます。

ちなみに「line-height」は高さは変わりますが、基準となる上下ラインは変わりませんので

spanの部分だけに指定しても、他に対してずれません。

あとは左右にmarginをつけて完成です。

【HTML】
    
    <h2>News<span class="news">*</span>Campaign</h2>
    
【CSS】
    
span.news {
    vertical-align:-30%;
    margin: 0 20px;
}
    
CSSでテキストの一部だけ上下にずらす方法事例
使