Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

vertical-alignで画像に並ぶ文字の縦位置を指定する

[スポンサード リンク]


FC2ブログでは文字と絵文字の縦の位置が丁度いい感じになってくれます。
自然と文字と絵文字の縦位置が中央で揃うとでもいいましょうか。
自分で用意した小さな画像などを使うと気づくのですが、これ普通にしててもなりませんよ。

← FC2ブログの絵文字はこんな感じです。

← 普通だとこうなるはずなんですよ。

違いがわかりましたか?ズレてるでしょ?
普通は画像の横に文字を入力すると下の例のように画像の底に文字が並びます。
好みもありますがどちらかと言えば上の方がしっくりくると思います。

そこで今回はFC2ブログの絵文字がなぜちゃんと揃うのか説明します。
簡単な事なんですが、絵文字にはあらかじめ「emoji」というclassが設定されています。
そして、そのclassには「vertical-align:middle;」というスタイルが設定されています。

この「vertical-align:middle;」というのが答えです。
vertical-alignは、縦方向の表示位置を指定するプロパティです。
そして、middleという値は画像横の中央に文字列を表示するというものなんです。

ですから、簡単に文字と絵文字が揃うんです。
確認してみてください。
絵文字を使うと[emoji:v-16]というような変な文字が入力されます。
その状態で、一度記事を下書き保存してみましょう。
すると、

<img src="http://blog-imgs-1.fc2.com/image/v/16.gif"  class="emoji" style="border:none;" />

というhtmlタグに変わるのです。

よくタグを見てください。まず、URLはその絵文字のアドレスです。
その他に「class="emoji" style="border:none;"」が追加されているのがわかりますね。
(border:noneは枠線無しという意味です。)

「テンプレートの設定」からCSSファイルを見てみましょう。

.emoji{vertical-align:middle;}

このような記述がきっとあるはずです。(無いと絵文字がちゃんと並びません。)
FC2ブログのテンプレート作る時には必須かな!?

このようにして我々(FC2ブロガー)は、簡単に絵文字を使う事が出来るのでした。
まぁ、知ってても知らなくても普通に使う分には関係ありません。
CSSを弄った時には消さないようにしましょう。(絵文字使わなければ要らないけど・・・。)

「class="emoji"」の有効利用

せっかく元からCSSに設定してあるので、自分で用意した画像にも使ってみましょう。
どう使うかというと、任意のimgタグに「class="emoji"」を追加するだけです。

実は私も良く使ってます。
自分で用意した画像を文字の頭に付けて使う時なんかに重宝しますよ↓

vertical-alignサンプル

あまり大きな画像の時には逆に変な場合もあるので注意しながら使いましょう。

また、vertical-alignには他にも値がありますのでついでに軽く説明しておきます。
あまり使わないと思うけどね・・・。

vertical-alignの値

baseline
emoij.png ← baselineです。何も設定しない場合はこれになります。
top
emoij.png ←topです。
middle
emoij.png ← meddleです。
bottom
emoij.png ← bottomです。
数値(単位付き)
emoij.png ← 20pxを設定をしました。

基準はbaseline(底)です。
正の数だと画像が上へ、負の数だと画像が下へ移動します。
パーセント(%)
emoij.png ← 20%の設定をしました。

基準はbaseline(底)です。
行の高さを基に正の数なら上へ、負の数なら下へ移動します。

(text-top、text-bottom、super、subはなんじゃもんじゃで省略してます。)

わかりやすく大きめの画像を画像を用意しました。
まぁ、こんな感じです。
一見使い勝手が良さそうなプロパティですが、何にでも効くではないので注意しましょう!

尚、vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルであり、ブロックレベル要素には適用できません。従って、 vertical-alignプロパティでボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。

vertical-align-スタイルシートリファレンスより引用

<div>とか<p>などはブロックレベル要素です。
<span>や<img>はインライン要素になります。(だから絵文字で使えるのです。)
詳しく知りたい方はこちらのサイトがとてもわかりやすいですよ↓

The Web KANZAKI - ブロックレベル要素とインライン要素

詳しく知っちゃうとうちのブログが段落(<p>)使ってないのがバレちゃうけどね。シーッ! d( ゚ε゚;)
今度一気にマークアップ修正するかもー!(2009/4/14 修正完了!)

要するに何でもかんでも揃うと思ったら大間違いよって事ですので。
使える機会がありましたら、お試しください。

Comments

もみこ : No title

ずっと悩んでました><;
ものすごくわかりやすかったので、やっと位置を変えることができました。
ありがとうございました<(_ _)>

パペポ : No title

>もみこさん
お役にたててよかったです^^
また何かありましたらよろしくお願いいたします。
コメントどうもありがとうございます。

Comment Form