【HTML+CSS】文字（インライン要素）と<iframe>タグを使用したボタンを同じ位置にする方法
結構悩みましたが出来たので早速ｃ⌒っﾟдﾟ)っφ ﾒﾓｵ...
ここでは例として文字（リンク）と画像（はてなブログ読者ボタン）を同じ位置にしてみたいと思います
（タグを見ていただければわかるようにiframe要素で作られてるので正確には画像ではないですね）
↑「◆はてなブログ始めました◆」の下の部分に注目。ズレてる。
この時のタグはこんな感じ
</br>◆はてなブログ始めました◆
</br><a href="http://solaluna.hatenablog.com/" target="_blank">半月の下で想ふ言</a> <iframe src="http://blog.hatena.ne.jp/solaluna/solaluna.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>
（見にくいね！今度なんとかするね！）
で、なんか気持ち悪いので文字とボタンを同じ位置にしたいと思います。
使うのはこれ
vertical-align: bottom;
これは対象要素の上下方向の配置を指定できるプロパティです。
値にbottomと指定すると対象要素の下端に揃える事ができるってわけです。
こんなのあったんだね！知らなかったよ！
指定するパラメータは他にも
- top（上揃え）
- middle （真ん中揃え）
- baselin（文字下ベースライン揃え）
これだけあります。
これ（vertical-align: bottom;）を<iframe>タグに対してCSSかHTMLに打ち込みます。
（※iframe要素はインライン要素にもブロックレベル要素にもなり得るらしい）
自分はCSSに書くのがめんどくさいのでHTMLに直書きします（ホントはあんまりよろしくないけど）
</br>◆はてなブログ始めました◆</br>
<a href="http://solaluna.hatenablog.com/" target="_blank">半月の下で想ふ言</a> <iframe src="http://blog.hatena.ne.jp/solaluna/solaluna.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28" style="vertical-align: bottom;"></iframe>
↑こんなかんじで
CSSだとこう書くのかな（間違ってたらごめんね）
/* はてなブログボタン */
iframe {
vertical-align: bottom;
}
で保存して見てみると
綺麗に揃いました！
おわり
