文章内の一部だけ上下させたいことってたまにあるんですよね。
今回はクライアント様（同級生だけど 笑）のホームページで使った事例を。
見出しで「News / Campaign」の箇所があります。
もう少しイメージに合う感じにならないか。細かい部分ですけどね。
画像使うまでもないし、
「News ＊ Campaign」
でって事で。簡単なコードですが、ご紹介します。
【HTML】
<h2>News<span class="news">*</span>Campaign</h2>
とりあえず、動かしたい箇所をspanで囲みました。
使用しているフォントのデフォルトだとこんな感じです。
CSSを記述します。
【CSS】
span.news {
display: inline-block;
margin: 20px 0 0 0;
}
インラインブロックにして、margin-topで、はい完了。
と思った方もいるかもしれませんが、実際はこんな感じのイメージになります。
インラインブロック要素にした箇所だけに上下マージンを設定しても全体に影響してしまいました。
パディングでも同様です。
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;
}
こ ん な 感 じ で も 使 え る か も で す